Question

There is a problem with firefox. Lot of questions there related this but i didnt get any solution for it. In this link video tag's video not working in mozilla and in crome its working fine. type='video/ogg' added but no luck yet.

Was it helpful?

Solution

You could use jQuery to check browser and load best format only...

I consider webm is better for Firefox or Chrome.. For anything else, you can use mp4.

Just like this :

Your HTML :

<video id="frog" loop autoplay ></video>

Your JS :

    $(window).load(function(){
       var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
       var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
       if(is_firefox || is_chrome){
         // for firefox or chrome, webm is better
           $("#frog").attr("src","http://www.ellevation.com.au/sanli/wp-content/uploads/2014/04/testvid_VP8.webm");
       }else{
           $("#frog").attr("src","http://www.ellevation.com.au/sanli/wp-content/uploads/2014/04/testvid_x264.mp4");
       }
    });

An example here.

Edit : (september 2014)

It seems that Firefox no longer supports webm format on html5 video.

Best solution seems :

HTML :

<video controls>
    <source src="oggVideoPath.ogv" type="video/ogg">
    <source src="mp4VideoPath.mp4" type="video/mp4">
    Your browser doesn't support <code>video</code>.
</video>

And BEST SOLUTION to correctly encode mp4 to Ogg Theora is :

http://v2v.cc/~j/ffmpeg2theora/

very easy to use, install it and just write this command line : ffmpeg2theora mp4VideoPath.mp4

OTHER TIPS

When I try to open the page, it uses the mp4 version, so I cannot be certain about this. But it could be that your webserver does not return the correct Content-Type-header for the ogg media stream.

It must return media/ogg for it to work properly on all browsers and platforms.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top