哪些用户代理支持 HTML5 <video> 标签中的 mp4/H.264 视频？

Posted 2023-05-08

【中文标题】哪些用户代理支持 HTML5 <video> 标签中的 mp4/H.264 视频？

【英文标题】：What user agents support mp4/H.264 video in the HTML5 <video> tag?

【发布时间】：2011-06-27 02:52:16

【问题描述】：

哪些用户代理支持 html5 video 标签，使用 mp4 作为容器，使用 H.264 作为编解码器？有没有人为此想出一个正则表达式？

更新： 谢谢大家的cmets。我忘了提，我最好在后端做这个，这意味着像modernizer这样的东西是行不通的。

【问题讨论】：

当时情况见***.com/questions/3688883/html5-video-codec-support/…

caniuse.com 有一个有用的页面：caniuse.com/#feat=mpeg4

【参考方案1】：

桌面：

IE6-8：无 IE9-10：H.264 Chrome：WebM 和 H.264 Firefox 3.6：Ogg Theora Firefox 4+：WebM Opera：WebM Safari：H.264

手机：

ios：H.264 Chrome android：H.264 和 WebM Firefox Android：H.264 和 WebM 适用于 Windows Phone 7.5 - 8 的 IE：H.264 Opera 12：H.264

请参阅HTML5 Test 了解更多信息。注意：Android 的默认浏览器（称为“浏览器”）没有列出对任何编解码器的支持，但我认为这取决于手机供应商，我很确定您可以保证 H.264 作为硬件加速该编解码器往往内置于移动处理器中。同样关于桌面版 Firefox，它正在获得 H.264 支持later this year。

编辑：以上支持矩阵于 2013/03/22 更新

---

因此，您需要支持的两种视频格式是 WebM 和 H.264。但似乎 H.264 越来越成为网络视频的事实标准。

不要使用用户代理嗅探，众所周知，它不可靠且容易出错。有更好的方法来检测<video> 标签支持。

例如，看看Modernizer，它可以让你写：

if (!Modernizr.video)

    // Implement some Flash fallback

或者，如果您明确检测到特定的编解码器...

if (!Modernizr.video || (Modernizr.video && !Modernizr.video.h264))

    // Flash fallback here

【参考方案2】：

不确定正则表达式，尽管我认为您不需要用户代理嗅探 - <video> 元素旨在包含对多种格式的视频的引用，这样用户代理将播放他们支持的格式.有关a great example，请参阅深入了解 HTML5 的视频章节。

Dive into HTML5 还有a good list of browser support of HTML5 video。