// ===== 移动端视频自动播放兼容方案 =====

async function autoPlayVideo(videoEl) {
  // ① 先尝试静音自动播放
  videoEl.muted = true;
  videoEl.playsInline = true;  // iOS 内联播放（不全屏）

  try {
    await videoEl.play();
    console.log('静音自动播放成功');

    // 用户交互后取消静音
    document.addEventListener('touchend', () => {
      videoEl.muted = false;
    }, { once: true });

  } catch (err) {
    console.log('自动播放被阻止:', err.message);

    // ② 降级：等待用户首次交互
    document.addEventListener('touchend', () => {
      videoEl.play();
    }, { once: true });
  }
}

// ③ 微信环境特殊处理
function autoPlayInWeChat(videoEl) {
  if (typeof WeixinJSBridge !== 'undefined') {
    WeixinJSBridge.invoke('getNetworkType', {}, () => {
      videoEl.play();
    });
  } else {
    document.addEventListener('WeixinJSBridgeReady', () => {
      videoEl.play();
    }, false);
  }
}

▶ 运行代码

<!-- ===== 移动端 Video 完整写法 ===== -->
<video
  src="video.mp4"
  poster="cover.jpg"
  controls
  playsinline
  webkit-playsinline
  x5-video-player-type="h5"
  x5-video-player-fullscreen="true"
  x5-video-orientation="landscape"
  preload="metadata"
  loop
  style="width:100%; object-fit:contain;"
>
  您的浏览器不支持 video 标签
</video>

// ===== 移动端音频播放 =====

// ① 预加载音频池（解决播放延迟）
const audioPool = {};
function preloadAudio(name, src) {
  const audio = new Audio();
  audio.src = src;
  audio.preload = 'auto';
  audio.load();
  audioPool[name] = audio;
}

// ② 播放音效（短音频）
function playSound(name) {
  const audio = audioPool[name];
  if (audio) {
    audio.currentTime = 0;  // 重置到开头
    audio.play().catch(() => {});  // 忽略自动播放限制（静默失败）
  }
}

// ③ 微信环境音频自动播放
document.addEventListener('WeixinJSBridgeReady', () => {
  // 预加载背景音乐
  const bgm = new Audio('bgm.mp3');
  bgm.loop = true;
  bgm.play();
});

// ④ 音频上下文恢复（iOS）
// iOS Safari 在页面不可见时会暂停 Web Audio API
document.addEventListener('visibilitychange', () => {
  if (!document.hidden && audioContext?.state === 'suspended') {
    audioContext.resume();
  }
});

▶ 运行代码