Sunday, September 11, 2011

5 Things You Need To Know To Start Using <video> and <audio> Today

Let's wind things back a little bit:
Nigel Parker, "Web and Mobile Dev Guy" from Microsoft NZ, has made an excellent presentation, in which he gives run-down regarding how to implement and use HTML5's <audio>- and <video>-tags.
The original presentation can be found here: http://channel9.msdn.com/events/mix/mix11/htm12

But you can see his presentation in all it's full glory here:

What I find interesting in his presentation, is the part regarding using the <video>-tag and declaring codecs, in particular (approx. from the 5:50-mark and forward).

In other words, although the following code-example should be more than adequate to play a video with HTML5:

<video controls preload="metadata" style="height:240px;width:415px;">
<source src="http://ia600608.us.archive.org/24/items/BigBuckBunny_310/big_buck_bunny_640_512kb.mp4" />
<source src="http://mirrorblender.top-ix.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_stereo.ogg" />
</video>

...it's apparently better (according to Mr. Parker) to include and declare, which codecs are to be used to play the video, as it speeds things up!

So in that case, one's standard "run-to-the-mill" code should look like the following code-exaample instead:
<video controls preload="metadata" style="height:240px;width:415px;">
<source src="http://ia600608.us.archive.org/24/items/BigBuckBunny_310/big_buck_bunny_640_512kb.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' />
<source src="http://ia600608.us.archive.org/24/items/BigBuckBunny_310/big_buck_bunny_640.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>

Which should render this, BTW:

Please note it's my experience that if one isn't sure about, which codec has been used for a given video, you can (still) omit the codec-declarations (as showed/done in the first code-example above) and things will still work, nevertheless!

Thanks for reading this...
d.

No comments:

Post a Comment