检测支持 HTML5 视频自动播放的浏览器的方法答案

【问题标题】：Method to detect browsers supporting HTML5 video autoplay检测支持 HTML5 视频自动播放的浏览器的方法
【发布时间】：2014-09-13 12:12:14
【问题描述】：

我已经做了几个带有视频背景的项目，它们在加载页面时自动播放，并且仅在设备不是移动浏览器时加载（那些不接受 HTML5 视频的自动播放属性，在这种情况下只是一个图像已加载）。

为了检测这一点，我使用了 jQuery，如下所示：

var isMobile = {
   Android: function() {        return navigator.userAgent.match(/Android/i);    },
   BlackBerry: function() {        return navigator.userAgent.match(/BlackBerry/i);    },
   iOS: function() {        return navigator.userAgent.match(/iPhone|iPad|iPod/i);    },
   Opera: function() {       return navigator.userAgent.match(/Opera Mini/i);    },
   Windows: function() {        return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);    },
   any: function() {        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());    }};

$(document).ready(function(){      
   if( isMobile.any() ) {
      $('.backgroundVideoC').append("<img alt= src='media/germannoload.jpg'/>");} 
   else{ 
      $('.backgroundVideoC').append("<video preload='auto' muted class='indexVideo' id='indexVideo'><source src='media/interactvid.webm' type='video/webm'><source src='media/interactvid.mp4' type='video/mp4'></video>");
      $('#indexVideo').get(0).pause();}

这在大多数情况下都可以正常工作，但我发现某些黑莓设备仍会加载视频，即使它们是移动浏览器且不接受自动播放。

是否推荐切换到 Modernizr 来检测是否自动播放可用，而不是通过 jQuery 进行检查？ jQuery 方法与 Modernizr 自动播放检测相比有什么优势吗？

【问题讨论】：

标签： jquery html html5-video modernizr

【解决方案1】：

Modernizr v 3（目前在 http://v3.modernizr.com/download 预发布）具有视频自动播放检测功能。

【讨论】：

希望快点发布
它已发布。它只是不是正式版本。现在唯一阻止它的是网站重新设计
我刚刚尝试了 Modernizr 3 自动播放检测，它在从 FF 打开时检测到没有自动播放，它承认自动播放...有什么方法可以报告这个吗？
我刚刚报道了Github。视频自动播放仅适用于 Opera。在 FF/IE/Chrome 上存在误报
我认为 Modernizr 目前无法检测到自动播放。它检测到的是对视频元素的自动播放属性的支持。浏览器是否尊重属性设置是另一个问题（我认为 Modernizr 在撰写本文时无法回答）。

【解决方案2】：

如果您的问题是准确地检测浏览器类型和设备类型，可能会在您的代码示例中给出您将如何执行此操作，那么使用 UA-Parser.js 之类的工具（其中免费）。我已经将它用于我的网站，它在检测浏览器类型、移动设备等方面非常出色。我使用它是这样的：

    var parser = new UAParser();
    parser.setUA(navigator.userAgent);
    var result = parser.getResult();

    /*
        alert(result.browser.name); 
        alert(result.browser.version);
        alert(result.device.model);
        alert(result.device.type);
        alert(result.device.vendor);
        alert(result.os.name + ' - ' + result.os.version);
    */

几乎没有它无法准确检测到的浏览器或设备类型（至少根据我的经验）。

【讨论】：

我正要检查这个方法，非常感谢Randy。

【解决方案3】：

Modernizr 在视频自动播放测试中存在一些可靠性问题，此处指出：https://github.com/Modernizr/Modernizr/issues/1095

您可以通过检查视频元素的暂停状态在以编程方式播放后是否发生变化来检测视频自动播放支持。仅此一项就可能在某些移动浏览器中返回误报，因此应添加 Promise 检查以涵盖这些情况。

此方法适用于所有主要浏览器（桌面和移动），但 Android

这里是检测函数：

var supports_video_autoplay = function(callback) {

  if (typeof callback !== "function") return false;

  var v = document.createElement("video");
  v.paused = true;
  var p = "play" in v && v.play();

  callback(!v.paused || ("Promise" in window && p instanceof Promise));

};

用法：

supports_video_autoplay(function(supported) {
  if (supported) {
    // video autoplay supported!
  } else {
    // no video autoplay support :(
  }
});

现场测试：https://codepen.io/paulorely/pen/QveEGy

【讨论】：

【解决方案4】：

调用video.play() 会生成一个在非IE 浏览器中会被拒绝的promise。使用类似的东西：

var p = video.play();

if (p) {
  p.catch(function() {
    //initiate fallback action
  });
}

【讨论】：