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>

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

1 个答案: