Question

我一直在玩HTML5视频标签，当你不能支持编解码器时，我很困惑如何最好地降级？

对于那些不支持视频标签的旧浏览器（或IE）来说，这很简单：

<video width="320" height="240">
  <source src="vid.ogv" type='video/ogg'>
  <source src="vid.mp4" type='video/mp4'>
  <object>
  <!-- Embed Flash video here to play mp4 -->
  <object>
</video>

它们将落空并将收到Flash版本（或其他替代品，如图像！）

浏览器何时支持标签但不支持编解码器 - 例如FireFox 3.5 - 我无法支持OGG（可能因为我已经拥有大量的H.264档案）：

<video width="320" height="240">
  <source src="vid.mp4" type='video/mp4'>
  <object>
  <!-- Embed Flash video here to play mp4 -->
  <object>
</video>

我在FireFox 3.5中获得的只是一个带有x的灰色框。对于FireFox用户来说，这并不是一个很好的用户体验！我只能想到使用JavaScript来检查FF3.5并更改DOM！这真的是一个又一个糟糕的老人！ ...或者是否有一些我错过的规范，就像'novideo'标签一样？

Answer 1

优雅降级的一个重要部分是查询功能......深入了解HTML5是一个很好的阅读...具体来说，请看video section。相关代码：

function supports_h264_baseline_video() {
  if (!supports_video()) { return false; }
  var v = document.createElement("video");
  return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

注意：这确实需要DOM检查，但是对于功能而不是浏览器签名。这是正确的事情： - ）

一旦您知道浏览器是否支持，您就可以根据需要显示视频标签或拉出灯箱或重定向。

Answer 2

解决这个问题的一个非常好的方法是使用modernizer js库。它非常易于使用和快速。它可以在用户的浏览器中检查HTML5功能。访问此网站：http://www.modernizr.com/

Answer 3

Video for Everybody的test page表示Firefox 3.5只能播放OGG。如果您真的不想添加OGG，可能需要添加Flash版本。 VfE也不使用JavaScript，因此可能值得研究。

HTML5视频和降级？

3 个答案: