HTML5 видео не воспроизводится на iOS и Android - PullRequest
Новая
       31

HTML5 видео не воспроизводится на iOS и Android

0 голосов
/ 03 мая 2019

Я не могу воспроизвести видео на устройствах iOS и Android. При использовании Safari Remote Debugging у меня возникает следующая проблема:

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

Резюме: Независимо от того, выберу я относительный или абсолютный путь, оба варианта не работают только на мобильных браузерах (Chrome, Safari) на устройствах iOS и Android.

1 Ответ

0 голосов
/ 05 мая 2019

Пытаетесь ли вы автоматически воспроизвести видео или возникает ошибка, когда вы нажимаете кнопку воспроизведения?

Если вы пытаетесь автоматически воспроизвести видео, многие браузеры больше не разрешают это, если видео имеет звуквключается при автоматическом воспроизведении.Можно отключить звук и затем автоматически воспроизвести видео. 

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