Search code examples
htmlfirefoxvideooggwebm

Firefox won't play .webm and .ogv videos with HTML5


I prepared 3 video formats for my site:

/assets/video/background-purple.ogg
/assets/video/background-purple.webm
/assets/video/background-purple.mp4

on the site http://tekhy.net/

I use <video> tag for play the video:

<video webkit-playsinline autoplay="autoplay" loop="true" poster="/assets/video/transparent.png">
    <source src="/assets/video/background-purple.ogg" type="video/ogg">
    <source src="/assets/video/background-purple.mp4" type="video/mp4">
    <source src="/assets/video/background-purple.webm" type="video/webm">
</video>

And I've setted the correct mimetype for my videos into .htaccess:

AddType video/mp4 .mp4 .m4v
AddType video/webm .webm
AddType video/ogg .ogv .ogg

In Google Chrome and Chromium all works well, on Firefox Mobile works well too. On Firefox Nightly 21.0a works well. But on Firefox 18.0.1 on Elementary OS Luna it won't work.

Firebug tells me that it can't decode webm and ogg/ogv media (mp4 is not supported by Firefox atm).

I've tried also with background-purple.ogv type="video/ogv" but the problem remain.

My webm video is:

Google/On2's VP8 Video (VP80)
Planar 4:2:0 YUV

Currently I've really not idea on how solve this problem. Any suggestion?


Solution

  • Seems I've found a solution:

    I switched my ogv codec from VP8 to Theora and now Firefox can play video correctly.

    I used this code for the source:

    <source src="/assets/video/background-purple.ogv" type="video/ogg">
    

    The MIMEtype is:

    AddType video/ogg .ogv .ogg
    

    And the codec is:

    Xiph.org's Theora Video (theo)
    

    I guess it could work also for .webm but I've not tested it.