HTML5 视频无法在 iOS 和 Android 上播放

Question

我无法在 iOS 和 Android 设备上播放我的视频。使用 Safari 远程调试时，出现以下问题：

Unhandled Promise Rejection: AbortError: The operation was aborted.

我的html代码

<video id="video" class="absolute right-0 bottom-0 min-w-full min-h-full w-auto" controls autoplay>
   <source src="/path/to/video.mp4" type="video/mp4">
   <!-- the absolute path doesn't work too -->
   <source src="https://example.com/path/to/video.mp4" type="video/mp4"> 
</video>

<!-- this code doesn't work too -->
<video id="video" src="/path/to/video.mp4" type="video/mp4" class="absolute right-0 bottom-0 min-w-full min-h-full w-auto" controls autoplay></video>

我的 JS 代码

let video = document.getElementbyId('video');
const videoPromise = document.querySelector('video').play();
let video_cta = document.getElementbyId('video_cta');

//this doesn't fix my problem
if (videoPromise !== undefined) {
    videoPromise.then(_ => {
      video.play();
    })
    .catch(error => {
       console.log(error);
    })
}

//this code doesn't work too:
function fetchVideoAndPlay() {
    fetch('https://example.com/file.mp4')
    .then(response => response.blob())
    .then(blob => {
      video.srcObject = blob;
      return video.play();
    })
    .then(_ => {
      // Video playback started ;)
    })
    .catch(e => {
      // Video playback failed ;(
    })
}

//start video after click the button
video_cta.addEventListener('click' function() {
    video.play()
})

总结：无论我采用相对路径还是绝对路径，两者都不仅仅适用于 iOS 和 Android 设备上的移动浏览器（Chrome、Safari）。

Answer 1

当您按下播放按钮时，您是在尝试自动播放视频还是发生错误？

如果您尝试自动播放视频，如果视频在您自动播放时打开了声音，许多浏览器将不再允许这样做。可以禁用音频，然后自动播放视频。

<video id="video" controls autoplay>
   <source src="/path/to/video.mp4" type="video/mp4">
</video>