Автозапуск HTML5 видео не работает в Chrome

Question

Я пытаюсь показать видео на своем слайдере, используя видео html5.Это прекрасно работает с параметром controls (показывает элементы управления).Но когда я добавляю autoplay, он не воспроизводится автоматически, поэтому я искал, почему это могло быть, и обнаружил, что chome разрешает автозапуск только приглушенных видео.

Поэтому я добавил к нему параметр muted, но когдасделайте так, чтобы все мое видео стало черным и все еще не воспроизводилось автоматически.

Почему это могло быть?

Мой код:

<div class="r-slider-item">
    <video width="100%" height="100%" autoplay muted loop>
      <source src="assets/watertuin.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <div class="container">
      <div class="r-slider-top-content">
        <h1 class="animated fadeInDown">RESERVEER <span>NU</span></h1>
        <a href="#" class="btn btn-outlined animated fadeInUp"> Reserveren </a>
      </div>
    </div>
</div>

В Firefox и IE 11 это работает простохорошо.

Answer 1

Закончилось здесь тем, что у меня возникла та же проблема (нет автозапуска mp4 в Chrome, несмотря на то, что он работал в Firefox и Safari).Вот что исправило это для меня:

$('#video')[0].load();

Надеюсь, это может помочь кому-то еще.Мой HTML:

<video id="video" class="video" autoplay muted loop>              
   <source id="video-src" src="img/video.mp4" type="video/mp4">
</video>

Answer 2

Согласно последним политикам Google, отключенные видео могут автоматически воспроизводиться в Chrome.Автозапуск со звуком разрешен, если:

• Пользователь взаимодействовал с доменом (нажмите, коснитесь и т. Д.).
• На рабочем столе было превышено пороговое значение индекса вовлеченности медиа пользователя,Это означает, что пользователь ранее воспроизводил видео со звуком.
• На мобильном устройстве пользователь [добавил сайт на свой домашний экран].

Верхние кадры могут делегировать разрешение на автозапуск своим фреймамразрешить автоигру со звуком.

Кроме того, добавьте следующий тег после тега <source>: -

<source src="assets/watertuin.ogg" type="video/ogg">

Посмотрите, работает ли он сейчас.

Узнайте больше об изменениях политики автозапуска Google на: - https://developers.google.com/web/updates/2017/09/autoplay-policy-changes