使用autoplay属性后Edge浏览器中HTML5视频仍无法自动播放

我之前也碰到过Edge里HTML5视频自动播放失效的情况，结合你提供的信息，给你几个针对性的排查和解决方法：

• 修正playsinline属性的拼写：你代码里写的plays-inline是错误的写法，标准HTML5属性是playsinline（没有连字符）。Edge对标准属性的校验比较严格，这个小错误可能直接导致自动播放逻辑不生效。修正后的代码应该是：

  <video id="video" class="intro__video" src="path/to/video.mp4" muted autoplay loop preload="auto" playsinline></video>
  

• 确认视频编码参数符合Edge的兼容要求：虽然你用了h.264编码，但Edge对h.264的Profile和Level有特定要求，推荐使用Baseline或Main Profile，Level不超过4.1。你可以用FFmpeg工具查看视频的编码细节：

  ffprobe -v error -show_entries stream=profile,level -of default=noprint_wrappers=1:nokey=1 path/to/video.mp4
  

  如果参数不符合，重新编码视频应该能解决问题。

• 用JavaScript兜底触发播放：Edge的自动播放政策有时候会比Chrome更严格，即使视频静音，也可能需要用户交互上下文才能触发。你可以尝试在页面加载完成后主动调用播放，或者监听用户的第一次交互来触发：

  document.addEventListener('DOMContentLoaded', () => {
    const videoEl = document.getElementById('video');
    // 先尝试自动播放，捕获可能的错误
    videoEl.play().catch(() => {
      // 若自动播放失败，监听用户第一次点击页面的事件来触发播放
      document.addEventListener('click', () => {
        videoEl.play();
      }, { once: true });
    });
  });
  

  这个方案的好处是，只要用户有任何点击操作（哪怕是点击页面空白处），就能触发视频播放，同时保留了无交互时自动播放的可能性。

• 检查用户端的Edge自动播放设置：别忘了提醒用户检查自己的Edge浏览器设置——有些用户可能手动关闭了自动播放功能。路径是：Edge设置 → 隐私、搜索和服务 → 网站权限 → 媒体自动播放，确保设置为「允许所有媒体自动播放」或者「仅允许静音媒体自动播放」（你的视频是静音的，后者也适用）。

另外，你提到W3School的示例能正常播放，可以对比下示例视频的编码参数和属性设置，大概率是你的视频在容器格式或编码细节上和示例有差异，调整后应该能兼容Edge。

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