VideoJS и FireFox HTML5 видео. WebM формат не работает - PullRequest
Новая
       90

VideoJS и FireFox HTML5 видео. WebM формат не работает

4 голосов
/ 30 ноября 2011

ОБНОВЛЕНИЕ : Кажется, что видео в FireFox буферизуется очень медленно.Примерно через 5 минут ожидания видео будет воспроизведено.Однако на всех других устройствах он загружается мгновенно ... В чем дело?

ВОПРОС : Как заставить VideoJS воспроизводиться во всех браузерах, включая мобильные устройства?Я думал, что сделал все в соответствии с документацией VideoJS, но я должен что-то упустить.

Веб-сайт: http://centerforconfidence.com/addons/stop-tracking-ga/index.php?ct=disable

Ситуация:
Я использую VideoJS и Embed Form Builder с: http://videojs.com/embed-builder/

Я создал свое видео .mp4, закодированное в h.264, из Adobe Premier Pro.
Я использовал AVS-конвертер видео, чтобы преобразовать его в видео .WebM

На моем устройстве Andriod код ниже работаетвстроенное видео.
В FireFox он пытается загрузить видеоплеер HTML5, но никогда не загружает видео.
В IE9 он использует Flash Fallback. 

     <!-- Begin VideoJS -->
  <div class="video-js-box">
    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
    <video class="video-js" width="560" height="340" controls preload autoplay poster="http://www.centerforconfidence.com/addons/videos/webinar-invite-1/ImagePreview2.png">
      <source src="http://www.centerforconfidence.com/addons/videos/webinar-invite-1/Webinar-Invite-1-Final-4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
      <source src="http://www.centerforconfidence.com/addons/videos/webinar-invite-1/Webinar-Invite-1-Final-4.webm" type='video/webm; codecs="vp8, vorbis"' />
      <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
      <object id="flash_fallback_1" class="vjs-flash-fallback" width="560" height="340" type="application/x-shockwave-flash" 
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" 
          value='config={"playlist":["http://www.centerforconfidence.com/addons/videos/webinar-invite-1/ImagePreview2.png", {"url": "http://www.centerforconfidence.com/addons/videos/webinar-invite-1/Webinar-Invite-1-Final-4.mp4","autoPlay":true,"autoBuffering":true}]}' />
        <!-- Image Fallback. Typically the same as the poster image. -->
        <img src="http://www.centerforconfidence.com/addons/videos/webinar-invite-1/ImagePreview2.png" width="560" height="340" alt="Poster Image" 
          title="No video playback capabilities." />
      </object>
    </video>
    <!-- Download links provided for devices that can't play video in the browser. -->
    <p class="vjs-no-video"><strong>Download Video:</strong>
      <a href="http://www.centerforconfidence.com/addons/videos/webinar-invite-1/Webinar-Invite-1-Final-4.mp4">MP4</a>,
      <a href="http://www.centerforconfidence.com/addons/videos/webinar-invite-1/Webinar-Invite-1-Final-4.webm">WebM</a>,
      <!-- Support VideoJS by keeping this link. -->
      <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
    </p>
  </div>
  <!-- End VideoJS -->

Спасибо!

1 Ответ

0 голосов
/ 14 марта 2013

Просто используйте .ogv для firefox.Тогда вы также получите поддержку Internet Explorer.

...