HTMLMediaElement: метод play()

Метод HTMLMediaElement play() пытается начать воспроизведение медиаданных. Он возвращает Promise, который разрешается, когда воспроизведение успешно начато.

Если начало воспроизведения не удается по какой-либо причине, например, из-за проблем с разрешениями, обещание отклоняется.

Нет.

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

Обработчик отклонения обещания вызывается с объектом DOMException, переданным в качестве единственного входного параметра (в отличие от традиционного исключения, которое выбрасывается). Возможные ошибки включают:

NotAllowedError DOMException

Возникает, если пользовательский агент (браузер) или операционная система не позволяют воспроизведение медиа в текущем контексте или ситуации. Например, браузер может потребовать, чтобы пользователь явно начал воспроизведение медиа, нажав кнопку «воспроизвести», например, из-за Политики разрешений.

NotSupportedError DOMException

Возникает, если источник медиа (который может быть задан, например, как MediaStream, MediaSource, Blob или File) не представляет поддерживаемый формат медиа.

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

Хотя термин «автовоспроизведение» обычно относится к страницам, которые сразу начинают воспроизводить медиа при загрузке, политики автовоспроизведения веб-браузеров также применяются к любому инициированному скриптом воспроизведению медиа, включая вызовы play().

Если пользовательский агент настроен так, чтобы не допускать автоматического или инициированного скриптом воспроизведения медиа, вызов play() приведет к немедленному отклонению возвращённого обещания с NotAllowedError. Веб-сайты должны быть готовы к такой ситуации. Например, сайт не должен отображать пользовательский интерфейс, предполагающий автоматическое начало воспроизведения, а вместо этого должен обновлять свой интерфейс в зависимости от того, выполнено ли возвращённое обещание или отклонено. Подробнее см. пример ниже.

Для более подробной информации об автовоспроизведении и блокировании автовоспроизведения см. нашу статью Руководство по автовоспроизведению для медиа и API Web Audio.

Этот пример демонстрирует, как подтвердить, что воспроизведение началось, и как элегантно обработать заблокированное автоматическое воспроизведение:

let videoElem = document.getElementById("video");
let playButton = document.getElementById("play-button");

playButton.addEventListener("click", handlePlayButton, false);
playVideo();

async function playVideo() {
  try {
    await videoElem.play();
    playButton.classList.add("playing");
  } catch (err) {
    playButton.classList.remove("playing");
  }
}

function handlePlayButton() {
  if (videoElem.paused) {
    playVideo();
  } else {
    videoElem.pause();
    playButton.classList.remove("playing");
  }
}

В этом примере воспроизведение видео включается и выключается функцией async playVideo() . Она пытается воспроизвести видео, и если это удалось, устанавливает имя класса элемента playButton в "playing". Если воспроизведение не удалось запустить, класс элемента playButton очищается, восстанавливая его исходный вид. Это гарантирует, что кнопка воспроизведения соответствует фактическому состоянию воспроизведения, следя за разрешением или отклонением Promise, возвращённым методом play().

При выполнении этого примера сначала собираются ссылки на элемент <video>, а также на кнопку <button>, используемую для включения и выключения воспроизведения. Затем устанавливается обработчик событий click для кнопки переключения воспроизведения и пытается автоматически начать воспроизведение, вызвав playVideo().

Вы можете попробовать или переделать этот пример в режиме реального времени на Glitch.

• Технологии веб-медиа
• Обучение: HTML видео и аудио
• Руководство по автовоспроизведению для медиа и API Web Audio
• Использование API Web Audio