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

Question

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

更新： 感谢大家的评论。我忘了提到，我更希望在后端完成这个功能，这意味着像现代化技术这样的工具是不可行的。

- Idris Mokhtarzada

---

请参见 https://dev59.com/9XA65IYBdhLWcg3wrgoa#4704613 了解当时的情况。 - bzlm

caniuse.com有一个非常有用的页面：http://caniuse.com/#feat=mpeg4 - Idris Mokhtarzada

Answer 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测试。注意事项：Android的默认浏览器（称为“Browser”）不列出对任何编解码器的支持，但我认为这取决于手机制造商来决定，我非常确定您可以保证将H.264作为硬件加速，因为该编解码器通常内置在移动处理器中。还有关于Firefox for Desktop，它将在今年晚些时候获得H.264支持。

编辑：上述支持矩阵已于2013年03月22日更新

---

因此，您需要支持的两种视频格式是WebM和H.264。但似乎H.264正在逐渐成为web视频的事实标准。

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

例如，可以查看Modernizer，让您编写：

if (!Modernizr.video)
{
    // Implement some Flash fallback
}

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

if (!Modernizr.video || (Modernizr.video && !Modernizr.video.h264))
{
    // Flash fallback here
}

- Sunday Ironfoot

Answer 2

不确定正则表达式，虽然我认为你不需要使用User Agent嗅探 - <video>元素旨在以多种格式包含对视频的引用，以便用户代理播放他们支持的内容。请参见Dive into HTML5's video章节，了解一个很好的例子。

Dive into HTML5还提供了一份HTML5视频浏览器支持列表。

- Paul D. Waite