前端开发中如何在不同浏览器中实现自动播放的兼容性？

前端虐我千万遍，我仍待它如初恋。前端开发中，各种坑多如牛毛，刚好今天又踩一个。

本次项目中需要开发一个音乐播放器，关于音频播放在众多安卓手机上测试均无问题，上IOS测试就完蛋了。

网上常见自动播放方法基本都是在页面载入时候监听 touch 事件，触发事件在自动播放，此方法不适用本次项目需求。

<div class="vidbg-container">
  <video id="bg-video" loop playsinline muted style="width: auto; height: 580px; opacity: 1;">
    <source src="/wp-content/themes/ripro-v2-child/static/picture/huitew.mp4" type="video/mp4">
    <source src="" type="video/webm">
  </video>
  <div class="vidbg-overlay"></div>
</div>

JQ代码

<script>
  // 获取视频元素
  const video = document.getElementById('bg-video');

  // 检测是否为 iOS 设备上的 Safari 浏览器
  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

  // 如果在 iOS 设备上的 Safari 浏览器中，则添加 `playsinline` 属性
  if (isIOS && isSafari) {
    video.setAttribute('playsinline', '');
  }

  // 添加 `muted` 属性以确保静音播放
  video.setAttribute('muted', '');

  // 播放视频
  video.play();
</script>