Toggle navigation
Two Simultaneous Videos Demo Experiment Run Experiment

Two Simultaneous Videos

Jaap Murre

This demo shows how you can show two videos simultaneously or as is the case here, the same video in two different positions.


This script also demonstrates how you can hide the controls by accessing VideoElementJS styles and how to completely disable the keyboard short-cuts to control video playing.

Chapter 10

If you are a registered user and signed in, you can here copy this script and its stimuli to your own account, where you can edit it and change it in any way you want.

It is absolutely free to register (no credit card info asked!). You can then instantly copy this experiment with one click and edit it, change its accompanying texts, its landing page, stimuli, etc. Invite your colleagues, friends, or students to check out your experiment. There is no limit on how many people can do your experiment, even with a free account.

The catch? There is no catch! Just keep in mind that with a free account, you cannot collect data. For teaching that is usually not a problem. For research, prepaid data collection (unlimited subjects) starts as low as €10.00 for a 10-day period.

Register 
var b1, b2, b3, cover, options, advanced_options;
                
main = new Box();

b1 = addblock("center","top",100,25)
     .text("Two snakes");  
             
b2 = addblock("left","center",30,20);
b3 = addblock("right","center",30,20);

// Cover player until it is playing to hide initial startup stuff 
cover2 = addblock("left","center",32,32,"white");
cover3 = addblock("right","center",32,32,"white");

var video_options = {
        autoplay: true              // Start right away
    },
    advanced_options = {
        clickToPlayPause: false,    // Disable click                    
		features: [],               // No controls visible (Play etc.)
		pauseOtherPlayers: false,   // Allow two or more players
		enableKeyboard: false       // No keyboard shortcuts
    };

b2.setvideo('animated_snake_moving_1',100,100,video_options,"snake1",advanced_options);
query(".mejs__container",b2.node).style("background-color","white"); // no black background
query(".mejs__controls",b2.node).style("display","none"); // just in case: hide controls

// Make sure the second video player has a different ID, here 'snake2'
b3.setvideo('animated_snake_moving_1',100,100,video_options,"snake2",advanced_options);
query(".mejs__container",b3.node).style("background-color","white");
query(".mejs__controls",b3.node).style("display","none");

b3.await('videoplaying'); // Starting a video may take some time, so we wait for this

cover2.style("background-color","transparent"); // Then, we remove the cover on playing
cover3.style("background-color","transparent"); 

await("videoended"); // We finish up as soon as the first player has ended

b2.deletevideo(); // Delete the players; we will (re)create new ones all the time
b3.deletevideo();

console.log("blocks: ",b2,b3);

b2.clear(); // We clear the block
b3.clear();                

await(500);

b1.text("That's all folks!");

await(2000);