видео не будет автоматически воспроизводиться на Chrome при вставке в DOM - PullRequest
Новая
       0

видео не будет автоматически воспроизводиться на Chrome при вставке в DOM

0 голосов
/ 18 января 2019

У меня есть видео (предназначенное для фоновых целей), которое отключено, и я намерен автоматически воспроизвести его. Если бы я поместил следующий код в HTML-файл: 

<video playsinline autoplay muted loop>
  <source src="https://res.cloudinary.com/dthskrjhy/video/upload/v1545324364/ASR/Typenex_Dandelion_Break_-_Fade_To_Black.mp4">
</video>

На Chrome все будет работать нормально.

Однако, если бы я вставил точно такое же видео с помощью DOM-манипуляции, у меня возникли бы проблемы с Chrome, но с успехом в других браузерах, таких как Firefox. 

<html>
<body>
</body>
<script>
  function render() {
    const video = document.createElement('video');
    video.setAttribute('muted', true);
    video.setAttribute('autoplay', true);
    video.setAttribute('loop', true);
    video.setAttribute('playsinline', true);

    const source = document.createElement('source');
    source.setAttribute('src', 'https://res.cloudinary.com/dthskrjhy/video/upload/v1545324364/ASR/Typenex_Dandelion_Break_-_Fade_To_Black.mp4');

    video.appendChild(source);
    document.body.appendChild(video);
  }
  render();
</script>    
</html>

Похоже, что Chrome блокирует автоигру . Общие решения должны быть либо отключены (что я уже делаю), либо использовать dom-манипуляции для вызова play (что не работает). Есть ли способ заставить это работать после вставки видео в DOM. Причина, по которой я забочусь, заключается в том, что мой фактический веб-сайт требует, чтобы все было отображено (мой сайт находится в ember.js).

Это в версии Chrome 71.

Спасибо!

Ответы [ 2 ]

0 голосов
/ 18 января 2019

Async , Await , & IIFE

После того, как я нашел эту статью пару месяцев назад, я все еще не мог получить последовательное поведение автоигры, приглушенное или нет. Таким образом, единственное, что я не пробовал, это упаковать async function в IIFE ( I немедленно I nvoked F unction E xpression ).

В демоверсии:

  • Он динамически вставляется в DOM с помощью .insertAdjacentHTML()

  • Стоит autoplay

  • Должно быть без звука

  • Все вышеперечисленное должно происходить без взаимодействия с пользователем.

Демо 

var clip = document.getElementById('clip');

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

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

function stamp() {
  document.body.insertAdjacentHTML('beforeend', `<video id='clip' poster='https://image.ibb.co/iD44vf/e2517.jpg' src='https://storage04.dropshots.com/photos8000/photos/1381926/20181019/182332.mp4' width='100%' autoplay loop playsinline></video>`);
}
0 голосов
/ 18 января 2019

Это, вероятно, ошибка (и не единственная, с этой политикой автозапуска ...).

Когда вы устанавливаете атрибут muted через Element.setAttribute(), политика не раскрывается, как должно быть.

Чтобы обойти это, установите атрибут IDL через свойство элемента: 

function render() {
  const video = document.createElement('video');
  video.muted = true;
  video.autoplay = true;
  video.loop = true;
  video.setAttribute('playsinline', true);

  const source = document.createElement('source');
  source.setAttribute('src', 'https://res.cloudinary.com/dthskrjhy/video/upload/v1545324364/ASR/Typenex_Dandelion_Break_-_Fade_To_Black.mp4');

  video.appendChild(source);
  document.body.appendChild(video);
}
render();

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...