HTML5 and CSS3, Second Edition

or other device. Hiding the links might save screen real estate, but it won’t

prevent savvy people from downloading the videos directly, so don’t hide links

as a security measure.

Forcing Flash for Certain Clients

By default, Video.js uses Flash as a fallback for browsers that don’t under-

stand the video element. In some cases you may want to force Flash for certain

browsers even if they do support HTML5 video. Keep in mind that if a user’s

browser supports the <video> tag, it’s not going to use the Flash fallback, so

you have to include the video format supported by the browser, or the Flash

fallback will never fire. If you have lots of videos already in the MP4 format,

you may not want to convert all of those videos. Flash will play MP4 files just

fine.

By using a simple combination of feature detection and Video.js’s configuration

options, we can tell Video.js it should use Flash if the browser doesn’t support

MP4.

After each <video> tag, we place this code, which tests to see if the browser

supports MP4 files:

html5_video/mp4only_index.html

<script>

varvideoElement= document.createElement("video");

if(videoElement.canPlayType){

if(videoElement.canPlayType("video/mp4") ===""){

videojs("video_blur", {"techOrder":["flash","html5"]});

};

}

</script>

We create a video element and then see what it supports using canPlayType(). If

the canPlayType() method returns an empty string, then we don’t have support

and we then use the videojs object provided by the Video.js library to configure

the options for the video player.

The videojs object takes the id of the <video> tag as its first argument, followed

by the hash of options that configure how the player will work.

With this in place, Firefox, which doesn’t support MP4 files natively, will fall

back to Flash. It’s worth noting that this isn’t an optimal solution; you should

encode the videos for the browsers you support. But if you don’t have the

ability or resources to do that, this is a good compromise.

Video is a wonderful way to share ideas and information, but what do we do

for people who can’t see the video or hear the audio? Read on to find out!

report erratum • discuss

Embedding Video • 145

Download from Wow! eBook <www.wowebook.com>