HTML5 video и Video.js: нет воспроизведения в Firefox в зависимости от порядка источников

Question

Я использую Video.js 4.9. У меня не было возможности проверить, существует ли описанная ниже проблема с чистым проигрывателем HTML5:

Мое видео воспроизводится нормально в последних версиях всех основных браузеров на Mac OS, в Safari на iOS 7 и в IE11 на Windows 7.

Но в Firefox 35 на Windows 7 все, что я получаю, это черный прямоугольник и это сообщение об ошибке:

Воспроизведение видео было прервано из-за проблемы с повреждением или из-за того, что использованное видео не поддерживало ваш браузер.

Видео воспроизводится в FF 35 на Win 7, когда я меняю порядок тегов источника и помещаю webm перед mp4. Но AFAIK, если не ставить тег mp4 первым, может вызвать проблемы в (более старых версиях?) Chrome и Safari.

Что мне с этим делать?

Это мой код Большая часть кода JavaScript делает веб-страницу отзывчивой.

<!-- header -->
<link href="../../video-js/video-js.css" rel="stylesheet">
<script src="../../video-js/video.dev.js"></script>

<!-- video tag in body -->
<video id="mobile_video" class="video-js vjs-default-skin" autoplay controls preload="none" data-setup="{}">
    <source src="tgm.mp4" type="video/mp4" />
    <source src="tgm.webm" type="video/webm" />
    <source src="tgm.ogv" type="video/ogg" />
</video>

<!-- JS code directly below -->
<script type="text/javascript">
  videojs.autoSetup();

    videojs('mobile_video').ready(function(){
      //log all of the default videojs options
      console.log(this.options()); 

       // Store the video object
      var myPlayer = this, id = myPlayer.id();
      // Make up an aspect ratio
      var aspectRatio = 450/800; 

      function resizeVideoJS(){
        var width = document.getElementById(id).parentElement.offsetWidth;
        myPlayer.width(width).height( width * aspectRatio );

      }

      // Initialize resizeVideoJS()
      resizeVideoJS();
      // Then on resize call resizeVideoJS()
      window.onresize = resizeVideoJS; 
    });
  </script>

РЕДАКТИРОВАТЬ

Есть связанный вопрос. Кто-то решил очень похожую проблему, включив атрибут data-setup='{}'. Это всегда было в моем коде.

Answer 1

Недавно я решил проблему с отсутствием воспроизведения mp4 в Chrome или Firefox (хорошо воспроизводится в IE) на странице с 16 видео в модальных режимах (начальная загрузка 3) после обнаружения частоты кадров всех видео должны быть одинаковыми. У меня было 6 видео со скоростью 25 кадров в секунду и 12 со скоростью 29,97 кадров в секунду... после рендеринга всех версий до 25 кадров в секунду все прошло гладко во всех браузерах. Больше не нужно многоформатное видео.