Variable Speed Playback – HTML5 Video Feature

comments Comments Off
By Larry B, April 6, 2012
One of the most desired features for educational video content - particularly recorded lecture content - is the ability to speed up playback to 1.2x or 1.4x normal speed. Now, you can easily add this feature to your video website, with a few caveats.

When you increase playback speed, it turns out that it's still quite listenable, and the quicker pace can even enhance the experience. Chit chat, pauses, um's and ah's and other delays that slip by unnoticed when you're live in the room face-to-face with the speaker become unbearable time-wasters when you're watching a recording on your own time.

There used to be two options for enabling this. On the client side, third-party products installed directly by end users, like Encounce's MySpeed plugin, were the way to do it.

On the server side, you could encode the video with the faster timeline baked in, and let the user switch streams at will. Bloggingheads.tv uses this method on most of its videos.

But now, HTML5 video playback offers the same capability (at least on some browsers). Let's take a look at an example. (You'll need to use Chrome, Safari, or IE9 for this example to work - Firefox (at least as of version 8) does not yet support this.)

The key is the <video> element's playbackRate property. Normal playback speed is expressed as a floating point number: 1.0. Accordingly, 2.0 is double speed, 0.5 is half speed.

Here's a code sample for the links above the video shown below:
<script type="text/javascript">

function speed(x){
        var myVid=document.getElementById("streamDiv_video");
	myVid.playbackRate=x;
	$('#pbrate').html(x);
}
</script>
...and then the HTML...
        <a href="javascript:speed(0.5)">.5x</a>
	<a href="javascript:speed(1.0)">1x</a>
	<a href="javascript:speed(1.2)">1.2x</a>
Now the example...
.5x 1x 1.2x 1.4x 2x
Playing at 1x
If you're using Firefox, you won't see video. Firefox cannot play H.264 video in HTML5. Encoding in WebM would have made the video play, but since Firefox does not yet support the playbackRate property, this demo still would not have worked.
Video: Just Another Day, NASA JPL.

There are advantages and disadvantages to each method:
MethodAdvantagesDisadvantages
Client-side PluginLocal install for user - no effort on content provider's part.Can't offer as universal feature of your site, does not work well with RTMP Flash streaming - HTTP only.
Encoding with timeline baked inWorks with RTMP, Flash, any browserExtra encoding for site owner, custom code to switch streams seamlessly, can't do progressive download, requires streaming (or pseudo-streaming) protocol that provides random access into video
HTML5 playbackRateLightweight to implement, just some Javascript on the page, works with progressive downloadWorks only with HTTP delivery, works only on certain browsers
The W3C has a good HTML5 Video property and event demo tool where you can manipulate playbackRate and other properties, and see the resulting events as they happen.