Audio and video - HTML5 and CSS3 - page 152

Supporting legacy browsers with Flash video
It's possible to get the best of both worlds: HTML5 video for browsers
that support it and Flash for browsers that don't. At its simplest, this is
a matter of wrapping the code for Flash inside the <video> element:

<video id="myvideo" controls>
<source src="myvideo.webm" type="video/webm">
<source src="myvideo.mp4" type="video/mp4">
<source src="myvideo.low.mp4" type="video/mp4">
<source src="myvideo.ogv" type="video/ogg">
<object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/
pub/shockwave/cabs/flash/
swflash.cab#version=6,0,40,0"
width="320" height="240"
id="myvideoname">
<param name="movie" value="player.swf">
<param name="quality" value="high">
<param name="bgcolor" value=#ffffff>
<param name="flashvars" value="file=myvideo.mp4">
</object>
No video support, <a href="myvideo.webm">try downloading</a>!
</video>

Sources for
HTML5 video
as normal

Add Flash
code in
<video>
element

Flash movie
is a player

Video
file
to play

Browsers that support the <video> element will ignore the fallback con-
tent, whereas browsers that don't support the <video> element will
ignore that and only see the <object> element that embeds the Flash
plug-in. Browsers that support neither the <video> element nor the
Flash player will see the link to download the video.

Summary
In this chapter, you've learned about multimedia on the web, playing
audio and video with simple markup. You've seen the benefits of hav-
ing multimedia content integrated with the rest of your web page con-
tent and looked at manipulating that multimedia with JavaScript.

HTML5 offers many other opportunities for manipulating your
content in new and exciting ways with JavaScript, such as WYSIWYG
editing and drag — and — drop interaction. The next chapter looks at
them in more detail.