Delivering HTML5 video and fallback support with the help of Video JS

With HTML5 video and the current support in web browsers, we need to cater to different codecs, and fallbacks for web browsers with no native video support. This is where Video JS steps in.

What it is

Video JS is a little JavaScript library that helps with feature and codec detection, and also delivering Flash fallbacks where that is applicable. It offers general control and additionally skinning capabilities of the video presentation. I’ve used it recently where I needed a video to be playable across as many platforms as possible, and I was quite happy with the results.

Converting video

If you have a video in a certain format, I’d recommend Miro Video Converter to convert it to the other optimal formats as well.

How to do it

Let’s look at a complete example, taken from the included Video JS demo package, of how to include a video in a web page and use the native HTML5 video support if existent, or otherwise use a fallback.

<link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS">

<script src="video.js" type="text/javascript" charset="utf-8"></script>	

<!-- Begin VideoJS -->
<div class="video-js-box">
	<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
	<video class="video-js" width="640" height="264" controls="controls" preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png">
		<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
		<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
		<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />

		<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
		<object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
			<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
			<param name="allowfullscreen" value="true" />
			<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
			<!-- Image Fallback. Typically the same as the poster image. -->
			<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image" title="No video playback capabilities." />
		</object>
	</video>

	<!-- Download links provided for devices that can't play video in the browser. -->
	<p class="vjs-no-video">
		<strong>Download Video:</strong>
		<a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
		<a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
		<a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
		<!-- Support VideoJS by keeping this link. -->
		<a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
	</p>
</div>
<!-- End VideoJS -->

Then, all you need to do is trigger the script when the DOM is ready:

	VideoJS.setupAllWhenReady();

If you want to, there are also some settings for the JavaScript:

VideoJS.setupAllWhenReady({
	controlsBelow: false, // Display control bar below video instead of in front of
	controlsHiding: true, // Hide controls when mouse is not over the video
	defaultVolume: 0.85, // Will be overridden by user's last volume if available
	flashVersion: 9, // Required flash version for fallback
	linksHiding: true // Hide download links when video is supported
});

Note: as you can see in the HTML code above, for the Flash fallback there’s a reference to Flowplayer to create a container to the video file and play it. Your mileage may vary, but you might need to download Flowplayer locally to the rest of your code to get it to work (alternatively use another Flash video player container).

Skinning capabilities

There are also a number of skins for Video JS available where you can make it look like other video web services on the web, or you can adapt it to match your own desired design.

Subtitles support

There is supposedly support for subtitles as well: if you add the attribute data-subtitles="demo-subtitles.srt" to the video element, it should display subtitles (I’ve tried adding this attribute in the included demo package, and currently it’s not working for me).

Web browser, device and format support

Video JS offers HTML5 video support for these web browsers:

  • Firefox
  • Google Chrome
  • Safari
  • Internet Explorer 9

complemented by fallback support for IE6 – IE8.

The supported video formats are:

  • WebM
  • Ogg Theora
  • H.264

Supported devices are:

  • iPhone
  • iPad
  • Android

Video for everybody

I think solutions like these are great, and exactly what progressive enhancement is about. So, unless DRM is vital for you, and you want to use HTML5 video right now, this is a great option!

Leave a Reply

Your email address will not be published. Required fields are marked *