Question

我做了几个带视频背景的项目，在加载页面时自动播放，只在设备不是移动浏览器时加载（那些不接受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();}

这对大多数情况都适用，但我看到一些Blackberry设备仍在加载视频，即使这些是移动浏览器并且都不接受自动播放。

是否可以通过切换到Modernizr来检测是否可以自动播放，而不是通过jQuery检查？ jQuery方法是否具有Modernizr自动播放检测的任何优势？

Answer 1

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

Answer 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);
    */

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

Answer 3

Modernizr在视频自动播放测试中存在一些可靠性问题，如下所示：https://github.com/Modernizr/Modernizr/issues/1095

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

此方法适用于所有主流浏览器（桌面和移动设备），但Android＆lt; = 4.0和Windows Phone除外，它返回假阴性。

这是检测功能：

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

Answer 4

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

var p = video.play();

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

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

4 个答案: