HTML5: Audio and Video
Before HTML5, we’ve had to view multimedia content such as video and audio via a plug-in like Quicktime and Flash. This presents cross-platform compatibility issues — choose Flash and your content won’t load on iPhones and iPads, choose Quicktime and a lot of Windows users won’t see the content. Add to that that we have to use double tags to ensure loading on most browsers and it got really messy.
HTML5 eliminates the need for a plugin, giving browsers the ability to directly display audio and video, with new tags:
<audio src = "myMovie.mp3" >
<video src ="myMovie.mov">
The two code examples will embed a player in your HTML page, but leave it to the browser to decide how to implement the controls and behavior. To take control of this yourself, there are some additional parameters you can include in the tag. Say you want to display controls and have the video or audio automatically start playing, you’d want to include the following:
<video src ="mySong.mov" controls="controls" autoplay="autoplay" />
You can also use the shorter version:
<video src ="myMovie.mov" controls autoplay />
You might be thinking: Hooray for native audio and video elements, my troubles are over!
Well, don’t run off to happy hour yet, there is a wrinkle. The most popular audio and video formats are proprietary, so browsers have to pay to include support for them. This is fine for browsers that are developed by big companies, like Safari, but not so good for open source browsers like Firefox. Firefox instead supports the non-patent restricted formats from xiph.org. These files have the extension .ogg (Ogg Vorbis) for audio and .ogv (Theora Ogg) for video.
Converting to Ogg Formats
Here’s some good info on Wikipedia about encoding Theora Ogg video files.
There are a number of free utilities out there for converting .mp3 to .ogg, however, I tried a few that didn’t work. What did work was Audacity, which is a nifty little sound editing tool.
The easiest converter I’ve found for .ogv files is Firefogg which is a Firefox add-on.
So, to support all the browsers that support the audio and video tags, you have to include multiple formats:
<video controls="controls"> <source src="myMovie.ogv" type="video/ogg" /> <source src="myMovie.mov" type="audio/mp4" /> </video>
Ok, not so bad. I have to make two versions of the same file, that’s a drag, but doable.
But wait, we’ve forgotten about our old friend Internet Explorer. IE8 doesn’t support the audio/video tags (but IE9 promises to). So, we still need to fall back on the old object tag to embed a Quicktime or Flash player. Since IE is a Windows only browser, and Flash has much greater adoption on Windows, it makes sense to use Flash.
Wait, does that mean I have to make another media file for Flash?
Fortunately, it does not. Flash now supports Quicktime files if they are encoded properly.
If you are familiar with Flash, you can create a dyanmic FLV movie player for yourself. If not, you can use Abobe’s Flash Media Player
Adding the Flash player code will look something like this:
<video controls="controls"> <source src="myMovie.ogv" type="video/ogg" /> <source src="myMovie.mov" type="video/mp4" /> <object type="application/x-shockwave-flash" width="360" height="240" data="mySwf.swf"> <param name="movie" value="mySwf.swf"> <a href="mySwf.swf">Download the movie</a> </object> </video>
* I first had trouble with the Firefox version of this because my server needed a MIME type added, I’m hoping this isn’t the case with the A server.
Whew, that was complicated.
There are potentially simpler solutions if you want to:
- Use a third party all-in-one solution for embedding your content
- Host your content on a third party site like YouTube and Vimeo
Homework- Revised versions of your designs are they good? make 'em better! are they great? make 'em the greatest!