更新:它似乎非常缓慢地缓冲了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 -->
谢谢!