我已经成功地使用HTML5视频标签,并正在尝试使用Flowplayer实现Flash备选方案。以下是我的代码:
<div id="videocontent">
<video width="640" height="360" autobuffer controls preload="auto" >
<source src="fracWelDay3.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="fracWelDay3.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="fracWelDay3.ogv" type='video/ogg; codecs="theora, vorbis"'> <object type="application/x-shockwave-flash" data="flowplayer-3.2.7.swf" width="640" height="360">
<param name="movie" value="flowplayer-3.2.7.swf">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always">
<param name="flashVars" value="config={'playlist':[{'url':'http://www.synergese.co.uk/testMathsOnline/day3/videos/fracWelDay3.mp4','autoPlay':false}]}" />
</object>
</video>
</div>
这是视频的链接:
http://www.synergese.co.uk/testMathsOnline/day3/videos/day3FracWelVideo.html
为了在Firefox中测试这个,我注释掉了引用.ogv文件的那一行。(这里不会显示注释。当我在这个页面上包含它时,注释下面的文本消失了)然而,当我在Firefox中测试它时,我只得到一个灰色的框。如果有人能帮忙,我将非常感激。
谢谢,但我还是真的卡住了。我下载了VideoJs并实现了(我认为是相应的)。以下是我的代码:
<script src="video.js" type="text/javascript" charset="utf-8"></script>
// Add VideoJS to all video tags on the page when the DOM is ready
VideoJS.setupAllWhenReady();
<div id="videocontent">
<div class="video-js-box">
<video width="640" height="360" preload="" controls="" poster="day3Wel.jpg" class="video-js" tabindex="0" >
<source src="fracWelDay3.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="fracWelDay3.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="fracWelDay3.ogv" type='video/ogg; codecs="theora, vorbis"'>
<object type="application/x-shockwave-flash" data="flowplayer-3.2.7.swf" width="640" height="360" class="vjs-flash-fallback">
<param name="movie" value="flowplayer-3.2.7.swf">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always">
<param value="config={'clip':{'url':'fracWelDay3.mp4','autoPlay':false,'autoBuffering':true, 'scaling':'orig'}}" name="flashvars">
<!-- Image Fallback -->
<img width="640" height="360" title="No video playback capabilities." alt="Poster Image" src="day3Wel.jpg">
</object>
</video>
</div>
</div>
The Flowplayer seems to load, but I get an error message saying that the video clip won't load and I don't know why. Many thanks for your help