O'Reilly logo

JavaScript Cookbook by Shelley Powers

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

15.12. Controlling Video from JavaScript with the video Element

Problem

You want to embed video in your web page, and not use Flash. You also want a consistent look for the video control, regardless of browser and operating system.

Solution

Use the new HTML5 video element:

<video id="meadow" poster="purples.jpg" >
   <source src="meadow.m4v" type="video/mp4"/>
   <source src="meadow.ogv" type="video/ogg" />
   <object width="425" height="344">
   <param name="movie"
value="http://www.youtube.com/v/CNRTeSoSbgg&hl=en_US&fs=1&"></param>
   <embed src="http://www.youtube.com/v/CNRTeSoSbgg&hl=en_US&fs=1&"
type="application/x-shockwave-flash"
   allowscriptaccess="always" allowfullscreen="true" width="425"
height="344">
   <p>Audio slideshow from Shaw Nature Center</embed></object>
</video>

And provide controls for it via JavaScript, as shown in Example 15-8. Buttons are used to provide the video control, and text in a div element is used to provide feedback on time during the playback.

Example 15-8. Providing a custom control for the HTML5 video element

<!DOCTYPE html>
<head>
<title>Meadow Video</title>
<script>

function manageEvent(eventObj, event, eventHandler) {
   if (eventObj.addEventListener) {
      eventObj.addEventListener(event, eventHandler,false);
   } else if (eventObj.attachEvent) {
      event = "on" + event;
      eventObj.attachEvent(event, eventHandler);
   }
}

window.onload=function() {

  // events for buttons
  manageEvent(document.getElementById("start"),"click",startPlayback);
  manageEvent(document.getElementById("stop"),"click",stopPlayback);
  manageEvent(document.getElementById("pause"),"click",pausePlayback);

  // setup for video playback
  var meadow = document.getElementById("meadow");
  manageEvent(meadow,"timeupdate",reportProgress);

  // video fallback
  var detect = document.createElement("video");
  if (!detect.canPlayType) {
    document.getElementById("controls").style.display="none";
  }
}

// start video, enable stop and pause
// disable play
function startPlayback() {
  var meadow = document.getElementById("meadow");
  meadow.play();
  document.getElementById("pause").disabled=false;
  document.getElementById("stop").disabled=false;
  this.disabled=true;
}

// pause video, enable start, disable stop
// disable pause
function pausePlayback() {
  document.getElementById("meadow").pause();
  this.disabled=true;
  document.getElementById("start").disabled=false;
  document.getElementById("stop").disabled=true;
}

// stop video, return to zero time
// enable play, disable pause and stop
function stopPlayback() {
  var meadow = document.getElementById("meadow");
  meadow.pause();
  meadow.currentTime=0;
  document.getElementById("start").disabled=false;
  document.getElementById("pause").disabled=true;
  this.disabled=true;
}

// for every time divisible by 5, output feedback
function reportProgress() {
  var time = Math.round(this.currentTime);
  var div = document.getElementById("feedback");
  div.innerHTML = time + " seconds";
}

</script>

</head>
<body>
<video id="meadow" poster="purples.jpg" >
   <source src="meadow.m4v" type="video/mp4"/>
   <source src="meadow.ogv" type="video/ogg" />
   <object width="425" height="344">
   <param name="movie"
value="http://www.youtube.com/v/CNRTeSoSbgg&hl=en_US&fs=1&"></param>
   <embed src="http://www.youtube.com/v/CNRTeSoSbgg&hl=en_US&fs=1&"
type="application/x-shockwave-flash"
   allowscriptaccess="always" allowfullscreen="true" width="425"
height="344">
   <p>Audio slideshow from Shaw Nature Center</embed></object>
</video>
<div id="feedback"></div>
<div id="controls">
<button id="start">Play</button>
<button id="stop">Stop</button>
<button id="pause">Pause</button>
</controls>
</body>

Discussion

The new HTML5 video element, as with the HTML5 audio element, can be controlled with its own built-in controls, or you can provide your own, as shown in Example 15-8. The media elements support the following methods:

play

Starts playing the video

pause

Pauses the video

load

Preloads the video without starting play

canPlayType

Tests if the user agent supports the video type

The media elements don’t support a stop method, so I emulated one by pausing video play and then setting the video’s currentTime attribute to 0, which basically resets the play start time. The only browser this didn’t work in was Chrome. It worked in Opera 10.5, Firefox 3.5, and WebKit/Safari.

I also used currentTime to print out the video time, using Math.round to round the time to the nearest second, as shown in Figure 15-4.

Playing a video using the video control, displaying the number of seconds of video

Figure 15-4. Playing a video using the video control, displaying the number of seconds of video

The video control is providing two different video codecs: H.264 (.mp4), and Ogg Theora (.ogv). Firefox, Opera, and Chrome support Ogg Theora, but Safari/WebKit only supports the H.264 formatted video. However, by providing both types, the video works in all of the browsers that support the video element. For the browsers that currently don’t support video, such as IE, the fallback YouTube video is provided, and if that doesn’t work, then there’s text. In addition, if the video element is not supported, the video controls are hidden.

The video and audio controls are inherently keyboard-accessible. If you do replace the controls, you’ll want to provide accessibility information with your replacements. The video control doesn’t have built-in captioning, but work is underway to provide the API for captioning.

Note

Microsoft has stated it will support the video element in IE9, and the H.264 codec.

See Also

For more on the new video/audio elements, see Opera’s introduction, Safari/WebKit’s, and Mozilla’s.

A good place for more information on Ogg Theora is the Theora Cookbook.

At the time this book entered production, Google had released another video codec, WebM, for royalty free access. Several browsers have promised to support this codec. For more information, see the WebM Project site.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required