如何检查是否支持HTML5视频？

Question

有没有JavaScript或其他方式来检查HTML5视频支持？

- Forelic

Answer 1

使用：

<script>
alert(!!document.createElement('video').canPlayType);
</script>

如果它警示为真，那就说明你的浏览器支持HTML5视频标签

这里是检查HTML5浏览器兼容性的URL http://www.html5test.com/ 在浏览器中打开该URL，测试一下你的浏览器对HTML5的支持情况。

- sweets-BlingBling

---

IE11返回true，但无法使用videojs播放hls流/视频。具备Flash回退选项不是一个选择。有什么想法吗？ - D. Dan

Answer 2

稍微完善一下BlingBling的答案：抱歉，我还不能发表评论 :(

var isHTML5Video = (typeof(document.createElement('video').canPlayType) != 'undefined') ? true : false;

甚至更简单（感谢digitalBath-我总是看不清楚树木:)）

var isHTML5Video = (typeof(document.createElement('video').canPlayType) != 'undefined');

- Anthony De Souza

---

就内容而言，“{boolean_expression} ? true : false”与“{boolean_expression}”并没有任何不同。 - digitalbath

只是好奇这行代码在调试页面时是否会生成JavaScript错误，如果浏览器实际上无法解析“document.createElement('video').canPlayType”，因为它太旧了无法支持HTML5。我猜它总是会为变量生成“false”，但它会因此而噎住吗？ - Randy

Answer 3

请看 Modernizer：http://www.modernizr.com/ 在这里，您可以轻松地获得API，就像下面这样：

if (Modernizr.video) {
  // html5 video available
}

但还有更多功能和更适合的API。

- Andreas

Answer 4

我使用了@sweets-BlingBling的答案的略微变化，如下所示：

var hasVideo = !!document.createElement('video').canPlayType &&
               !!document.createElement('video').canPlayType('video/mp4')

这也检查媒体类型'video/mp4'是否可播放（如果您的视频具有其他媒体类型，如'video/webm'或'video/ogg'，请更改此项）。如果视频肯定无法播放，则该方法返回一个空字符串，否则返回'probably'或'maybe'（实际上，在大多数情况下，这两个结果都表示yes）。我不得不为Chrome 41（似乎在Google爬虫中使用）添加此内容，因为它具有canPlayType，但无法播放mp4视频。

- Remigius Stalder

Answer 5

一种方法是嵌入html5标签，然后将备用视频播放器放置在视频标签中作为“回退”。如果浏览器无法识别该标签，则会显示回退。这不是严格意义上的“检测”html5视频支持，但可能适合您的需求。

<video src='...'>
    <embed flash player instead>
</video>

- GrandmasterB