Получите собственные HTML-видео для автоматического воспроизведения на Chrome - PullRequest
0 голосов
/ 12 октября 2018

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

Одна из самых интересных вещей в Coverr - это предоставление нашим пользователям возможности просматривать видео в качестве фона.видео на нашем сайте.Например: https://coverr.co/videos/Beach

Если вы перейдете на эту страницу с помощью FF или Safari, видео будет воспроизведено автоматически, без проблем.Однако с момента последнего изменения политики Chrome в апреле 2018 года автозапуск на Chrome стал нестабильным.

Мы добавили флаги «автозапуск» и «приглушенный» (хотя все наши видеозаписибез звука), как того требуют новые спецификации, но без везения.Иногда он проигрывался, а иногда просто зависал, пока пользователь не начал активно воспроизводить.

Может кто-нибудь помочь нам разгадать эту загадку?Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 12 октября 2018

(1) Невозможно воспроизвести вашу проблему (в версии Chrome 69.0.3497.100):

Это автоматически воспроизводит и повторяет:

<!DOCTYPE html>
<html>
<body>

<video width="100%"  autoplay loop>
<source src="https://storage.googleapis.com/coverr-main/mp4/Beach.mp4" type="video/mp4">
</video>

</body>
</html>

(2) Ваше изображение обложки / плаката блокирует видео (которое может воспроизводиться внизу).

Попробуйте снять изображение обложки.Ваш замороженный кадр (не воспроизводится) на самом деле является изображением постера.Протестируйте, удалив код обложки (, например: <div class="poster hidden"> и т. Д.).

PS. Если щелкнуть изображение плаката правой кнопкой мыши и выбрать «показать элементы управления», отобразится кнопка «Воспроизвести».начать воспроизведение.

0 голосов
/ 12 октября 2018

Нашел проблему, и это было связано с тем, что мы использовали angular 2.

Очевидно, что у Angular 2 есть проблема с правильным добавлением мета-тега muted.Полный ответ можно найти здесь , но в основном вам необходимо использовать атрибут onloadedmetadata Angular:

onloadedmetadata="this.muted = true"

и, в общем, вот как это должно выглядеть:

<video onloadedmetadata="this.muted=true" autoplay>
  <source src="myVideo.mp4" type="video/mp4" />
</video>

Важный комментарий:

Мы также добавили oncanplay="this.play()" для дополнительной надежности воспроизведения.Таким образом, в будущем мы можем обрабатывать обещание play () и показывать кнопку воспроизведения, если автозапуск был отклонен по какой-либо другой причине

Дополнительный важный комментарий:

После @VC.Oneвопрос, просто хотел уточнить, что есть способ проверить или хотя бы получить уведомление о воспроизведении (взято из статьи в моем вопросе):

var promise = document.querySelector('video').play();
if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

но это не такУбедитесь, что видео на самом деле воспроизводится, поэтому вы можете получить ошибку, даже если все допустимо.И, конечно, добавление кнопки воспроизведения может сработать, но это действительно снимает «укус» того, что мы пытаемся сделать - автоматическое воспроизведение приглушенного видео на фоне сайта.

В основном все, что вам нужно для этогоправильно вставили автоигру и отключили звук, и, видимо, в Angular 2 это не такая тривиальная задача ...

...