使用Modernizr检测videoautoplay异常：安卓手机误判求助

这个问题我之前帮朋友排查过，主要是这几个原因导致检测结果不准：

• Modernizr的检测逻辑局限性
  早期Modernizr检测autoplay的方式比较简单：创建一个video元素并设置autoplay属性，然后判断浏览器是否允许这个属性存在，而不是真正验证视频能否自动播放。但安卓上的多数浏览器（比如Chrome）现在对autoplay有严格限制——就算你设置了autoplay属性，没有用户交互（比如点击）或者视频未静音的话，浏览器还是会阻止自动播放。Modernizr的旧检测逻辑没考虑这些政策，所以会误判为“支持”。

• 测试环境的特殊情况
  你在codepen上测试时，可能已经有过用户交互（比如打开codepen页面时的点击操作），或者codepen默认给视频加了muted属性，刚好满足了浏览器的autoplay条件，所以视频能自动播放，Modernizr就返回了支持的结果。但回到你自己的项目中，没有这些前置条件，自然就无法自动播放了。

• 浏览器autoplay政策的更新
  现在所有主流浏览器都遵循了媒体自动播放政策，核心规则是：只有视频静音、或者用户已经和页面产生交互（点击、触摸等），才能自动播放。Modernizr如果是旧版本，根本没适配这些新规则，检测结果自然不准确。

解决办法 #

• 手动验证实际播放能力
  不要完全依赖Modernizr，自己写一段测试代码：创建video元素，设置autoplay和muted（如果你的场景允许静音），然后监听play事件或者检查video.paused属性，看视频是否真的能自动播放。示例代码：

  const testVideo = document.createElement('video');
  testVideo.autoplay = true;
  testVideo.muted = true;
  testVideo.src = 'your-test-video.mp4';
  testVideo.addEventListener('play', () => {
    console.log('实际支持自动播放');
  });
  testVideo.addEventListener('pause', () => {
    console.log('实际不支持自动播放');
  });
  document.body.appendChild(testVideo);
  

• 升级Modernizr到最新版本
  新版本的Modernizr已经适配了现代浏览器的autoplay政策，检测逻辑更贴近实际播放场景。
• 做降级处理
  不管检测结果如何，都在页面上留一个播放按钮，当视频无法自动播放时，引导用户点击触发播放，提升用户体验。

内容的提问来源于stack exchange，提问作者susi87