Technology at Geneseo Community School District 228
In HTML 5 you can now simply embed a video by using the <Video> Tag in Html. This is an efficient and quick way to accomplish a simple task and it works. Using the HTML 5 tag method you can also embed a video so that it plays natively on Android devices, iOS devices, Mac, Linux, PC’s you name it without the need for any plugin whatsoever. Yes no quicktime needed, no Flash, Shockwave, just a updated web browser using IE 9, Firefox, Safari or Chrome. Here is an example I placed on an elementary teachers website(Mrs. Craig SW), notice the video can be played quickly by any device (new device) – no additional software needed.
screenshot of embedded video playing using HTML 5 Video tag
There is one major wrench in this clean and easy solution, that is the battle of video Codecs. In a nutshell h264 used in many MP4 (m4v) videos is currently the best but it is not open source and its free use for consumers expires in 2015. Further if a web service like Wikipedia wanted to use h264 to encode all of its vidoes it would costs millions per year in royalites. This is not what the HTML standard comittee wnats to ratify as a solution – to fully support a third party commercial copyrighted codec that extends to 2038. Microsoft and Apple who both already co-hold these patents say yes and actively support h264 and built graphic chips into their devices (iPad, iPhone, Zune, iPod touch, etc) to decode h264 natively. This works great for large companies but imagine smaller startups having to pay millions in fees just to embed video in their commercial sites, not really a method for encouraging innovation and giving new start up companies a chance to compete.
Okay so lets take a look at Firefox. The second most popular browser in the world has decided to not support h264 natively since it copyrighted. Instead they natively support the ogg theora codec. This codec works and is open source and can be freely used by individuals and businesses alike. So take the case of Wikipedia – a great service – to avoid this copyright dilemna like Firefox Wikipedia encoded all its videos in OGG Theora (http://commons.wikimedia.org/wiki/Main_Page – Yes Wikipedia does have videos click on the link and choose videos). The problem with Theora is it not quite as advanced as h264(mp4 and m4v) and files are a little larger when compressed. Despite these limitations most end users would have no idea if a video was encoded with h264 or theora, both would play which is what the consumer wants.
Okay so the codec confusion gets more confusing, enter Google. Google a company who could easily afford the fees to use h264 and who has already re-encoded all of youtube to use h264 (notice how youtube just works on iOS devices – this started happening when they converted to h264) has come out on the side of the Open Source community and has embraced a video codec called WebM (Vorbis VP8). Okay so in a nutshell VP8 was a codec that early on had its roots in Theora but was developed by a private company to rival the efficieny of h264. Google purchased this company and has now freed the code and removed all copyrights- they also renamed this code WebM. This video codec is better than Theora OGG but not quite as good as h264 but again it has Google’s backing and is free of all copyrights. Google has now reencoded all of its videos in youtube again in webm so they are available in h265 and webm, many people think at some point Google will drop h264 support on youtube I am 50/50 on whether this happens in the next 2 years. Learn more quickly about WebM http://www.webmproject.org/about/faq/
So what does this mean for web developers. It means that in its current state to be able to use the video tag you must encode the video three times. Once in h264, once in OGG and yes once in WebM. Then using the Video tag you can indicate each file type and new browsers will automatically choose the video that they can play natively. This is unfortunate because I do not see this Codec war ending anytime soon, companies are competing fiercely to control data and content on the web (look at cloud services, etc) and I think in the short run this war just goes on. In fact I predict that within a year Microsoft and Apple team up and try to sue both Theora and WebM in an attempt to get their codec ratified as the only supported HTML 5 codec.
Here is an example of the HTML code using referencing all three codecs.
Notice I set the video width and height just like any HTML based image.
Notice by adding controls=”controls” you get a nice little control player embedded on the player.
Also notice after using the source src you must indicate each video type , for example type=”video/ogg”. Before ending the Video tag its a good idea to place a message that says your browser does not support the HTML 5 tag, what happens is when you load the page your browser will play/load the video it can play, if it cannot play any of these you will see the message (means you need to update your browser – all new version of Safari, IE, Firefox, Chrome support HTML 5 to a large degree)
<VIDEO width =”480″ height=”351″ controls=”controls”>
<source src=”http://www.gcsdblogs.org/Craig/wp-content/uploads/2011/10/What-is-weathering2.ogg” type=”video/ogg” />
<source src=”http://www.gcsdblogs.org/Craig/wp-content/uploads/2011/10/What-is-weathering2.mp4″ type=”video/mp4″ />
<source src=”http://www.gcsdblogs.org/Craig/wp-content/uploads/2011/10/What-is-weathering2.webm” type=”video/webm” />
Your Browser does not Support the Video Tag (Upgrade).
Okay so if you are on a Mac and need to convert all the videos to all three formats easiest way is to use the free Miro Video converter. (or use FFmpeg).
In a nutshell how it stands now that no single browser supports all three codecs, Firefox supports OGG and is thining about supporting webm as well, Chrome supports WebM, and Safari and IE support h264 - so for now you must convert to three formats to have all devices covered. Since WebM is really a close but more efficient cousing of OGG I think it will only be a matter of time before WebM and h264 are the last two standing – here I think we may see stalemate for years. Question is will this standoff prevent the HTML 5 standard from ever being ratified? Who knows but at least you can already tap into the Video tag freatures, iFrame and more even with the standard not 100% finished.