如何检测浏览器播放器是否可以处理视频格式答案

【问题标题】：How to detect if a browser player can handle a video format如何检测浏览器播放器是否可以处理视频格式
【发布时间】：2013-08-27 08:01:07
【问题描述】：

我正在尝试使用其 HTML5 播放器在浏览器中播放 .mp4 视频。

但是，Firefox 不处理 .mp4 视频格式。所以在这种情况下，我想切换到可以完成这项工作的 Flash 播放器。

而不是使用以下被称为不可靠的 JavaScript 代码：

<!-- language: lang-js -->

if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
{
     //Do Firefox-related activities
}

有没有办法识别 HTML5 播放器并知道它是否可以处理 .mp4 视频格式？

【问题讨论】：

我找不到返回可播放格式的方法。但此链接可能会帮助您提供更好的回退（检查回退选项）：developer.mozilla.org/en-US/docs/Web/HTML/…
好人，做到了，我会发布解决方案！

标签： javascript firefox html5-video mp4

【解决方案1】：

您只需使用提供多种格式和/或替代方案的 HTML5 即可做到这一点。每个浏览器都会选择更适合的浏览器：

<video width="1280" height="720" controls="controls">
   <source src="video/movie.ogg" type="video/ogg" />
   <source src="video/movie.webm" type="video/webm" />
   <source src="video/movie.mp4" type="video/mp4" />
   <!-- none of the formats supported -> provide flash -->
   <!-- YOUR EMBED FLASH PLAYER --> 
</video>

当然，这应该可以。我使用了 Youtube Flash 版本。您只需设置自己的 Flash 对象版本：

<video width="1280" height="720" controls="controls">
   <source src="video/movie.ogg" type="video/ogg" />
   <source src="video/movie.webm" type="video/webm" />
   <source src="video/movie.mp4" type="video/mp4" />
   <!-- none of the formats supported -> provide flash -->
   <object width="420" height="315">
       <param name="movie" value="//www.youtube.com/v/z82D_dBAA8Y?hl=es_ES&amp;version=3"></param>
       <param name="allowFullScreen" value="true"></param>
       <param name="allowscriptaccess" value="always"></param>
       <embed src="//www.youtube.com/v/z82D_dBAA8Y?hl=es_ES&amp;version=3" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
   </object>
</video>

【讨论】：

但我不想在服务器上拥有不同格式的同一视频的多个版本。但是，您的示例说，如果不支持任何格式，则可以使用嵌入式 Flash 播放器。我试过this 但无法让它工作。你能举个例子吗？
我刚刚尝试过，但无法在 mozilla 上运行。这是一个密码笔codepen.io/Micka33/pen/zypnf。你能告诉我有什么问题吗？

【解决方案2】：

感谢@Skymt。

我找不到返回可播放格式的方法。但是这个链接可能会帮助您提供更好的后备（检查后备选项）： https://developer.mozilla.org/en-US/docs/Web/HTML/Using_HTML5_audio_and_video#Showing_fallback_content_when_no_source_could_be_decoded

我正在使用 videojs 这是我的 javascript 代码：

videojs("videoViewer", {playerFallbackOrder: ["html5", "flash", "links"]}, function(){});
var v = document.querySelector('video');
source = v.querySelector('source');
source.addEventListener('error', function(ev)
{
    videojs("videoViewer", {playerFallbackOrder: ["flash", "html5", "links"]}, function(){});
}, false);

它与您在链接上找到的示例非常相似，唯一的区别是我只有 1 个来源，并且我使用的是videojs。

那么当我尝试在 Firefox 中播放 .mp4 时发生了什么？

我实例化videojs提供的html5视频播放器
html5 视频播放器将显示一个错误，指出它无法读取此视频格式并触发错误事件
上面的代码会捕获错误事件
然后我使用 videojs 更改其后备顺序选项，以实例化 Flash 播放器。

它只在firefox中有效吗？

不，这适用于所有浏览器，即使是那些没有 html5 视频播放器的浏览器，因为videojs 会自动回退到 Flash 版本。

它只适用于 mp4 吗？

不，只要 html5 视频播放器触发错误，无论视频格式如何，这都会起作用。

【讨论】：