I'll be honest. I've always found adding media such as video and audio into a web page is an utter pain in HTML 4.01. It's not difficult, just messy. HTML5 makes things far easier. The syntax is much like adding an image:
<video src="myVideo.ogg"></video>
A breath of fresh air for most web designers! Rather than the abundance of code currently needed to include video in a page, HTML5 allows a single <video></video>tag (or <audio></audio> for audio) to do all the heavy lifting. It's also possible to insert text between the opening and closing tag to inform users when they aren't using an HTML5 compatible browser and there are additional attributes you'd ordinarily want to add, such as the height and width. Let's add these in:
<video src="video/myVideo.mp4" width="640" height="480">What, do you mean you don't understand HTML5?</video>
Now, if we add the preceding code snippet into our page and look at it in Safari, it will appear but there will be no controls for playback. To get the default playback controls we need to add the
controls attribute. We could also add the autoplay attribute (not recommended—it's common knowledge that everyone hates videos that auto-play). This is demonstrated in the following code snippet:
<video src="video/myVideo.mp4" width="640" height="480" controls autoplay>What, do you mean you don't understand HTML5?</video>
The result of the preceding code snippet is shown in the following screenshot:
Further attributes include preload to control pre-loading of media (early HTML5
adopters should note that preload replaces autobuffer), loop to repeat the video, and poster to define a poster frame of video. This is useful if there's likely to be a delay in the video playing. To use an attribute, simply add it to the tag. Here's an example including all these attributes:
<video src="video/myVideo.mp4" width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster.jpg">What, do you mean you don't understand HTML5?</video>
The original specification for HTML5 called for all browsers to support the direct playback (without plugins) of video and audio inside Ogg containers. However, due to disputes within the HTML5 working group, the insistence on support for Ogg (including Theora video and Vorbis audio), as a baseline standard, was dropped by more recent iterations of the HTML5 specification. Therefore at present, some browsers support playback of one set of video and audio files whilst others support the other set. For example, Safari only allows MP4/H.264/AAC media to be used with the <video> and <audio> elements whilst Firefox and Opera only support Ogg and WebM.
Why can't we all just get along! (Mars Attacks)
Thankfully, there is a way to support multiple formats within one tag. It doesn't however preclude us from needing to create multiple versions of our media. Whilst we all keep our fingers crossed this situation resolves itself in due course, in the meantime, armed with multiple versions of our file, we can markup the video as follows:
<video width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster.jpg">
<source src="video/myVideo.ogv" type="video/ogg">
<source src="video/myVideo.mp4" type="video/mp4">
What, do you mean you don't understand HTML5?
</video>If the browser supports playback of Ogg, it will use that file; if not, it will continue down to the next <source> tag.
Using the <source> tag in this manner, enables us to provide a number of fallbacks, if needed. For example, alongside providing both MP4 and Ogg versions, if we wanted to ensure a suitable fallback for Internet Explorer 8 and lower versions, we could add a Flash fallback. Further still, if the user didn't have any suitable playback technology, we could provide download links to the files themselves:
<video width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster.jpg">
<source src="video/myVideo.mp4" type="video/mp4">
<source src="video/myVideo.ogv" type="video/ogg">
<object width="640" height="480" type="application/x-shockwave-flash" data="myFlashVideo.SWF">
<param name="movie" value="myFlashVideo.swf" />
<param name="flashvars" value="controlbar=over&image=myVideoPoster.jpg&file=video/myVideo.mp4" />
<img src="myVideoPoster.jpg" width="640" height="480" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
<p> <b>Download Video:</b>
MP4 Format: <a href="myVideo.mp4">"MP4"</a>
Ogg Format: <a href="myVideo.ogv">"Ogg"</a>
</p>
</video>