Will Head
Spend any time on video-related websites and it won’t be long before you see mention of HTML5 – specifically its native support of video playback – popping up. Before you get too excited, however, there are a couple of things you need to know about the forthcoming iteration of the web standard.
As we looked at last issue (see MacUser, 8 October, p56), the most important thing to note is that nothing has been decided for sure, and it’s all subject to change. It’s a slow process implementing a new web standard and there’s no firm timetable as to when it will be finished.
However, that hasn’t stopped some browser designers jumping the gun and implementing aspects of HTML5 in their browsers already. There’s no guarantee that these experimental features will make the final cut, but you can at least try out the features to see how they work.
If you’ve ever tried to get video to play in a web page, you’ll have quickly realised that HTML wasn’t really designed with it in mind. Most video you’ll see online uses Adobe Flash to actually play back the video file. Flash is available for most desktop machines, but support drops drastically on mobile devices.
The video element in HTML5 aims to rectify this, in theory making embedding videos as painless as including images. However, it’s a bit more complicated than that in practice. Video files can be created in different formats and codecs, and not all devices can play back the various options available. There’s also the issue of patent licensing to consider. Companies that create efficient video codecs tend not to give them away for free. Instead, they expect royalties from applications that can decode their formats, which would be the actual web browser in the case of HTML5 video.
The biggest stumbling block in the current implementation of HTML5 seems to be deciding which video formats to support. Apple is backing the H.264 format, which offers excellent quality and low files sizes, but requires a licence fee. Firefox, meanwhile, is only supporting the open-source Theora Ogg, which isn’t quite as efficient, but doesn’t require any royalties to be paid. Google is supporting both in Chrome, but putting its weight behind H.264 for its HTML5 version of YouTube. Internet Explorer 8 supports neither, but the beta of version 9 can playback H.264 videos.
Since there’s no one format supported by all of the major browsers, the World Wide Web Consortium (W3C), the organisation that’s in charge of looking after web standards, has decided to leave it up to the industry to sort out. This means that there’s no single best format to encode video for HTML5.
However, it’s not all doom and gloom. The <video> element enables you to specify more than one video format, and the browser will play the first one it finds that’s compatible. So, in theory, if you provide both H.264 and Theora Ogg formats, you’ll be covering the vast majority of the market.
If you want to start publishing your own videos using the new HTML5 features, the first step is to create a suitable video file. Creating H.264 files shouldn’t be a problem if you’re using Final Cut or Premiere Pro – both have the necessary encoders built in. Support for creating the Theora Ogg format is more difficult to come by, but the free Miro Video Converter (available from mirovideoconverter.com) provides an easy way to transcode files.
With your files created, you’re ready to get your hands dirty with HTML code. To put a video on your web page, you need to use the new <video> element, and if you want to specify multiple versions to cover different browsers, you’ll need the <source> element.
The <video> element lets you specify the following attributes:autoplay If present, the video will play as soon as it’s loaded
controls If present, the video controls such as play and pause will be shown
height The height of the video
loop If present, the video will play on a loop
poster The url of an image file that represents the video content
preload If present, the video file will be loaded at the same time as the page so it’s ready to run
src The url of the video file to play
width The width of the video
As a result, to show a simple video, you could use the following:
<video src=”movie.mp4″ width=640 height=360>
Sorry, your browser does not support the video tag
</video>
Any text before the closing </video> tag will be displayed by browsers that can’t play back the video. You could use an Adobe Flash file as a fallback here to support legacy browsers.
So far, we’ve only specified a single source file for the video. If we want to include more than one, however, we need to add the <source> element as well, which has the following attributes:
media The intended playback media, such as handheld. Default, if it’s omitted, is all
src The url of the video file to play
type Description of the video codec. For example, for Theora Ogg use: ‘video/ogg; codecs=”theora, vorbis”‘
For a list of valid values for type, check out this page from the W3C: whatwg.org/specs/web-apps/current-work/multipage/video.html#the-source-element.
Putting it all together, the following example would let you include two videos with different formats:
<video width=640 height=360>
<source src=’video.ogv’ type=’video/ogg; codecs=”theora, vorbis”‘>
<source src=’video.mp4′ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>
Sorry, your browser does not support the video tag
</video>
This is, admittedly, slightly more complex than the humble image tag, but as long as you follow the rules, you shouldn’t run into any problems.
If this all still seems like a little too much work, then there’s an easier option – let someone else do the hard work for you. Google, for example.
The search giant has been quietly enabling HTML5 support on YouTube behind the scenes for some time now. While it’s only supporting H.264 format for now, the very fact that it has chosen that format for YouTube could be a deciding factor in which formats are supported by browsers when the standard is finally released.
The best bit about it, however, is that using YouTube’s HTML5 embed code is even simpler than its current Flash implementation. Furthermore, it degrades gracefully, showing the Flash version if the browser doesn’t support HTML5.
To use the HTML5 version, when you click the Embed button, tick the box labelled: Use iframe embed code (beta)
You’ll then see some embed code that looks similar to this:
<iframe class=”youtube-player” type=”text/html” width=”640″ height=”385″ src=”http://www.youtube.com/embed/_kRsOZMBE7k” frameborder=”0″></iframe>
If you don’t see the option to use the iframe embed, visit youtube.com/html5 and click on the link that says Join the HTML5 Beta.
The YouTube HTML5 embed code is still in beta, which means it could change or break at any time. Nevertheless, you can at least try it out and see how it works with various sites. One advantage of the new embed is that videos can be played directly on the iPhone rather than having to jump into the separate YouTube application every time.
The final spec for HTML5 is still some way off, and it could take even longer for the video format issues to be resolved, but it’s definitely a promising development in the world of online video.
Anything that makes viewing videos easier for the consumer is a good thing, even if it does make producing online video slightly more complicated in the interim.