Adding Video and Audio - HTML5 Foundations - page 215

You provide multiple file formats using <source> elements. These elements go inside the <video> element and
should have src and type attributes.
<video id="myVideo" width="400" height="225" controls>
<source src="videos/mikethefrog.webm" type="video/webm">
<source src="videos/mikethefrog.ogv" type="video/ogv">
<source src="videos/mikethefrog.mp4" type="video/mp4">
<p>
Your browser doesn't support HTML5 video.
<a href="videos/mikethefrog.mp4">Download</a> the video
instead.
</p>
</video>
You can also add some fallback content to the <video> element that will display if the browser does not support
HTML5 video (such as the <p> element in the preceding example). This fallback content should usually include a
link for the user to download the video file directly.
The <video> element is not supported in Internet Explorer versions 8 and earlier. You can check cross-browser
support for this element here: http://caniuse.com/#feat=video .
Now it's time to modify your About page and add the other video files you created earlier in this chapter. You also
add in some fallback content.
The code for this exercise can be found in folder 3.
Here are the steps for modifying your About page to add other video files:
1. Open the about.html file in your text editor.
2. Remove the src attribute from the <video> element.
3. Add a <source> element for the WebM file within the <video> element.
<source src="video/mikethefrog.webm" type="video/webm">
4. Now add a <source> element for the OGV file.
<source src="video/mikethefrog.ogv" type="video/ogv">
5. Finally, add a <source> element for the MP4 file.
<source src="video/mikethefrog.mp4" type="video/mp4">