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

Question

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?

Answer 1

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.

Answer 2

I believe this problem is related to a bug stemming all the way up to FF 20, where a lot of the popular webm encoders are inserting negative timestamps and firefox can't play the video until it downloads the whole webm file: https://bugzilla.mozilla.org/show_bug.cgi?id=868797

The fix is mentioned in the comments:

ffmpeg -i input.webm -codec copy -avoid_negative_ts 1 output.webm

The important encoding flag being -avoid_negative_ts 1

Answer 3

Chrome is a bit buggy with HTML5 video. Do as Fez suggested, or simply just use .mp4 and .webm. WEBM is more stable in Chrome and you only need these two formats for browser compatibility. This also saves you time rendering your videos!