javascript - HTML 5 视频自动播放功能检测

Question

HTML 5 Video play() 方法在移动设备上不受支持，除非操作是用户生成的，例如来自点击/点击。这可以。我想知道的是，是否有一种可靠的方法来检测浏览器是否阻止了这个 play() 操作，而不是用户生成的。

例如在 chrome 的桌面上它不会，但在 Android 上它会。

特别是我的问题是我们有第三个广告模块需要知道它是否可以在我们初始化时自动播放广告。对于桌面浏览器，它始终可以执行此操作，但对于移动浏览器，则不能。当移动浏览器(ipad 上的 ios 8)开始支持 no controls 属性时，这最近成为一个问题。这导致广告模块会删除控件，浏览器会阻止播放事件，用户将没有本地控件来实际启动广告和视频。 (广告模块删除了阻止您跳过广告的控件)。

我真的很想避免浏览器/平台通过用户代理进行嗅探，并且想要一些更类似于功能检测的东西。

我目前的最佳猜测是检查触摸事件功能，并假设触摸意味着不允许非用户操作播放，但我希望有一些东西可以消除这个“最佳猜测”。

Answer 1

我相信这可以使用 Modernizr 来解决。 javascript 库，用于 HTML5 和 CSS3 中的特征检测。

Modernizr 通过在页面加载时运行可用功能的快速测试后向页面的 HTML 元素添加类来实现这一点。

专门针对你的AutoPlay问题，相信这个例子http://codepen.io/davidgenetic/pen/FmHaD演示如何实现检测。所需的 javascript 如下。

Modernizr.addTest('autoplay', function(){

    // Audio file data URIs from comments in
    // [this gist](https://gist.github.com/westonruter/253174)
    // via [mudcube](https://github.com/mudcube)
    var mp3 = 'somesong.mp3';

    try {
        var audio = new Audio();
        var src = audio.canPlayType('audio/ogg') ? ogg : mp3;
        audio.autoplay = true;
        audio.volume = 0;

        // this will only be triggered if autoplay works
        audio.addEventListener('play', function() {
            Modernizr.autoplay = true;
          // is there a better way to re-evaluate the html classes added by Modernizr?
          var root = document.getElementsByTagName('html')[0];
          root.classList.remove('no-autoplay');
          root.classList.add('autoplay');

          // or if you're using jQuery:
          // $('html').toggleClass('no-autoplay autoplay');
        }, false);

        audio.src = src;
    } catch(e) {
        console.log('[AUTOPLAY-ERROR]', e);
    }

    return false;
});