Автозапуск видео HTML5, но с задержкой в 5 секунд

У меня есть 20-секундный цикл видео HTML5 в качестве фона на моей веб-странице, и он настроен на автозапуск. Можно ли задерживать видеовоспроизведение видео в течение 5 секунд? Я пытаюсь допустить, чтобы видео полностью загрузилось, прежде чем пытаться играть, чтобы предотвратить его заикание. Вот мой текущий код:

<video id="video_background" poster="images/dmm_background.jpg" controls="controls" preload="true" autoplay="true" loop="loop" muted="muted" volume="0"> 
<source src="videos/backgroundvideo.mp4" type="video/mp4"> 
<source src="videos/backgroundvideo.webm" type="video/webm">
</video>
</video>

Любая помощь очень ценится!

Ответ 1

HTML:

<video id="myVideo" src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4">

JavaScript:

setTimeout(function(){
  document.getElementById("myVideo").play();
}, 5000);

Пример JSFiddle.

Ответ 2

Это рабочее решение для меня. Рекомендуется использовать canplay, чтобы браузер мог воспроизводить видео. Кроме того, вот прямое решение JavaScript.

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

var video = document.getElementById("video_background");
video.addEventListener("canplay", function() {
  setTimeout(function() {
    video.play();
  }, 5000);
});

<video id="video_background" poster="images/dmm_background.jpg" controls="controls" preload="true" muted loop>
  <source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/SsRadVyPGjdkeg9tt/videoblocks-computer-hacking-in-process-cyber-security-concept_h-l3zbu4xb__PM.mp4">
    <source src="videos/backgroundvideo.webm" type="video/webm">
</video>