CODEWITHSUNDEEP
htmlvideocross-browserhtml5-video
Evgenij Reznik
Evgenij Reznik

Reputation: 18594

Availability of Video-Tag

I used HTML's own video tag instead of the "old" flash way to display a video on my own site:

<video src="video.mp4" preload="auto" autobuffer controls autoplay>
<iframe src="http://player.vimeo.com/video/123456" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</video>

I tested it on my own computer with 3 different browsers: Chrome (30), Firefox (24) and IE (10). It worked as expected.
Then I asked another user to test my site on different machines with different browsers. Unfortunately it didn't work on all machines, even though he used the same browser versions like me.
Firefox displayed him the following error: Video format or MIME type is not supported.

Thank you!

Upvotes: 1

Views: 2702

Answers (1)

ndm
ndm

Reputation: 60463

Firefox has no native MP4/H.264 support, it uses the codec available on the system for this, and in case there is no proper H.264 codec, the video won't play, and you'll receive that error message.

See also http://en.wikipedia.org/wiki/HTML5_video#Supported_video_formats

The fallback content is only used in case the browser doesn't understand the video element at all, unsupported codecs won't cause the fallback to be used.

In order to make sure the video plays in all major browsers, irrespective of the OS, you have to supply the video in different formats using the source element.

Currently using WEBM VP8/9, OGG Theora and MP4 H.264 should do it.

<video preload="auto" autobuffer controls autoplay>
    <source src="video.webm" type="video/webm">
    <source src="video.ogv" type="video/ogg">
    <source src="video.mp4" type="video/mp4">

    <iframe src="http://player.vimeo.com/video/123456" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</video>

You could also try utilizing the error event on the video element or on the last source element, and implement a JavaScript based fallback where you replace the video element with its content.

Example from the W3 specs:

<script>
 function fallback(video) {
   // replace <video> with its contents
   while (video.hasChildNodes()) {
     if (video.firstChild instanceof HTMLSourceElement)
       video.removeChild(video.firstChild);
     else
       video.parentNode.insertBefore(video.firstChild, video);
   }
   video.parentNode.removeChild(video);
 }
</script>
<video controls autoplay>
 <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
         onerror="fallback(parentNode)">
 ...
</video>

http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#source-default-media

Upvotes: 3

Related Questions