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

Answer 1

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 2

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!

Answer 3

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.