【问题标题】:Mediaelement.js Flash Fallback not workingMediaelement.js Flash 回退不起作用
【发布时间】:2012-08-29 01:32:55
【问题描述】:

我正在使用 Mediaelement.js 在页面上包含视频。

可以在http://badlands777.com/test/找到它

我可以让视频在 Chrome 和 Safari 中完美运行。但是,Firefox 的 Flash 后备功能似乎没有启动。

具体来说,当我右键单击 Flash 播放器时,它显示“电影未加载”。 我检查了播放器和视频文件的路径,它们都是正确的。

这是我正在使用的代码:

<object style="border: solid 1px #fff;" width="320" height="240" type="application/x-shockwave-flash" data="http://badlands777.com/js/flashmediaelement.swf">
    <param name="movie" value="http://badlands777.com/js/flashmediaelement.swf" />
    <param name="flashvars" value="controls=false&amp;file=http://badlands777.com/wp-content/uploads/2012/08/flamesintro_v02.mp4" />
    <!-- Image as a last resort -->
    <img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities" />
</object>

<script>
MediaElement('player1', {success: function(me) {    
    me.play();
}});
</script>

【问题讨论】:

    标签: flash mediaelement.js


    【解决方案1】:

    通过使用以下代码设法使其工作:

    HTML:

    <video id="player1" width="100%" height="100%" controls="controls">
        <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
        <source type="video/mp4" src="PATH_TO_VIDEO.mp4" />
        <object width="1024" height="576" type="application/x-shockwave-flash" data="PATH_TO_flashmediaelement.swf">
           <param name="movie" value="PATH_TO_flashmediaelement.swf">
           <param name="flashvars" value="controls=true&amp;file=PATH_TO_VIDEO.mp4">
        </object>
    </video>
    

    JS:

        jQuery(document).ready(function(){        
    
            // THE MOST HATED PIECE OF CODE IN THE WORLD.
            jQuery('video').mediaelementplayer({
                success: function(player, node) {
    
                // STARTS THE VIDEO IF IT'S FLASH VIDEO FALLBACK.
                jQuery('.mejs-overlay-button').trigger('click');
    
                // STARTS THE VIDEO IF IT'S HTML5 COMPATIBLE.
                player.play();
                }
            });
    
            // FADES IN TITLES.
            jQuery(".enter_logo").delay(2200).animate({opacity:1},2000);
            jQuery(".enter_button").delay(6000).animate({opacity:0.4},2000);
    
        });
    

    【讨论】:

    • 文档中有 & 而不是 &在 flashvars 值中,这是行不通的。你的例子帮助我抓住了这个问题。谢谢!