Question

我想让mediaelement.js的Flash回退工作，但它只显示左上角的“下载文件”的黑色区域。我生成的视频标记看起来非常像这样。我出于隐私原因修改了一些路径：

<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&amp;file=http://mybucket.s3.amazonaws.com/my_video.mp4">
   </object>
</video>

这有什么明显的错误吗？有没有办法获得一些调试输出？什么时候出现“下载文件”的东西？ mediaelement.js页面没有在任何地方提及它。我首先想到其中一条路径一定是错的，但我在Chrome的调试工具中看不到任何失败的请求。

感谢任何帮助！

编辑：我提取了失败代码的最小示例并将其上传here

Answer 1

1）你没有在视频中指定<source/> - 这就是为什么它不起作用。您需要指定多个<source/>才能在不同的浏览器中使用 - 请参阅http://mediaelementjs.com/处的“选项B”。

“下载文件”链接确实是由MediaElement逻辑生成的（请参阅mediaelement-and-player.js:1027）。

2）如果浏览器不支持<video>标记，则只会调用Flash回退。要在浏览器中对其进行测试，请替换“＆lt; video＆gt;”标签无效 - 例如，“＆lt; voodeo＆gt;”。

这是固定代码（替换了一些路径以便能够测试它）：

<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&amp;file=http://ajmurmann.com/flash_test/echo-hereweare.mp4">
            </object>
        </video>
    </body>
</html>

Answer 2

正如ivan_pozdeev所说，您需要在视频元素中指定src标记。但是，您无需为MediaElement.js提供多个源即可在不同的浏览器中使用。

在您的情况下，您可以提供单个.mp4文件，只要您安装了Flash或Silverlight（即ME的“Fall”），它就可以在浏览器中工作（请参阅步骤2：http://www.mediaelementjs.com处的选项A）转发“功能”。

当HTML5不是您正在使用的浏览器的原生HTML并且您没有安装相应的插件（即Flash或Silverlight）时，将显示“下载文件”。在mediaelement-and-player.js中，在第162行中断（var pv = this.plugins [plugin];） - 如果“pv”的值为“0,0,0”，则MediaElement未检测到插件而您将收到“下载文件”链接。

Answer 3

如果您正在尝试制作YouTube视频并且显示此内容，那么我忘记将source =“video / youtube”放在源标记中。它只是设置为type ='video'

mediaelement.js中的Flash仅显示“下载文件”

3 个答案: