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

4 回答

• 1

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

  回复于 2024-05-02T04:11:06+08:00
• 1

  如果您的问题是准确地检测到浏览器类型和设备类型（可能会在您的代码示例中给出如何执行它），那么使用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);
      */
  

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

  回复于 2024-05-02T04:11:06+08:00
• 0

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

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

  此方法适用于所有主流浏览器（桌面和移动设备），但Android <= 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

  回复于 2024-05-02T04:11:06+08:00
• 2

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

  var p = video.play();
  
  if (p) {
    p.catch(function() {
      //initiate fallback action
    });
  }
  

  回复于 2024-05-02T04:11:06+08:00