1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
In the previous two HTML 5 tutorials we looked at some structural tags to help eliminate "div-soup," and some other semantic tags to help give your pages easy-to-parse dates, captioned images and more.
Now it's time to take a look at what might be the most hyped part of the HTML 5 spec -- the audio and video tags.
Currently the only reliable way to embed video on a webpage so that all users, regardless of browser or OS, can see them, is the Flash plugin and a combination of the <code><object></code>and <code><embed></code> tags.
The idea behind the new <code><video></code> tag is to provide a way to embed (and interact with) video without needing a proprietary plugin like Flash.
Unfortunately video isn't that simple. Not only does the browser need to understand the <code><video></code> tag, it also needs to have the codec necessary to play the video. The obvious solution would be for the HTML 5 spec to name a video codec that every browser could then implement.
And that's where the fur started flying. The debate over various codecs is rather complex (our sister site, Ars Technica, has a nice [http://arstechnica.com/open-source/news/2009/07/decoding-the-html-5-video-codec-debate.ars in-depth look at the debate]), but the short story is that browser makers couldn't agree on a video codec. Apple doesn't like the proposed Ogg Theora codec and Opera and Mozilla don't want to pay to license the H.264 codec. Google is implimenting both and Microsoft stayed largely out of the fray since it currently has no plans to implement the HTML 5 video element at all.
Faced with a standoff among the browser makers, HTML 5's benevolent dictator, Ian Hickson, effectively threw up his hands and said screw it -- there's no video codec named in the HTML 5 spec.
Does that mean the video tag is useless? No, it just means that widespread adoption of a video codec is still a ways off.
In the mean time, let's take a look at how you would use the video tag, and how you can use it today with some fallback code for the browsers that can't handle it.
===TK===
Lest you think that what we're about to wade through is ultimately an exercise in futility if there is no agreed upon standard, consider this -- Google is chomping at the bit to use the video tag for YouTube. In fact there's already [http://www.youtube.com/html5 a mockup of what YouTube would look like in HTML 5]. While the company hasn't announced a timeline to convert YouTube to use the HTML 5 <code><video></code> tag, you can bet that when they do the rest of the web will follow suit.
So how does video work? Well, are you ready? Here's the code to embed a video in HTML 5:
<pre>
<code>
<video src="/myvideo.mp4"></video>
</code>
</pre>
Pretty simple right? Well, ideally you would do something more like this (which is what the aforementioned YouTube demo does):
<pre>
<code>
<video width="640" height="360" src="/demo/google_main.mp4?2" autobuffer>
<div class="fallback">
<p>You must have an HTML5 capable browser.</p>
</div>
</video>
</code>
</pre>
There are also a number of useful attributes for the <code><video></code> tag, including autoplay controls, a "poster" attribute that points to an image file to display before the video is loaded, and a boolean attribute for play/pause controls. The full list of video tag attributes can be found on the [http://www.w3schools.com/tags/html5_video.asp W3C schools site].
The <code><video></code> tag also has a whole host of events you can hook into with JavaScript, allowing you to play movies inside movies and set up complex user interactions via mouse and keyboard events. Here's an example that uses the video tag in conjunction with the Canvas tag and Web Workers (we'll cover those in the future) to [http://htmlfive.appspot.com/static/tracker1.html create a motion tracking system] for web video.
Okay, that's all well and good but since not every browser can play MP4 videos and very few of them understand the video tag, what can you do today? Well, the unfortunate answer is that you'll need multiple videos. Hardly ideal, but if you want to push the HTML boundaries, you can embed your video using the <code><video></code> tag for browsers that support HTML 5 and fallback on Flash for those that don't.
Something like this would do the trick:
<pre>
<code>
<video src="video.mp4" controls>
<object data="player.swf" type="application/x-shockwave-flash">
<param value="player.swf" name="movie"/>
...etc...
</object>
</video>
</code>
</pre>
Obviously all we've really done is wrap the same old <code><object></code> and <code><embed></code> tags with the new <code><video></code> tag -- hardly a great leap for the web.
How about we get rid of the fallback code, keep our HTML limited to the video tag and use a little JavaScript to handle the Flash embedding behind the scenes?
Drupal developer Henrik Sjökvist has an [http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback example of how to do that using the following HTML 5 code]:
<pre>
<code>
<video controls>
<source src="video.m4v" type="video/mp4" /> <!-- MPEG4 for Safari -->
<source src="video.ogg" type="video/ogg" /> <!-- Ogg Theora for Firefox 3.1b2 -->
</video>
</code>
</pre>
Sjökvist's Flash solution requires a little JavaScript to sniff out the browsers capabilities and then offer Flash if the browser can't understand HTML 5 (note that the code uses the [http://code.google.com/p/swfobject/ swfobject library] to handle the actual embed). We prefer this method since it keeps the actual HTML code cleaner and when video tag support is ubiquitous, all you need to do is drop the JavaScript, no rewriting your actual pages.
Another possible solution would be to simply load the MP4 movie into a Flash container file. As of Flash Player 10, Flash supports dynamically loaded MP4 files, so all you would need is to use Sjökvist's JavaScript detection code, but rather than feeding your player swf a separate .flv video file, you could just load the same mp4 file.
If you need a refresher course on how to dynamically load videos into a Flash file, check out [http://stackoverflow.com/questions/840213/how-do-i-load-a-mov-file-into-flash-9 this Stack Overflow page] which has a quick overview and some basic sample code.
Using that scenario you've got a solution where every visitor can see your video and you only need to offer two actual files: OGG for Firefox and MP4 for everyone else.
===Audio===
The audio tag is more or less a duplicate of the video tag. The same codec limitations apply -- Mozilla only supports ogg files, while Safari can handle pretty much anything Quicktime can.
The code looks very similar to <code><video></code>:
<pre>
<code>
<audio src="/music/myaudio.ogg" autoplay>
Sorry, your browser does not support the <code>audio</code> element.
</audio>
</code>
</pre>
And as with the <code><video></code> tag, the same Flash-based workarounds would give you near universal support for today's crop of browsers.
=== Conclusion ===
As you can see the audio and video landscape in HTML 5 has some issues -- namely the inability for browser makers to come to any sort of codec consensus. But bear in mind that the good old <code><img></code> tag also lacks a specific format and we've managed to make that work over time.
Ideally all the browsers would support both Ogg and H.264, giving developers even more options.
There's also the possibility that Google will open source the codecs it is trying to acquire from On2. On2's VP3 codec is the basis for Ogg Theora and if Google open source VP6, VP7 or VP8 there's another possible solution for open source video on the web.
|
