Multiple Video Control

Summary

An experiment with showing videos and controlling them via JavaScript. Learned that Vimeo (as of the time this experiment was created) does not allow JavaScript control, whereas YouTube does.

This experiment was created to test JavaScript capabilities regarding building a video-based site for a client..

Example

Play/Pause both videos at once.

Date Created

25–26 Oct 2008.

Help

  1. w3schools.com
  2. php.net
  3. YouTube JavaScript Player API Reference, which taught me how to run the script to display the videos.
  4. swfobject.js, which is required for showing the YouTube videos.
  5. Videos use courtesy of YouTube users reelblogs and Nate Houghteling, and Kai Hasson.

Process

Lots of troubleshooting and getting the right syntax. Different browsers seem to interpret slightly differently, so it’s somewhat hard to tell what’s happening, too.

  1. Paste embed code straight from source.
  2. Make it XHTML Standards compliant. Assign the file with an id for referral later.
  3. Test ids with css. The object is quadrupled in size, controlled by CSS, showing the ids work.
  4. Try to control the video itself by external actions.
  5. Switch to a YouTube video. YouTube requires a different API and embedding script.
  6. Consolidate the play/pause link.
  7. Add a second video, with another play/pause link.
  8. Consolidate the links to play and pause both at the same time.
  9. Load the "Chromeless" YouTube Player. Try with one video first.
  10. Load the second video. Consolidate links.

The Code

Here’s the code. Please link back here if you’re using it.

Put this HTML in the body tag.


<div class='vPlayers' >
    <div id='video1Player' >
    </div>
</div>
<div class='vPlayers' >
    <div id='video2Player' >
    </div>
</div>
            

Place this JavaScript at the end of body tag, after the above HTML.


//settings for Video 1
var params1 = { allowScriptAccess: "always" };
var atts1 = { id: "video1" };
swfobject.embedSWF("http://www.youtube.com/apiplayer?hl=en%26fs=1%26rel=0%26enablejsapi=1%26playerapiid=ytplaye1","video1Player", "425", "344", "8", null, null, params1, atts1);

//settings for Video 2
var params2 = { allowScriptAccess: "always" };
var atts2 = { id: "video2" };
swfobject.embedSWF("http://www.youtube.com/apiplayer?hl=en%26fs=1%26rel=0%26enablejsapi=1%26playerapiid=ytplayer2","video2Player", "425", "344", "8", null, null, params2, atts2);

//The text that will change depending on "playing" or "paused"
var p10PlayPause=document.getElementById("p10PlayPause");
            
//Manual switch for determining whether the videos are playing or not.
var videosPlaying=false;

//Change the text based on the switch state.
function applyPlayPause(){
    if (videosPlaying==false){
        p10PlayPause.innerHTML="Play";
        } else if (videosPlaying==true){
        p10PlayPause.innerHTML="Pause";
        }
    }

//Play/Pause all videos
function p10PlayPauseVideo(){
    if (videosPlaying==false){
        ytplayer1.playVideo();
        ytplayer2.playVideo();
        videosPlaying=true;
        applyPlayPause();
        } else if (videosPlaying==true){
        ytplayer1.pauseVideo();
        ytplayer2.pauseVideo();
        videosPlaying=false;
        applyPlayPause();
        }
    }

//Assign the video embedding to the player, then cue the video
function onYouTubePlayerReady(playerId){
    ytplayer1=document.getElementById("video1");
    ytplayer2=document.getElementById("video2");
    ytplayer1.cueVideoById("OlPzNJSOG9U",0);
    ytplayer2.cueVideoById("SlTvSUCCqPo",0);
    }

function fnToLoad(){
    applyPlayPause();
    }
            
onload=fnToLoad();
            

Return to top