Show Video
A basic example of how to display videos.
It is heavily commented so that you can follow everything that goes on. After reading the documentation feel free to download the file and modify it according to your needs.
Last modified April 19, 2021: test (6f8144d)
xxxxxxxxxx
// The Video manager is a basic example of how to display videos.
// It is heavily commented so that you can follow everything that goes on.
// After reading the documentation feel free to download the file and modify it according to your needs.
//
// ### Opening section
//
// The opening section of each script is always more or less the same.
// We create the wrapper for the script (`define`), and create a new instance of a manager.
define(['managerAPI'], function(Manager){
var API = new Manager();
// ### The sequence
// The most important part of every manager script is the sequence.
// This is where you tell it how to interact with the participants.
API.addSequence([
// #### Show Video
// This message simply displays a video
// You can use [this site](http://v4e.thewikies.com/) to create appropriate templates
// Note that the video url is set within the data attributes
{
type: 'message',
data: {
// The video url (as mp4!)
videoUrl: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
// An image to use as a poster until the video plays
imageUrl: 'http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg'
},
// We create the video template itself
template: [
'<div class="text-center">',
' <video controls="controls" autoplay="autoplay" poster="<%= tasksData.imageUrl %>" width="640" height="360" style="margin:auto">',
' <source src="<%= tasksData.videoUrl %>" type="video/mp4"/>',
' <object type="application/x-shockwave-flash" data="http://flashfox.googlecode.com/svn/trunk/flashfox.swf" width="640" height="360">',
' <param name="movie" value="http://flashfox.googlecode.com/svn/trunk/flashfox.swf" />',
' <param name="allowFullScreen" value="true" />',
' <param name="wmode" value="transparent" />',
' <param name="flashVars" value="autoplay=true&controls=true&poster=<%= tasksData.imageUrl %>&src=<%= tasksData.videoUrl %>" />',
' </object>',
' </video>',