如何解决尝试将Flowplayer用作html5视频的Flash后备时遇到的问题
|| 我现在已经成功地设法使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>
//在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,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似乎已加载,但是我收到一条错误消息,提示该视频剪辑无法加载,我也不知道为什么。非常感谢您的帮助
解决方法
在对象上...放置一个ID ..这是我用flowplyer实现的功能之一。
很可能您遇到2124错误..无法加载资源..对吗?
..........
...
这应该够了吧..
, 我通常使用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。