如何检测HTML5自动播放属性是否受支持？ [英] How do I detect if the HTML5 autoplay attribute is supported?

问题描述

如何最好地检测浏览器的HTML5视频元素是否支持自动播放？

How do I best detect whether a browser's HTML5 video element supports autoplay?

例如，在当前的iOS Safari中， autoplay is is禁用。

On current iOS Safari, for example, autoplay is disabled.

更新：我现在设计网页的方式可以运行，而不管是否支持自动播放。现在当页面加载时，会显示一个初始化视频。在iPad上，向用户显示一个大的播放按钮。一旦播放被触发，视频就被隐藏起来。之后，可以通过JavaScript控制视频播放器的播放，这是我实际上需要。

Update: I now designed the web page in such a way that it works irrespective of whether autoplay is supported. Now when the page is loaded an initialization video is shown. On an iPad, the user is presented with a big play button. Once playback has been triggered, the video is hidden. Afterwards, playback of the video player can be controlled from JavaScript, which is what I actually need.

推荐答案

晚会有点迟，但接受的解决方案看起来已经过时了：Modernizr现在已经实现了这个功能， https://github.com/Modernizr/Modernizr/blob /master/feature-detects/video/autoplay.js

A little late to the party, but the accepted solution seems outdated: Modernizr now has implemented this feature, see https://github.com/Modernizr/Modernizr/blob/master/feature-detects/video/autoplay.js

包含与此处发布的其他解决方案类似的窍门，但只要浏览器不揭露此功能的可用性，这似乎是现在的最佳解决方案。

Contains similar hacks to the other solutions posted here though, but as long as browsers don't expose availabilty of this feature, this seems to be the best solution for now.

请注意，这是自Modernizr 3以来的异步测试，因此您必须使用以下<
$ b

Note that this an async test available since Modernizr 3, so you have to use the following .on() syntax for your test:

Modernizr.on('videoautoplay', function(result){
  if(result) {
    alert('video autoplay is supported');
  }  else {
    alert('video autplay is NOT supported');
  }
});

请亲自看看： http://codepen.io/anon/pen/VYoWWY?editors=001

以上样本包括带有'videoautplay'功能检测的Modernizr 3（ http://v3.modernizr.com/download /＃ - videoautoplay ）。

The above sample includes Modernizr 3 with the 'videoautplay' feature detection (http://v3.modernizr.com/download/#-videoautoplay).

这篇关于如何检测HTML5自动播放属性是否受支持？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！