Firefox не будет воспроизводить видео.webm и.ogv с HTML5

Question

Я подготовил 3 видео формата для своего сайта:

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

на сайте http://tekhy.net/

Я использую тег

<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>

И я установил правильный mimetype для моих видео в .htaccess:

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

В Google Chrome и Chromium все работает хорошо, на Firefox Mobile тоже работает хорошо. На Firefox Nightly 21.0a работает хорошо. Но на Firefox 18.0.1 на Elementary OS Luna это не сработает.

Firebug говорит мне, что не может декодировать webm и ogg/ogv media (mp4 не поддерживается Firefox atm).

Я пробовал также с background-purple.ogv type="video/ogv", но проблема остается.

Мое вебм видео:

Видео Google/On2 VP8 (VP80)
Планар 4:2:0 ЮВ

В настоящее время я действительно не представляю, как решить эту проблему. Любое предложение?

Answer 1

Кажется, я нашел решение:

Я переключил мой кодек ogv с VP8 на Theora, и теперь Firefox может корректно воспроизводить видео.

Я использовал этот код для источника:

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

MIME-тип:

AddType video/ogg .ogv .ogg

И кодек это:

Xiph.org's Theora Video (theo)

Я думаю, это может работать и для.webm, но я не проверял это.

Answer 2

Я полагаю, что эта проблема связана с ошибкой вплоть до FF 20, когда многие популярные веб-кодеры вставляют отрицательные временные метки, и Firefox не может воспроизводить видео, пока не загрузит весь веб-файл: https://bugzilla.mozilla.org/show_bug.cgi?id=868797

Исправление упоминается в комментариях:

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

Важным флагом кодирования является -avoid_negative_ts 1

Answer 3

Chrome немного глючит в видео HTML5. Делайте так, как предлагает Фес, или просто используйте.mp4 и.webm. WEBM более стабилен в Chrome, и вам нужны только эти два формата для совместимости с браузером. Это также экономит ваше время рендеринга ваших видео!