2011-11-30 52 views
4

更新:它似乎非常緩慢地緩衝了FireFox上的視頻。等待約5分鐘後,視頻將播放。但是,在所有其他設備上,它會立即加載......這是怎麼回事?VideoJS和FireFox HTML5視頻.WebM格式不工作

問題:如何讓VideoJS在所有瀏覽器(包括移動設備)上播放?根據VideoJS文檔,我認爲我完成了所有工作,但我一定錯過了一些東西。

的網址是:http://centerforconfidence.com/addons/stop-tracking-ga/index.php?ct=disable

現狀:
我使用VideoJS和嵌入表單生成來自: http://videojs.com/embed-builder/

我創建了一個H.264編碼的.mp4我從視頻Adobe Premier Pro。
我使用AVS視頻轉換器將其轉換爲.WebM視頻

在我的Andriod設備上,以下代碼可用作嵌入式視頻。
在FireFox上,它嘗試加載HTML5視頻播放器,但從未加載視頻。
在IE9上,它使用Flash後備。

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

謝謝!

回答

0

只需使用.ogv for firefox。那麼你也會獲得Internet Explorer的支持。