我现在已成功设法让html5视频标签正常工作,我现在正尝试使用Flowplayer实现闪回后备解决方案。以下是我的代码: -
<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>
//当DOM准备好时,将VideoJS添加到页面上的所有视频标签 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>
Flowplayer似乎加载了,但是我收到一条错误消息,指出视频片段无法加载,我不知道为什么。非常感谢您的帮助
答案 0 :(得分:4)
在对象上...放置一个id ..这是我用flowplyer实现的事情之一.. 最有可能你有2124错误..无法加载资源..对吗??
.......... ...
应该做的伎俩..
答案 1 :(得分:1)
我通常使用videoJS来解决像你这样的问题。这是代码示例:
<script src="/images/js/zencoder/video.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="/images/js/zencoder/video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
<script type="text/javascript">
$(document).ready(function(){
VideoJS.setup();
}
</script>
<div class="video-js-box">
<video width="480" height="272" preload="" controls="" poster="/images/video/videoBackMiddle.png" class="video-js" tabindex="0">
<source type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' src="/images/video/01.mov"></source>
<!--Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object width="480" height="272" data="/images/js/flowplayer/flowplayer-3.2.7.swf" type="application/x-shockwave-flash" class="vjs-flash-fallback">
<param value="/images/js/flowplayer/flowplayer-3.2.7.swf" name="movie">
<param value="true" name="allowfullscreen">
<param value="config={'clip':{'url':'/images/video/01.mov','autoPlay':false,'autoBuffering':true, 'scaling':'orig'}}" name="flashvars">
<!-- Image Fallback -->
<img width="480" height="272" title="No video playback capabilities." alt="Poster Image" src="/images/video/videoBackMiddle.jpg">
</object>
</video>
</div>