iOS端播放HTML5 Canvas静音视频时如何避免Spotify后台音频中断

这个问题我之前帮不少开发者排查过，本质是iOS的媒体会话机制在搞鬼：哪怕你的视频是静音状态，系统仍会把它识别为一个新的媒体播放会话，直接抢占后台运行的音频（比如Spotify）。以下是几个经过实践验证的解决方案，按推荐优先级排序：

1. 使用无音频轨道的视频文件（最优解） #

如果条件允许，直接把广告视频处理成完全不含音频轨道的版本，而不是仅通过代码设置静音。

iOS系统对完全没有音频的视频，不会初始化媒体会话，自然也就不会干扰后台音频。你可以用FFmpeg这类工具移除视频的音频轨道：

ffmpeg -i original-video.mp4 -an -c:v copy video-without-audio.mp4

之后在Canvas中使用这个无音频版本的视频，配合必要属性即可：

<video id="canvasVideo" autoplay playsinline webkit-playsinline>
  <source src="video-without-audio.mp4" type="video/mp4">
</video>

如果是把视频帧渲染到Canvas，正常编写绘制逻辑就行，不需要额外处理。

2. 正确配置视频的inline播放属性 #

如果没法重新处理视频文件，务必确保视频标签的属性完全符合iOS的inline播放要求：

• 同时设置playsinline和webkit-playsinline（兼容老版本iOS）
• 明确标记muted="true"和autoplay="true"
• 绝对避免视频触发全屏播放（全屏会强制启动高优先级媒体会话）

代码示例：

<video id="canvasVideo" muted autoplay playsinline webkit-playsinline preload="auto">
  <source src="your-video.mp4" type="video/mp4">
</video>

然后在JavaScript中，确保视频在Canvas内渲染，而非默认的全屏播放：

const canvas = document.getElementById('adCanvas');
const ctx = canvas.getContext('2d');
const video = document.getElementById('canvasVideo');

video.addEventListener('play', () => {
  function renderFrame() {
    if (!video.paused && !video.ended) {
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      requestAnimationFrame(renderFrame);
    }
  }
  renderFrame();
});

这个方法的核心是让视频在页面内（inline）播放，不调用系统全屏播放器，从而降低媒体会话的优先级。

3. 利用AudioContext规避媒体会话抢占（适配iOS 14+） #

iOS 14及以上版本中，可以初始化一个ambient类别的音频上下文，让系统认为已有活跃的低优先级音频会话，避免静音视频触发新的会话抢占：

// 初始化一个无声的音频上下文
const audioContext = new (window.AudioContext || window.webkitAudioContext)();

if (audioContext.sinkId) {
  // 部分浏览器支持直接设置无输出的sink
  audioContext.setSinkId({ type: 'none' }).then(() => {
    audioContext.resume();
    // 启动视频播放
    document.getElementById('canvasVideo').play();
  });
} else {
  // 兼容旧版本，创建一个瞬间停止的无声音频源
  const oscillator = audioContext.createOscillator();
  oscillator.frequency.setValueAtTime(0, audioContext.currentTime);
  oscillator.connect(audioContext.destination);
  oscillator.start();
  oscillator.stop(audioContext.currentTime + 0.1);
  audioContext.resume().then(() => {
    document.getElementById('canvasVideo').play();
  });
}

注意：这个方法需要配合视频的muted和playsinline属性使用，否则仍可能触发会话抢占。

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