web-dev-qa-db-fra.com

Lecture automatique de vidéos HTML5 mais avec 5 secondes de retard

J'ai une boucle vidéo HTML5 de 20 secondes comme arrière-plan sur ma page Web et elle est définie pour démarrer automatiquement. Est-il possible de retarder la lecture automatique de la vidéo pendant 5 secondes? J'essaie de permettre à la vidéo de se charger complètement avant d'essayer de la jouer pour l'empêcher de bégayer autant. Voici mon code actuel:

<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>

Toute aide est grandement appréciée!!

htmlvideosettimeoutpreloadautoplay
12
Billy

HTML:

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

JavaScript:

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

exemple JSFiddle .

17
Drew Beres

C'est une solution de travail pour moi. Vous devez utiliser canplay comme meilleure pratique pour être sûr que le navigateur peut lire la vidéo. Voici également une solution javascript simple.

Remarque: J'ai supprimé la lecture automatique, une balise vidéo de fermeture supplémentaire et formaté vos indicateurs de sourdine et de boucle.

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>
4
Joe Johnston