如何检测是否支持 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 上，自动播放已禁用.

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 以来可用的异步测试，因此您必须使用以下 .on() 语法进行测试:

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?编辑=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屋！