CODEWITHSUNDEEP
htmlvideosettimeoutpreloadautoplay
Billy
Billy

Reputation: 343

HTML5 video autoplay but with a 5 seconds of delay

I have a 20 second long HTML5 video loop as the background on my webpage and it is set to autostart. Is it possible to delay the video autoplay for 5 seconds? I am trying to allow the video to load completely before trying to play to prevent it from stuttering as much. Here is my current code:

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

Any help is greatly appreciated!!

Upvotes: 17

Views: 72811

Answers (2)

Viktoriia Krause
Viktoriia Krause

Reputation: 56

That would be better to remove autoplay attribute from video tag and add it when you actually need it (meaning in 5 seconds). And if you are willing to preload video, then you should use preload="auto" (not preload="true"), it will load completely while loading a page.

const startVideo = async () => {
  const video = document.querySelector('#video_background');

  try {
      await video.play();

      video.setAttribute('autoplay', true);

      console.log('video started playing successfully');
  } catch (err) {
    console.log(err, 'video play error');
    // do stuff in case your video is unavailable to play/autoplay
  }
}

setTimeout(startVideo, 5000)

Upvotes: 2

Joe Johnston
Joe Johnston

Reputation: 2936

This is a working solution for me. You should use canplay as a best practice to be sure the browser can play the video. Also, here is a straight javascript solution.

Note: I removed autoplay, an extra closing video tag, and formatted your muted & loop flags. 

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>

Upvotes: 10

Related Questions