Метод mediaElement.play () возвращает обещание, которое отклонено

Question

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

Unhandled Promise Rejection: AbortError: The operation was aborted.

Я нахожу это решение: https://developers.google.com/web/updates/2017/06/play-request-was-interrupted

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

<video muted id="video" class="absolute right-0 bottom-0 min-w-full min-h-full w-auto" controls>
    <source src="/path/to/video.mp4" type="video/mp4">
</video>

let video = document.getElementbyId('video');
let video_cta = document.getElementbyId('video_cta');

//this doesn't fix my problem
var videoPromise = video.play();

if (videoPromise != undefined) {
    videoPromise.then(function(_) {
      video.pause();
      video.currentTime = 0;
  });
}

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

Answer 1

• Прежде всего, необходим атрибут autoplay.

  <video src='...' controls muted автозапуск ></video>

• Когда videoPromise является ссылкой на видео и вызовом метода .play(), оно будет работать в Обещании.

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

• Также есть зависимость в OP-коде .getElementById() был пропущен:

  let video = document.getElement б yId('video');
let video_cta = document.getElement б yId('video_cta');

• В статье Google , представленной в OP, также упоминается, что тег <source> не будет правильно обрабатывать reject:

  Используйте

  <video src='...'></video>

  Не

  <video> <source src='...'> </video>

• Это должно остановить сообщение об ошибке:

  Unhandled Promise Rejection: AbortError: The operation was aborted.

Демонстрация 1 использует Promise и метод .then(). Демо 2 использует async/await. async function завернут в IIFE ( I немедленно I nvoked F unction E xpression )

Демо 1

Promise

let cta = document.querySelector('#cta');

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

if (videoPromise != undefined) {
  videoPromise.then(_ => {
video.play();
  });
}

cta.addEventListener('click', function() {
  video.play();
});

<video src="https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4" id="video" class="absolute right-0 bottom-0 min-w-full min-h-full w-auto" controls autoplay muted></video>
<button id='cta'>CTA</button>

Демо 2

async/await

let cta = document.querySelector('#cta');

const video = document.querySelector('video');

(function() {
  playMedia();
})();

async function playMedia() {
  try {
    await video.play();
  } catch (err) {}
}

cta.addEventListener('click', function() {
  video.play();
});

<video src="https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4" id="video" class="absolute right-0 bottom-0 min-w-full min-h-full w-auto" controls autoplay muted></video>
<button id='cta'>CTA</button>