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

HTML 5移动设备不支持视频播放（）方法，除非操作是用户生成的，例如来自点击/点击。这可以。我想知道的是，有没有一种可靠的方法来检测浏览器是否阻止了这种play（）操作，而不是用户生成的。HTML 5视频自动播放功能检测

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

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

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

我目前最好的猜测是检查触摸事件的特征，并承担触摸意味着不会允许来自非用户的动作戏，但我希望有东西，删除此“最佳猜测”。

来源

2014-11-13 Ian Ellis

我相信这一点是可以使用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; 
});

来源

2014-11-14 00:28:11

有趣的解决方案。我可能会写一个类似的测试，使用视频元素。在这一点上，我不确定是否值得等待加载视频文件（不过很小）来确定这个额外的开销，但它回答了这个问题，所以谢谢！ –

请参阅http://stackoverflow.com/questions/5472938/does-ie9-support-console-log-and-is-it-a-real-function关于IE的控制台问题;） –

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

回答

相关问题