HTML and CSS Reference
In-Depth Information
6.
Now add some fallback content.
<p>
Your browser doesn't support HTML5 video.
<a href="videos/mikethefrog.mp4">Download</a> the video
instead.
</p>
7.
Save the
about.html
file.
Now, if you open the About page in Safari, you would see that the video plays perfectly. This is because the browser
chooses a file that it can play from the source options you give it.
You also added some fallback content, just in case the user's browser doesn't support HTML5 video. Figure 11-2
shows how the page looks if the fallback content is displayed instead of the video.
Adding a Poster Image
Depending on your browser, you might have noticed that when the page first loads the video is displayed as a
solid black box (refer to Figure 11-1). This may not be the same in all browsers, but there is a way that you can make
sure that this black box does not appear.
The
<video>
element has a
poster
attribute that can be used to specify a path to an image file that should be dis-
played in the video's place until the user clicks the Play button.
