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

Question

I can't play my video on iOS and Android Devices. When using Safari Remote Debugging, i get the following issue:

Unhandled Promise Rejection: AbortError: The operation was aborted.

my html code

<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>

my JS Code

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()
})

Summary: Whether I take the relative or absolute path, both doesn't work only on mobile Browsers (Chrome, Safari) on iOS and Android Devices.

Answer 1

Are you trying to autoplay the video or is the error happening, when you are pressing the play button?

If you are trying to autoplay videos, many browsers will no longer allow that if the video has sound turned on when you autoplay it. It is possible to disable the audio and then autoplay the video.

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