HTML5 Canvas, 2nd Edition

Plain-Vanilla Video Embed

To demonstrate a plain-vanilla embed, we are going to work under our previously established rules for video formats. We will use three formats because no one format will work in every browser. We have created a version of the Muir Beach video as a .webm, an .ogg, and an .mp4. For the rest of this chapter, we will use all three formats in all of our video embeds.

To support all three formats at once, we must use an alternative method for setting the src attribute of the <video> tag. Why? Because we need to specify three different video formats instead of one in our HTML page. To do this, we add <source> tags within the <video> tag:

<video id="thevideo"  width="320" height="240">
 <source src="muirbeach.webm" type='video/webm; codecs="vp8, vorbis" '>
 <source src="muirbeach.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2" '>
 <source src="muirbeach.ogg" type='video/ogg; codecs="theora, vorbis" '>
</video>

Note

We put the .mp4 file second in the src list because newer versions of Chrome will try to use the format, but performance is spotty. This might cause issues on iOS (iPhone, iPad) devices and with older versions of Safari. In those versions of Safari, the browser will not attempt to load any other src type than the first one listed.

When a web browser reads this HTML, it will attempt to load each video in succession. If it does not support one format, it will try the next one. Using this style of embed allows the code in Example 6-1 to execute on all HTML5-compliant ...