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

HTML 5 Video Auto Play Feature detection

本文关键字：功能 检测 自动播放 视频 HTML      更新时间：2023-09-26

HTML 5 视频播放（）方法在移动设备上不受支持，除非操作是用户生成的，例如来自单击/点击。这很好。我想知道的是，当它不是用户生成的时，是否有一种可靠的方法来检测浏览器是否阻止了此 play（） 操作。

例如，在Chrome的桌面上它没有，但在Android上它有。

具体来说，我的问题是我们有第三个广告模块，需要知道当我们初始化广告时它是否可以自动播放广告。对于桌面浏览器，它总是可以做到这一点，但对于移动浏览器，它不能。最近，当移动浏览器（ipad 上的 ios 8）开始接受 no controls 属性时，这成为一个问题。这导致了这样一种情况：广告模块将删除控件，浏览器将阻止播放事件，并且用户将没有本机控件来实际启动广告，从而启动视频。（广告模块会移除控件以阻止您跳过广告）。

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

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

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

Modernizr 通过在对页面加载中可用的功能运行快速测试后，将类添加到页面的 HTML 元素来实现此目的。

特别是针对您的自动播放问题，我相信此示例 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;
});
相关文章：