iOS下用户交互后轮播视频无法非静音自动播放问题咨询

我有个带轮播组件的网页，轮播的不同幻灯片里都包含<video>元素。当视频所在幻灯片切换为活跃状态时，我会调用.play()方法播放该视频，并暂停其他所有视频。我清楚各浏览器的自动播放政策，也让用户与页面完成了交互（比如暂停/播放/取消首个视频的静音），但切换到后续视频时仍无法实现非静音自动播放，报错信息如下：

The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

补充观察：

• 仅iOS平台出现该问题，Android及桌面浏览器表现正常
• 手动播放并取消每个视频的静音后，再次切换到该视频即可正常非静音播放

iOS Safari的自动播放政策比其他平台更严格：用户的交互权限是和单个媒体元素绑定的，并非全局生效。你首次交互仅授权了第一个视频，后续视频未经过用户直接交互，即便页面有过交互记录，也无法获得非静音播放的权限。

在用户首次与页面交互（比如点击屏幕、触摸操作）时，给所有视频做一次"预授权"操作：先静音播放后暂停，让每个视频都获取到用户交互的播放权限，后续轮播切换时就能正常非静音播放了。

具体实现代码 #

var vid1 = document.getElementById("video1");
var vid2 = document.getElementById("video2");
var vid3 = document.getElementById("video3");
const allVideos = [vid1, vid2, vid3];
let hasGrantedPermission = false;

// 监听首次用户交互，给所有视频预授权
function handleUserInteraction() {
  if (hasGrantedPermission) return;
  
  allVideos.forEach(video => {
    video.muted = true;
    video.play()
      .then(() => {
        video.pause();
        video.muted = false;
        video.currentTime = 0;
      })
      .catch(err => console.log("预授权失败", err));
  });
  
  hasGrantedPermission = true;
  // 移除监听，避免重复执行
  document.removeEventListener("click", handleUserInteraction);
  document.removeEventListener("touchstart", handleUserInteraction);
}

// 绑定交互监听
document.addEventListener("click", handleUserInteraction);
document.addEventListener("touchstart", handleUserInteraction);

carousel.on("slideChange", function () {
  // 暂停所有视频并重置播放进度
  allVideos.forEach(video => {
    video.pause();
    video.currentTime = 0;
  });

  // 获取当前激活的视频
  let currentVideo;
  switch(carousel.activeIndex) {
    case 0: currentVideo = vid1; break;
    case 1: currentVideo = vid2; break;
    case 2: currentVideo = vid3; break;
  }

  currentVideo.volume = 1;
  currentVideo.play()
    .catch((e) => {
      console.error(`播放失败: ${e.message}`);
      currentVideo.muted = true;
      return currentVideo.play().catch(err => console.error("再次播放失败", err.message));
    });
});

额外优化建议 #

• 如果轮播切换不需要视频从头播放，可以移除currentVideo.currentTime = 0的逻辑，提升切换流畅度
• 给所有<video>标签添加playsinline属性，避免iOS上视频自动全屏播放

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