我正在使用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&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>
答案 0 :(得分:4)
使用以下代码管理以使其工作:
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&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);
});