Async , Await и amp; 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>`);
}

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

Когда вы устанавливаете атрибут 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, требующие события щелчка от родительской страницы, в любом случае всегда разрешено автоматически воспроизводить ; -.)