HTML5 Video, the Nitty Gritty

Posted by on Sep 18, 2013 in Uncategorized | Comments Off on HTML5 Video, the Nitty Gritty

Update
Recently rechecked this subject and the current versions of IE, Firefox, Chrome, Safari and Opera all seem to be able to display mp4 files. I also tested with Safari and Firefox on the mac and Safari on the iPad. The only code required is:

<video id=”video” width=”429″ height=”241″ autoplay>
<source src=”video.mp4″ type=”video/mp4″>
Your browser does not support the video tag.
</video>
End of Update

I had a client earlier this week that wanted to replace a flash video with an HTML5 video so it could be played on an iPad. Great idea I thought and what I had experienced before made me think how easy this job would be. Here is what I found so that you don’t fall into the same traps I did. I was able to give him an acceptable solution, the only issue is that the video doesn’t autoplay on the iPad thanks to Apple deciding that videos on the iPad shouldn’t autoplay due to bandwidth limitations. Oh well.

First thing I did was to replace the flash video with the following:

<video id=”video” width=”429″ height=”241″ autoplay>
<source src=”video.mp4″ type=”video/mp4″>
<source src=”video.ogv” type=”video/ogg”>
<source src=”video.webm” type=”video/webm”>
Your browser does not support the video tag.
</video>

When the iPad didn’t start, I tried adding the following jQuery to the page header.

<script src=”http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script type=”text/JavaScript”>
$(document).ready(function() {
$(‘#video’)[0].play();
});
</script>

Still didn’t start. First point you should come away with is the $(‘#video’)[0].play();. For some reason, you have to start the source, not the video.

Then I changed the video tag and added the controls parameter as this is where I found out about the autoplay restriction:
<video id=”video” width=”429″ height=”241″ controls autoplay>

Now I had controls but the video still wouldn’t start. Further research led me to another iPad restriction, only one source was supported,multiple sources would not allow teh video to start. I changed the video declaration to:

<video width=”429″ height=”241″ autoplay>
<source src=”video.mp4″ type=”video/mp4″>
Your browser does not support the video tag.
</video>

 

$(document).ready(function() {
var tag = $(‘#video’).html();
tag = tag.substr(1, tag.indexOf(‘>’)) +
‘\n<source src=”video.webm” type=”video/webm”>\n’ +
‘<source src=”video.ogv” type=”video/ogg”>’ +
tag.substr(tag.indexOf(‘>’)+1);
$(‘#video’).html(tag);
});

Testing again and all worked except for IE 9. Arrrggghhh!!!

Note, that I had specified the webm source before the ogg source. For some reason, the ogg video was pixelating and jumpy. By specifying the webm version first, Opera would use that one while Firefox on the Mac would use the ogg. Best that could be done.

So, I had IE 9 working without backup sources, I wondered if it did not support backup sources. I changed the javascript to:

$(document).ready(function() {
var ua = navigator.userAgent;
var browser = ”;
var version = ”;
if (ua.indexOf(‘MSIE’) != -1) {
browser = “MSIE”;
version = ua.substring(ua.indexOf(‘MSIE’) + 5);
version = version.substring(0, version.indexOf(‘;’));
}
if (browser != “MSIE” || version != ‘9.0’) {
var tag = $(‘#video’).html();
tag = tag.substr(1, tag.indexOf(‘>’)) +
‘\n<source src=”video.webm” type=”video/webm”>\n’ +
‘<source src=”video.ogv” type=”video/ogg”>’ +
tag.substr(tag.indexOf(‘>’)+1);
$(‘#video’).html(tag);
}
});
Huzzah, it all worked. A word of note. If you notice the browser detection I used, I used the javascript userAgent object,, not the jQuery browser object. They removed the browser object in version 1.9. The developers said that it was better to use browser capabilities to determine special actions but I think this is an example where that doesn’t work. The capabilities in ters of HTML5 video are the same for both versions of IE but there is a significant difference.

I hope this post will save someone some time and effort in the future.

Comments are closed.