iPhone端HTML Video无法正常播放，如何兼顾桌面端自动播放与iOS兼容？

嘿，这个问题我太熟了——iOS Safari对视频自动播放的限制确实比其他平台严格不少，不过完全可以做到桌面端自动播放、iOS端正常播放两不误，给你几个靠谱的方案，按需选择：

方案1：设备检测动态控制Autoplay属性 #

通过JavaScript判断是否为iOS设备，针对性地移除autoplay属性，让iOS用户手动点击播放，桌面端则保留自动播放逻辑，完全不影响原有体验。

// 检测iOS设备（兼容iPad/iPhone/iPod）
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
const video = document.querySelector('.image1 video');

if (isIOS) {
  // iOS端移除autoplay，保留controls让用户手动触发播放
  video.removeAttribute('autoplay');
} else {
  // 非iOS设备保持自动播放
  video.setAttribute('autoplay', 'true');
}

方案2：利用iOS静音自动播放规则（推荐） #

从iOS 10开始，Safari允许静音且内联播放的视频自动播放。如果你的视频适合静音展示（比如背景视频），可以给video标签加上muted和playsinline属性，这样桌面端自动播放带声音，iOS端自动静音播放，用户点击控件后可开启声音。

<div class="image1">
  <video autoplay="true" controls="true" muted playsinline>
    <source src="your-video-source.mp4" type="video/mp4">
    <!-- 兼容不支持video的浏览器的提示 -->
    你的浏览器不支持视频播放，请升级浏览器。
  </video>
</div>

小贴士：playsinline属性是必须的，它能让视频在页面内播放而不是强制全屏，符合iOS的播放规则。

方案3：监听用户交互触发播放 #

如果视频必须带声音播放，又不想让iOS用户手动点视频控件，可以监听页面的首次用户交互（比如点击、触摸），触发视频播放。桌面端依然保持自动播放，iOS端用户只要点击页面任意区域就能启动视频。

let videoInitiated = false;

// 监听页面的点击/触摸事件
document.addEventListener('click', playVideoOnInteraction);
document.addEventListener('touchstart', playVideoOnInteraction);

function playVideoOnInteraction() {
  if (!videoInitiated) {
    const video = document.querySelector('.image1 video');
    // 尝试播放视频
    video.play().then(() => {
      videoInitiated = true;
      // 播放成功后移除监听，避免重复触发
      document.removeEventListener('click', playVideoOnInteraction);
      document.removeEventListener('touchstart', playVideoOnInteraction);
    }).catch(err => {
      console.log('播放失败:', err);
    });
  }
}

以上三个方案都能完美解决你的问题，根据你的视频场景选就行～

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