HTML5 Video

Posted by
rchohan on August 30, 2011
No Comments

How easy is it to place HTML5 video on web browsers and mobile devices?

Not very, as we, at A51, have lately discovered. Our client, General Purpose Pictures, wanted to completely redesign their company’s site, and recognizing the importance of being mobile-friendly, the new site had to be developed completely in HTML. To include a video file on their home page, and acknowledging that Adobe Flash was not an option, we turned to HTML5.

The latest HTML version has been developed to be compatible with audio and video functionality, a sort of alternative to Adobe Flash, and to an extent, it has delivered. However, getting it to work across multiple browsers and across multiple devices, was definitely the biggest challenge we experienced.

Here’s a bit of a background on the project: We wanted to place an HTML5 video on General Purpose Picture’s home page, that would automatically play and loop continuously. A fairly new video functionality, it’s not quite compliant across all browsers, so we could easily get it working on one browser, but then it wouldn’t play on another. You see, Google Chrome uses a webkit engine that supports H.264 as a web video codec, whereas, Firefox is supported by .ogv files for HTML5 video.

 if($.browser.mozilla)
        {
          $('#video').append('<video poster="/img/gpp_video_poster.jpg" preload="none" autoplay="autoplay" loop="loop" tabindex="0"><source id="ogv" src="/video/intro.theora.ogv" type=\'video/ogg; codecs="theora, vorbis"\' /></video>');
        }
        else if ($.browser.msie)
        {
            var ieVersion = $.browser.version;
            if(ieVersion < 9)
            {
                $('#video').append('<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" standby="data is loading..." codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="480" height="376"><param name="src" value="intro.mov"><param name="autoplay" value="true"><param name="type" value="video/quicktime" width="294" height="166"><param name="controller" value="true"><embed src="intro.mov" width="294"  height="166"autoplay="true" controller="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></object>');
            }
        }
        else
        {
          $('#video').append('<video width="294" height="166" preload="none" autoplay="autoplay" controls="none" loop="loop" tabindex="0"><source id="mp4" src="/video/intro.mp4" type="video/mp4" type=\'video/mp4; codecs="avc1.42E01E, mp4a.40.2"\' /></video>');
        }

So, we had to convert the video file to compatible formats, using this free converter in order to have the video file play on various browsers and devices. The disparity across browsers means that each time a user lands on this page, it has to detect which browser is being used, and then replace the video tag accordingly, using jQuery.

On top of all of that, mobile devices also behave differently. For every HTML5 video tag, you can set controls that include auto-play, looping, etc., but for mobile devices, like iPads, setting controls is not an option, so the video file shows up but the user has to manually press play to watch it. And one more thing, on the server you have to make sure to add the MIME types or configure your htaccess file, otherwise the Apache server won’t deploy the video file.

AddType video/ogg .ogv
AddType audio/ogg .oga
AddType video/mp4 .mp4
AddType video/webm .webm

So, was it worth it to venture into HTML5 video? Absolutely. Although it looks simple enough, it’s a process that requires a ton of workarounds and significant testing. But in the end, the video works on all web browsers and mobile devices, and it looks great. Client happy, A51 happy.