尝试将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>