Michael Adeyeye (Ph.D)

One of those things I like about HTML5 is being able to play a video file in a browser without specifying what plug-in to use. That’s what the <video> tag does, and it’s awesome. There are times things don’t play out like you wanted. I read a couple of blog posts on how best to make use of the tag, but they would not help that much. Here is a brief introduction to the project I am helping out with; it’s called “UCT MobiOpenCast.” It’s a prototype content aggregator for mobile devices that pulls feeds (video & text) from the #UCT hashtag in Youtube (at http://www.youtube.com/rss/tag/uct.rss) and the UCT opencast implementation (called matterhorn at http://media.uct.ac.za/engage/ui). It allows commenting on the presentations, and a user could search for a presentation from a long list.

For the last couple of weeks, we’ve been writing the app in HTML5. By the way, I used HTML5 to write my ePortfolio last year, and I liked it. For the mobile app, the <video> tag wouldn’t work the way we wanted it to work. Below is the part that plays video files.

<video id=”video_control” controls=”controls” autoplay=”autoplay”>
<source src=”<?php echo $_GET["vid"]; ?>” type=”video/mp4″ />
<source src=”<?php echo $_GET["vid"]; ?>” type=”video/x-msvideo” />
<source src=”<?php echo $instmedialist->getflashurl($_GET["vid"]); ?>” type=”application/x-shockwave-flash”/>
<embed id=”video_control”  src=”<?php echo $instmedialist->getflashurl($_GET["vid"]); ?>” />
Your browser does not support the video tag.
</video>

We’ve tested the application on various browsers, and the result is amazing. It revealed that the browser war isn’t over. Browsers (both mobile and desktop versions) will keep behaving differently. Video containers (such as AVI, OGG and MP4) wrap video files with different codecs; as a result, browsers can’t always play certain video files with using a plug-in. The containers and codecs used for the videos in this project are AVI(and FFmpeg MPEG-4 codec) and MP4(and MPEG-4 video codec). We couldn’t get any of the videos to play, most notably the MP4 files, without a plug-in. So, we got the Apple Quicktime. But none of the browsers save Safari would load quicktime over a small area of their rendering surfaces or their entire rendering surfaces.Below are the inferences we made from the work.

Firefox loads quicktime plug-in and plays the video ONLY in its entire rendering area

In conclusion, H.264 seemed to be the de-facto codec but not all browsers support it. And when a plug-in is required, some browsers just won’t load the right/required plug-in. I am not sure if it’s a problem with the <video> tag, my lines of code (which I doubt!) or the codecs used. However, if we really want to embrace the awesomeness of the <video> tag, we need to have some codecs supported by all browsers without going to fetch a plug-in. By the way, I am also looking forward to opening a PDF document in a browser without a plug-inas promised by HTML5; I know there are many works in progress on all these issues. Above all, HTML5 makes web app development for desktop and mobile devices fun.

References:

http://www.0xdeadbeef.com/weblog/2010/01/html5-video-and-h-264-what-history-tells-us-and-why-were-standing-with-the-web/

http://www.webmonkey.com/2010/02/embed_audio_and_video_in_html_5_pages/

http://html5doctor.com/the-video-element/

https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements

http://html5test.com/

http://www.w3.org/html/wiki/FAQs

http://www.w3.org/wiki/HTML/Elements/video#Formats_and_Codecs