Question

出于某种原因，我无法让mediaelement.js Flash播放器在Firefox中运行。我使用.m4v和.mp4文件来测试这个。

我知道Firefox无法在其原生HTML5播放器中播放.m4v或.mp4，但我们不想为.ogv和.webm编码一堆视频。

直到.webm接管市场。

默认Flash播放器9及以上版本应该原生播放.mp4和.m4v版本。
此外，如果我们使用multiple sources选项并且object标签具有 <param name="flashvars" value="controls=true&poster=../media/echo-hereweare.jpg&file=../media/echo-hereweare.mp4" />

海报和文件路径是否能够使用http：// URL而不是相对URL？

在测试Firefox时，我使用了这个选项：

<video width="640" height="360" src="../media/echo-hereweare.mp4" 
type="video/mp4" id="player1" poster="../media/echo-hereweare.jpg" 
controls="controls" preload="none"></video>

以下选项：

<video width="640" height="360" id="player2" 
poster="../build/echo-hereweare.jpg" controls="controls" preload="none">
    <!-- MP4 source must come first for iOS -->
    <source type="video/mp4" src="../build/echo-hereweare.mp4" />

    <!-- Fallback flash player for no-HTML5 browsers with JavaScript turned off -->
    <object width="640" height="360" type="application/x-shockwave-flash" data="../build/flashmediaelement.swf">        
        <param name="movie" value="../build/flashmediaelement.swf" /> 
        <param name="flashvars" value="controls=true&poster=../media/echo-hereweare.jpg&file=../build/echo-hereweare.mp4" />        
         <!-- Image fall back for non-HTML5 browser with JavaScript turned off 
              and no Flash player installed -->
         <img src="../build/echo-hereweare.jpg" width="640" height="360" alt="Here we are" 
    title="No video playback capabilities" />
    </object>   
</video>

它们都不起作用。 Flash Skin DOES显示但功能无效。我可以看到时间轴，大玩按钮，音量，但没有任何东西可供选择。

奇怪的是，我必须使用jQuery实例化播放器才能让皮肤在Chrome和IE上运行。在示例中，它没有说明必须实例化它。只需指向文件即可。那是我的问题。
当我执行类似于上面描述的操作时，Flash播放器在本地工作，但不是我们网站上的。我错过了什么吗？

更新

实际问题是与我们当前现场CSS上的z索引冲突。主要是我们的对象标签和控件。

这是我们的解决方案超越了玩家的CSS。

video{z-index:99999}
.mejs-overlay-button{z-index:700}
.mejs-overlay-play{}
.mejs-container .mejs-controls{z-index:700}
.mejs-container-fullscreen video{z-index:99999}
.mejs-container .mejs-container-fullscreen{z-index:9999}
.mejs-fullscreen-button{right:0;}

不知道这是否会对其他人有所帮助，只需要小心。

Answer 1

如果它在本地工作，但不能通过网络服务器工作，则可能是mime-types。

请检查：MediaElements – Installation。

希望它有所帮助。

Answer 2

我在媒体元素播放器上遇到了类似的问题，其中没有优先考虑正确的视频类型。似乎有时浏览器会表明它们支持的格式实际上并非如此。

在我的情况下，我使用的是FLV和M4V文件，iDevices正在尝试播放FLV，但是我会在这里包含这个解决方案，以防其他人在遇到麻烦时偶然发现这个问题。

要解决此问题，我基本上使用UA字符串进行了一些浏览器检测，例如this，然后相应地重新排序<source>元素：

function prioritizeFormat(mediaelement)
{
    if (FORCE_M4V_VIDEOS) { // flag for mobile devices that think they can support FLV
        $(mediaelement).find('source[type="video/m4v"]').after($(mediaelement).find('source[type="video/x-flv"]'));
    }
}

Answer 3

我有同样的问题。我的服务器上没有.swf文件。从build文件夹中复制mediaelement.swf文件并正确地进行href。例如：

<video width="100%" height="auto" poster="some_image.jpg" controls="controls" autoplay="true">
    <source type="video/mp4" src="myvideo.mp4" /><source type="video/webm" src="myvideo.webm" />
    <source type="video/ogg" src="myvideo.ogv" />
    <object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf"><!--Proper href here-->
        <param name="movie" value="flashmediaelement.swf" />
        <param name="flashvars" value="controls=true&file=myvideo.mp4" />
        <img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities" />
    </object>
</video>

mediaelement.js Flash Firefox

3 个答案: