And when I say getting my head around the HTML5 video tag, I understand the semantics of the tag perfectly well.  In a perfect world, it’s a perfectly exciting and excellent element of the new HTML5 standard.

But it’s use in browsers modern or otherwise is utterly bewildering.

Over the weekend i’ve been doing some experiments with the HTML5 and the browsers that I use.  Firefox, Chrome, Internet Explorer and Mac.  I don’t use a Mac so therefore don’t use the other Webkit browser, Safari.

Anyway, wrote a little page with the HTML5 video element and uploaded my video to the server.  Nothing!  No browser seemed to work with the file that I uploaded. So of course i checked everything, file path, file format,  incorrect characters here and there, all good.

I was particular confused as to why  nothing would appear in Chrome. Apparently some time ago, Chrome dropped support for the mp4 standard. Don’t ask me why I don’t know. So it would not have worked in that browser anyway.   A quick google search and I found this workaround.

http://api.html5media.info/1.1.5/html5media.min.js

This is an external JavaScript designed to make HTML5 videos as easy as they were meant to be. Voilà.  I have video online.

But of course I want to get a handle on this myself so I know in the future which formats work in which browser until such a day as the browsers standardise the formats.

Before I do that… get this…. all the videos seemed to work today (Monday the 18th) when I took out the video tag!  I’m not sure if I’m happy or staggered with this as once again everything I thought I knew about the tag and the compatibilities of the tag is out the window!

Anyway, here I go again, with the workaround taken out!   There are 3 file formats I’ve referenced in my code.  mp4.  .ogv and webm files.

mp4.   Does not work in any of the major browsers.  With the workaround you get the audio of the Video in Opera and Firefox but nothing else!

.ogv. Works in Opera, Chrome and Firefox without the workaround.  No joy in Internet Explorer.

.webm Works in Chrome, Opera but not Firefox and Internet Explorer!

The workaround is still needed I think, because there’s still such a state of confusion about which formats work with which browser but my results are right there!  Mp4 seems to be almost completely unsupported unless you switch the workaround on.  It’ll be interesting to see what is done about this when the recommendation for HTML5 is completely ratified, by w3c and the like.

For now, though when I add video to a website using HTML5 I will use code akin to this,

<video controls loop autoplay>
<source src=”videos/video1.mp4″ type=”video/mp4″> <!–Not Chrome,  but widely unsupported–>
<source src=”videos/video1.ogv” type=”video/ogg”> <!–YES!! use .ogv–>
<source src=”videos/video1.webm” type=”video/webm”>     <!– YES!!–>
Your browser does not support the <code>video</code> element.
</video>

Getting my head round the HTML5 Video Tag

Advertisements