Amazon s3 视频无法在 Iphone 上播放

Question

我有一个反应网站，在主页上我使用视频标签来播放视频。在 Android 浏览器上，视频正在播放，但在 Iphone 浏览器上，视频未播放，并且来自浏览器的 s3 调用未显示在来自 iPhone 的网络调用中，我已使用 browserstack iPhone 模拟器进行了检查。下面是我的代码。

<video
    ref={videoRef}
    playsInline={true}
    controls={false}
    className={style.videoPlayer}
    loop={true}
    muted={true}
    onLoadedData={() => {
        const promise = videoRef.current.play();
        if (promise !== undefined) {
           promise
             .then(() => {
                videoRef.current.play();
              })
              .catch((err) => {
                videoRef.current.muted();
              });
          }
        }}
      >
       <source
         src="https://ibeng.s3.ap-south-1.amazonaws.com/ibEngHeroVideo+(1).mp4"
         type="video/mp4"
         />
          Your browser does not support the video tag.
      </video>

请帮我解决这个问题。

Answer 1

我认为你应该将 onLoadData 替换为 onClick，因为 IOS 设备/IOS 浏览器需要交互才能播放视频。他们不允许视频自动播放。

IOS有严格的自动播放政策，请查看他们的webkit页面。

妥善处理这个承诺

 const video = videoRef.current;
    if (video.paused) {
      video.play().catch((err) => {
        console.error("Autoplay error:", err);
      });
    } else {
      video.pause();
    }