Using the video element JavaScript API

Example 1:

  1. <video id=“vid” controls>
  2. <source src=http://html5doctor.com/demos/video-canvas-magic/video.webm
  3.          type=video/webm>
  4. </video>
  5. <p>Example of custom controls:</p>
  6. <button onclick=playVideo(); style=cursor: pointer;>Play</button>
  7.  
  8. <button onclick=pauseVideo(); style=cursor: pointer;>Pause</button>
  9.  
  10. <button onclick=rewindVideo(); style=cursor: pointer;>
  11.        Back to beginning</button>
  12.     vid = document.querySelector(“#vid”);
  13.     function playVideo() {
  14.        vid.play();
  15.     }
  16.     function pauseVideo() {
  17.        vid.pause();
  18.     }
  19.     function rewindVideo() {
  20.        vid.currentTime = 0;
  21.     }

Example 2:

HOW TO DETECT THE END OF A VIDEO AND START ANOTHER ONE

This example listens for the ended event, and calls a callback function when the video is ended.

  1. <video src=“video.ogv” id=“myVideo”>
  2.     video not supported
  3. </video>
  4. type=‘text/javascript’>
  5.   var vid = document.querySelector(‘#myVideo’);
  6.   vid.addEventListener(‘ended’playNextVideo, false);
  7.   function playNextVideo(e) {
  8.      // Whatever you want to do after the event, change the src attribute
  9.      // of the video element, for example, in order to play another video
  10.   }

Example 3:

HOW TO MANAGE PLAYLISTS

This example detects the end of a video then loads the next video, changes the src attribute of the video element and plays the video (see the online example).

To try this example: use the progress cursor to go near the end of the first video that is being played and see how it continues with the next video.

  1. <!doctype html>
  2. <html lang=”en”>
  3. <head>
  4. <title>Sequential Movies</title>
  5.    var myVideo;
  6.    var currentVideo = 0;
  7.    var sources = [
  8.          http://html5doctor.com/demos/video-canvas-magic/video.mp4&#8221;,
  9.  “http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973_512kb.mp4&#8221;
  10.    ];
  11.    // Set the src of the video to the next URL in the playlist
  12.    // If at the end we start again from beginning (the modulo
  13.    // source.length does that)
  14.    function loadNextVideo() {
  15.       myVideo.src = sources[currentVideo % sources.length]
  16.       myVideo.load();
  17.       currentVideo++;
  18.    }
  19.    // callback that loads and plays the next video
  20.   function loadAndplayNextVideo() {
  21.       console.log(“playing “ + sources[currentVideo % sources.length])
  22.       loadNextVideo();
  23.       myVideo.play();
  24.   }
  25.   // Called when the page is loaded
  26.   function init(){
  27.       // get the video element using the DOM api
  28.       myVideo = document.querySelector(“#myVideo”);
  29.       // Define a callback function called each time a video ends
  30.       myVideo.addEventListener(‘ended’, loadAndplayNextVideo, false);
  31.       // Load the first video when the page is loaded.
  32.       loadNextVideo();
  33.   }
  34. </head>
  35. <body onload=init()>
  36.      <video id=“myVideo” controls></video>
  37. </body>
  38. </html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s