【问题标题】: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 视频格式?

【问题讨论】:

标签: 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 时发生了什么?

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

它只在firefox中有效吗?

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

它只适用于 mp4 吗?

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

【讨论】:

    猜你喜欢
    • 2013-08-20
    • 1970-01-01
    • 2017-03-14
    • 1970-01-01
    • 2015-06-20
    • 1970-01-01
    • 1970-01-01
    • 2018-07-06
    • 1970-01-01
    相关资源
    最近更新 更多