我有一个简单的网页，在一个轮播的不同幻灯片中有多个<video>元素。当一个视频在轮播的活动幻灯片中时，我会.play()接收该视频，并.pause()接收所有其他视频。我希望视频在静音状态下自动播放，并完全了解每个浏览器的自动播放策略。然而，即使在用户已经与网页交互（通过暂停/播放/取消静音播放的第一视频）之后，任何后续的视频也将由于以下错误而不能从静音播放：

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

在用户与页面交互后，使视频播放静音的正确方法是什么？
我创建了一个codesandbox to reproduce the issue。

var vid1 = document.getElementById("video1");
      var vid2 = document.getElementById("video2");
      var vid3 = document.getElementById("video3");

      carousel.on("slideChange", function () {
        vid1.currentTime = 0;
        vid2.currentTime = 0;
        vid3.currentTime = 0;
        vid1.pause();
        vid2.pause();
        vid3.pause();

        if (carousel.activeIndex === 0) {
          var currentVideo = vid1;
          var prevVideo = vid3;
        } else if (carousel.activeIndex === 1) {
          var currentVideo = vid2;
          var prevVideo = vid1;
        } else {
          var currentVideo = vid3;
          var prevVideo = vid2;
        }

        currentVideo.volume = 1;
        currentVideo
          .play()
          .catch((e) => {
            console.error(`Error playing: ${e.message}`);
            currentVideo.muted = true;
            return currentVideo
              .play()
              .catch((err) => console.error("Error caught again", err.message));
          })
      });

一些其他观察结果：

• 这只发生在iOS上。Android和桌面浏览器按预期工作。
• 在我播放和unumte每个视频后，当视频被重新访问时，它将正确地播放静音