HTML 5视频自动播放功能检测 [英] HTML 5 Video Auto Play Feature detection

问题描述

HTML 5视频播放（）方法，例如来自一个点击/点按。这可以。我想知道的是，是否有检测，如果浏览器拦截这种打法（）动作可靠的方式，当它不是用户生成的。

HTML 5 Video play() method is not supported on mobile unless the action is user generated, eg comes from a click/tap. This is fine. What I would like to know is, is there a reliable way to detect if the browser blocks this play() action, when it is not user generated.

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

For example on desktop in chrome it does not, but on Android it does.

具体我的问题是，我们需要知道它是否能自动播放广告时，我们初始化第三个广告模块。对于桌面浏览器总是可以做到这一点，但对于移动浏览器它不能。这最近成为一个问题，当移动浏览器（在iPad等iOS 8）开始履行的任何控件属性。这导致了这样一种情况：广告模块将删除控件时，浏览器会阻止播放事件，用户将没有本地控制，以实际启动的广告，因此视频。 （AD模块移除控制，以阻止你通过广告跳过）。

Specifically my problem is that we have a third ad module that requires to know whether it can auto play the ad when we initialize it. For desktop browsers it can always do this, but for mobile browsers it cannot. This recently became a problem when mobile browsers (ios 8 on ipad) started honouring the no controls attribute. Which led to a situation where the ad module would remove the controls, the browser would block the play event and the user would have no native controls to actually start the ad and thus the video. (The ad Module removes the controls to stop you skipping through the ad).

我真的想避免浏览器/平台通过用户代理嗅探，想一些事情更接近特征检测。

I really want to avoid browser / platform sniffing through the user agent and would like some thing more akin to feature detection.

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

My current best guess is to check for touch event feature, and assume touch means wont allow play from non user action, but I'm hoping there is something that removes this "best guess".

推荐答案

我相信这是一些可以使用 Modernizr的<解决/ A> JavaScript库，它是在HTML5和CSS3。

I believe this is something that can be solved using the Modernizr javascript library, which is used for feature detection in HTML5 and CSS3.

Modernizr的运行可用的功能的快速测试页面加载后加入班级给你页面的 HTML 元素实现这一目的。

Modernizr achieves this by adding classes to the HTML element of you page after running a quick test of the features available on the page load.

专为您自动播放的问题，我相信这个例子的http：// codePEN .IO / davidgenetic /笔/ FmHaD 演示如何实现检测。需要的JavaScript如下。

Specifically for your issue of AutoPlay, I believe this example http://codepen.io/davidgenetic/pen/FmHaD demonstrates how you can achieve detection. The javascript required is below.

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;
});

这篇关于HTML 5视频自动播放功能检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！