Cardona Designs | Setting Standards

CAT | Video

Apr/10

1

The HTML5 <video> goldrush is on

Comments off · Posted by admin in Google, HTML5, iPad, Mobile, Video, Web Applications

Now that the ipad is launching this weekend without flash video support many of the web’s top video sites are launching an HTML5 stream to make sure their sites work on this new device. This includes youtube, brightcove, NBC, ABC, TED, and many more. This is the coming of age of HTML5 and the beginning of web developers worldwide taking the plunge into the wonderful new world of multi-media that is native to the markup. This is pretty much a starting signal for web developers around the world to start using <video> instead of flash. Never again should your video not work on an iPhone or iPod! Never again will you struggle with complicated hacks to get your video to play. Now you simply add <video src=”" controls></video> and your problems are solved. Right? Hold one second. Last time I checked HTML5 wasn’t even a W3C Recommendation. Which means that there are some parts of it that are not totally complete yet. Which parts you might be asking yourself? Why, <video> of course. Yep, thats right. Even though all of these companies are launching “HTML5″ <video> streams in time for the iPad, the <video> element in HTML5 isn’t even finished. The problem comes with video encoding and licensing. Let’s start at the beginning shall we? Right now there are 2 main ways that people encode their video online. One is Ogg Theora and the other is h.264. Theora is owned by some open source types. They encourage anyone to license and use their algorithm, totally free of charge. h.264 is owned by some big scary lawyer types. They say that to use their encoding algorithm they want to get paid. How much? It varies, but it ain’t cheap. Now that money doesn’t come out of my nor your pocket. No, its companies like Google and Apple that have web browsers or big video sites that pay that licensing fee. They argue that h.264 is the most efficient algorithm to encode with and worth the price if it allows them to remain kings of the cloud. Chris DeBona of Google even said “If [youtube] were to switch to theora and maintain even a semblance of the current youtube quality it would take up most available bandwidth across the Internet.” On the other side of the web is Firefox which is based around an open source ideology. They don’t have any trouble paying the fat licensing fee but they argue that any future startup might not be able to raise that kind of money just to use the h.264 licensing fee thus preventing them from entering the web ecosphere. On that principle alone Firefox has decided to not support h.264 and has went with .ogg instead. There are debates about which encoding algorithm is better. But it appears if those debates are about to be silenced. And that is really what this post is all about. Once upon a time .ogg was the codec that was actually mentioned in the official HTML5 specification. Then on one fateful day it was dropped from the spec all together. At the current moment there is no codec that is mentioned in the specification. It is a figurative black hole at the center of all HTML5 <video>. And it is now being filled with what is becoming the defacto codec—h.264. Last year Google acquired video compression company On2 for around 100 million dollars. Since then many of us have feebly hoped that they would appropriately license their new video codec and then use their overwhelming strength on the WHATWG(Web Hypertext Application Technology Working Group) to make this the new codec in the HTML5 spec. But alas, our hopes and dreams have gone unanswered. So now we have the iPad and “HTML5 <video>” – and the fat licensing fee. :(

No tags

Jan/10

3

HTML5 <video>

Comments off · Posted by admin in HTML5, Mobile, Video

2010 is finally here and HTML5 is in last call! I have decided that I will be doing a set of tutorials on HTML5 and some of it’s great new features. And to start out the New Year I thought I would show everyone how to put those great New Years Eve videos online in HTML5 with the new <video> element!

First things first, the HTML5 doctype. Many of you may be familiar with HTML4 and XHTML1′s doctypes. Respectively they are:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> & <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Now if you are like me then you have likely never typed that. Traditionally this was the one part of my markup that I would copy and paste. Usually I am a stickler about machine generated code, but with HTML 4 Transitional, HTML4 Strict, XHTML1 Transitional, & XHTML1 Strict, there were too many characters for my feeble mind to remember. So I would copy and paste the doctype and be done with it. But HTML5, oh sweet sweet HTML5 has done away with all that madness. Now we have the serene <!doctype html>. So clean and fresh, like a snowy field. This doctype causes all browsers to render in standards mode! Which is reason enough for you to start using it today. It is also case insensitive, so it can be <!DOCTYPE HTML>. <!doctype HTML>, or even <!dOcTyPe HtMl> if you’re feeling crazy.

Now that we have that out of the way let’s get on with the fun stuff—HTML5 video!

Traditionally if you have wanted video on your website you needed to use some type of extension— most likely flash. This is an issue because flash isn’t native to the webpage. That meant that people needed to download an extension to make your video work. Yes it’s a given that most people have flash installed. But perhaps not everyone does. Also, many mobile devices (including the 1000 pound gorilla in the room—iPhone) don’t support flash. So all of those great videos on your site are broken when you look at them on your shiny iPhone.

HTML5 fixes that issue by introducing the <video> element. Similar to the <img> tag, the <video> tag allows you to simply point to a source file and embed video natively in your markup in a couple of lines of code. And whats even better?! Mobile devices such as the iPhone/iPod touch, android devices, palm webOS devices, and even macs/pcs can watch your video. There is no better choice!

So how do we accomplish this miracle of modern technology? Hold on to your socks….

<video src=”new-years-eve.mv4″> </video>

There it is. Don’t worry, I’ll wait while you triple take…..

Yeah, it’s that easy…..with a couple caveats of course. :) After all, this is the web.

So how do the browsers feel about the above markup. As always that depends on which browser you are talking about. IE as always says “Bah Humbug”—so don’t even try. Chrome, Safari, & Firefox are a different story however. And this is where it gets a bit (but not much) tricky.

One of the things that is holding HTML5 up from completion is the addition of an audio and video codec from the specification.  There are a couple of choices, but there isn’t consensus. And here is why. Firefox, the bastion of open source doesn’t want to pay the outrageous royalties involved to use the h.264 codec for video and the mp3 codec for audio. They would much rather implement the “open” Ogg theora and vorbis formats for video and audio. There is some debate about whether these codecs are up to snuff for such large scale deployment by people such as Google open source program manager Chris DiBona who recently said “If [YouTube] were to switch to Theora and maintain even a semblance of the current YouTube quality it would take up most available bandwidth across the Internet.” – Ouch

So Google and Apple decided to take the route of supporting h.264 for video and mp3 for audio. My understanding is that they reason that they have already paid those royalty payments and they don’t want to expose themselves to any potential litigation from the ogg people. Sound reasoning I suppose.

But this has left the poor <video> & <audio> tag from fulfilling their grand destiny of native video/audio for all! If you encoded your video in ogg then people who access it from a webkit browser (chrome, safari, mobile safari, mobile android, and palm OS’s browser are all based on the webkit rendering engine) won’t be able to see it. But if you encode the video in H.264 then your open source brethren at Firefox won’t be able to enjoy. What to do…..

Fortunately we have the <source> element! Huh? “There is a src attribute and a <source> element?” you are asking right now. Yep, for <audio> and <video> there is a <source> element that can descend so that you can call more than one source.  Example of our updated markup:

<video controls=”"> <source src=”new-years-eve.m4v” type=‘video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘> <source src=”new-years-eve.ogv” type=‘video/ogg; codecs=”theora, vorbis”‘> </video>

A couple of things that you might have noticed that I added without telling you. The controls attribute. This is a nice little attribute that allows for a set of browser built in controls for your video or audio. This makes it very simple to add a nice play, pause, and start button. It is a boolean (true or false) value. By default it is not even present, which represents false. So if you leave it out altogether you won’t have any controls. It’s presence represents true. So you don’t need to put controls=”true”— the correct way to write it is controls=”".

Next you will see that there is our new friend the <source> element. I added two types of video here. H.264 for webkit browsers and ogg for firefox. Regarding the type attribute, from Mark Pilgrim’s great work Dive into HTML5 “

“The type attribute looks complicated — hell, it is complicated. It’s a combination of three pieces of information: the container format, the video codec, and the audio codec. For the .ogv video file, the container format is Ogg, represented here as video/ogg. (Technically speaking, that’s the MIME type for Ogg video files.) The video codec is Theora, and the audio codec is Vorbis. That’s simple enough, except the format of the attribute value is a little screwy. The value itself has to include quotation marks, which means you’ll need to use a different kind of quotation mark to surround the entire value. 

  <source src="NewOrleans2006.ogv" type='video/ogg; codecs="theora, vorbis"'>
The H.264 video is even more complicated. … We encoded with the H.264 “baseline” profile and the AAC “low-complexity” profile, then wrapped it all in an MPEG-4 container. All of that information is included in the type attribute. 
  <source src="NewOrleans2006.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
The benefit of going to all this trouble is that the browser will check the type attribute first to see if it can play a particular video file. If it decides it can’t play a particular video, it won’t download the file. Not even part of the file. You’ll save on bandwidth, and your visitors will see the video they came for, faster.”

Thanks Mark :)

Now that everything is cleared up. You might also want to add a height and width to you <video> tag. So the final thing looks like.

<!doctype html> <html> <head> <title>HTML5 Video :) </title> </head> <body> <video controls=”" width=”400″ height=”400″> <source src=”new-years-eve.m4v” type=‘video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘> <source src=”new-years-eve.ogv” type=‘video/ogg; codecs=”theora, vorbis”‘> </video> </body> </html>

And that’s it! If you check out your page in the most recent versions of firefox, safari, or chrome you will see beautiful HTML5 video!

Go to my website and check out this example of HTML5 video.

There is much more to know about HTML5 <video> and this is only a tiny primer. For a much much more exhaustive look at HTML5 <video> check out the video section in Mark Pilgrim’s amazing work Dive into HTML5 (yes I realize how many time’s I’ve linked to that in this article. It is really that good of an online book).

Or you can always check out what the HTML5 specification has to say about video.

As always I appreciate any feedback (please correct me if you see errors or omissions). Thanks for reading and stay tuned for more in this series of HTML5 tutorials.

No tags

Find it!

Theme Design by devolux.nh2.me
To top