Page 53 - DCAP408_WEB_PROGRAMMING

Unit 2: Creating Static Web Pages

Notes
Example: Here’s an example that uses the video tag in conjunction with the Canvas tag and
Web Workers (we’ll cover those in the future) to create a motion tracking system for web video.
The unfortunate answer is that you’ll need to point to multiple videos. Hardly ideal, but if you
want to push the HTML boundaries, you can embed your video using the <video> tag for
browsers that support HTML 5 and fallback on Flash for those that don’t.
Something like this would do the trick:
<video src=”video.mp4" controls>
<object data=”player.swf” type=”application/x-shockwave-flash”>
<param value=”player.swf” name=”movie”/>
...etc...
</object>
</video>
Obviously, all we’ve really done is wrap the same old <object> and <embed> tags with the
new<video> tag — hardly a great leap for the web.
How about we get rid of the fallback code, keep our HTML limited to the video tag and use a
little JavaScript to handle the Flash embedding behind the scenes?

<video controls>
<source src=”video.m4v” type=”video/mp4" /> <!— MPEG4 for Safari —>
<source src=”video.ogg” type=”video/ogg” /> <!— Ogg Theora for Firefox
3.1b2 —>
</video>
Sjokvist’s Flash solution requires a little JavaScript to sniff out the browsers capabilities and
then offer Flash if the browser can’t understand HTML5 (note that the code uses the swfobject
library to handle the actual embed).

Notes We prefer this method since it keeps the actual HTML code cleaner and when video
tag support is ubiquitous, all you need to do is drop the JavaScript. There’s no requirement
to rewrite your actual pages.

Another possible solution would be to simply load the MP4 movie into a Flash container file. As
of Flash Player 10, Flash supports dynamically loaded MP4 files, so all you would need is to use
Sjokvist’s JavaScript detection code, but rather than feeding your player SWF a separate .flv
video file, you could just load the same MP4 file.
If you need a refresher course on how to dynamically load videos into a Flash file, check out this
Stack Overflow page which has a quick overview and some basic sample code.
Using that scenario, you’ve got a solution where every visitor can see your video and you only
need to offer two actual files: Ogg Theora for Firefox and other browsers which support it, and
an MP4 for everyone else.

2.4.2 Using the <audio> tag

The audio tag is more or less a duplicate of the video tag. The same codec limitations apply —
Mozilla only supports Ogg Vorbis files, while Safari can handle pretty much anything QuickTime
can.

LOVELY PROFESSIONAL UNIVERSITY 47