Falling Back
To properly support a Flash-based fallback and still use HTML5 video, we
place the Flash object code within the <video> tag. The site Video for Everybody
outlines this process in detail,^4 but there’s a much easier way to get videos
to work across platforms without writing a ton of markup.The Video.js library makes it incredibly easy to support video on all platforms,
using the information within the <video> tag to build a suitable Flash fallback
for browsers that don’t support HTML video. Here’s how we make it work.^5First, we add the Video.js library and style sheet to our existing page. Video.js
provides a content-delivery network we can use, so we don’t have to download
the libraries ourselves. We just need to add this code to the <head> section of
our page:html5_video/videojs_index.html
<linkhref="http://vjs.zencdn.net/4.0/video-js.css"rel="stylesheet">
<scriptsrc="http://vjs.zencdn.net/4.0/video.js"></script>Then we change the
<videoid="video_blur"preload="auto"controls
width="640"height="480"
class="video-jsvjs-default-skin"
data-setup="{}">We use the class attribute to tell Video.js that it should use this video, and it
should use the player skin we specify. The data-setup attribute is a custom one
that contains configuration options represented as JavaScript Object Notation
(JSON) data. We don’t need any special options, so we simply pass a blank
object.When we bring up our page in Internet Explorer 8, our video plays and we
don’t need to encode to another format or load our own Flash-based player.
Our Internet Explorer friends will see something like Figure 23, Our video in
Internet Explorer using Video.js, on page 144. It’s important to note that Flash’s
security settings may prevent you from seeing the video unless you’re serving
the HTML and the video from a web server. Using a file: URL may not work.Of course, we still have to come up with a solution for people who don’t have
native video support and don’t have Flash installed. We’ll let people download
our video content by adding another section with download links (see the
following code).report erratum • discussEmbedding Video • 143
Download from Wow! eBook <www.wowebook.com>