在mediaelement.js中的Flash只显示“下载文件” [英] Flash in mediaelement.js only shows "download file"
问题描述
我想让mediaelement.js的Flash后备工作，但它只在左上角显示一个黑色的区域，表示下载文件。
我生成的视频标记看起来非常像这样。我只是修改了一些路径，出于隐私的原因：
< video width =1024height =576preload =none style =display：none;>
< object width =1024height =576type =application / x-shockwave-flashdata =flashmediaelement.swf>
< param name =movievalue =/ wp-content / themes / my_theme / js / vendor / mediaelement / flashmediaelement.swf>
< param name =flashvarsvalue =controls = true& amp; amp; file = http：//mybucket.s3.amazonaws.com/my_video.mp4>
< / object>
< / video>
这有什么明显的错误吗？有没有办法获得一些调试输出？什么时候显示下载文件的东西？ mediaelement.js页面没有提到任何地方。
我首先想到的是其中一条路径一定是错误的，但是在Chrome的调试工具中看不到任何失败的请求。
/ p>
编辑：
我提取了一个失败代码的最小示例，并将其上传 here
< source /> ，才能在不同的浏览器中工作 - 请参阅 mediaelement-and-player.js：1027 ）。 $ b 2）Flash fallback只会在浏览器不支持
< video> 标记。要在浏览器中进行测试，请将< video>替换（< voodeo>）。以下是固定的代码（替换了一些可以测试的路径）：
< html>
< head>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js>< / script>
< script type =text / javascriptsrc =http://ajmurmann.com/flash_test/mediaelement-and-player.min.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（'video'）。mediaelementplayer（{
enablePluginDebug：true，
plugins：['flash'，'silverlight ']
}）;
}）;
< / script>
< / head>
< body>
< video width =1024height =576controls =controls>
<！ - 用于Safari，IE9，iPhone，iPad，Android和Windows Phone 7的MP4 - >
< source type =video / mp4src =http://mediaelementjs.com/media/echo-hereweare.mp4/>
<！ - 适用于Firefox4，Opera和Chrome的WebM / VP8 - >
< source type =video / webmsrc =http://mediaelementjs.com/media/echo-hereweare.webm/>
<！ - Ogg / Vorbis适用于旧版Firefox和Opera版本 - >
< source type =video / oggsrc =http://mediaelementjs.com/media/echo-hereweare.ogv/>
< object width =1024height =576type =application / x-shockwave-flashdata =http://ajmurmann.com/flash_test/flashmediaelement.swf>
< param name =movievalue =http://ajmurmann.com/flash_test/flashmediaelement.swf>
< param name =flashvarsvalue =controls = true& amp; amp; file = http：//ajmurmann.com/flash_test/echo-hereweare.mp4>
< / object>
< / video>
< / body>
< / html>
I would like to get the Flash fallback for mediaelement.js to work, but it only shows a black area saying "download file" in the upper left. The video markup I generate looks very much like this. I just modified some paths for privacy reasons:
<video width="1024" height="576" preload="none" style="display: none; ">
<object width="1024" height="576" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="movie" value="/wp-content/themes/my_theme/js/vendor/mediaelement/flashmediaelement.swf">
<param name="flashvars" value="controls=true&file=http://mybucket.s3.amazonaws.com/my_video.mp4">
</object>
</video>
Is there anything obviously wrong with this? Is there a way to get some debug output? When does the "download file" thing show up? The mediaelement.js page doesn't mention it anywhere. I first thought one of the paths must be wrong, but I can't see any failed requests in Chrome's debug tools.
Any help is appreciated!
EDIT: I extracted a minimal example of the failing code and uploaded it here
1) You didn't specify <source/> inside video - that's why it doesn't work. You need to specify multiple <source/>'s for it to work in different browsers - see "Option B" at http://mediaelementjs.com/ .
"Download file" link is indeed generated by MediaElement logic (see mediaelement-and-player.js:1027).
2) Flash fallback will only be invoked if the browser doesn't support <video> tag. To test it in a browser that does, replace "<video>" with an invalid tag - say, "<voodeo>".
Here's the fixed code (replaced some paths to be able to test it):
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajmurmann.com/flash_test/mediaelement-and-player.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('video').mediaelementplayer({
enablePluginDebug: true,
plugins: ['flash','silverlight']
});
});
</script>
</head>
<body>
<video width="1024" height="576" controls="controls">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="http://mediaelementjs.com/media/echo-hereweare.mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source type="video/webm" src="http://mediaelementjs.com/media/echo-hereweare.webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source type="video/ogg" src="http://mediaelementjs.com/media/echo-hereweare.ogv" />
<object width="1024" height="576" type="application/x-shockwave-flash" data="http://ajmurmann.com/flash_test/flashmediaelement.swf">
<param name="movie" value="http://ajmurmann.com/flash_test/flashmediaelement.swf">
<param name="flashvars" value="controls=true&file=http://ajmurmann.com/flash_test/echo-hereweare.mp4">
</object>
</video>
</body>
</html>
这篇关于在mediaelement.js中的Flash只显示“下载文件”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
