Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 954
Billy Avatar asked Jan 02 '14 05:01

Billy


People also ask

Why autoplay in HTML is not working?

Why video autoplay is not working in HTML? Chrome does not allow autoplay if the video is not muted. So to autoplay video you need to set both autoplay and muted attribute.

How do I make a video start at a certain time in HTML?

autoplay=1 to the end of the sharing page link. This URL argument will make the video play automatically when the page loads. If you want the video to start playing at a specific time, also add second=15 to the end of the URL.

How do I enable video autoplay in HTML?

The autoplay attribute is a boolean attribute. When present, the video will automatically start playing. Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.

Why video is not playing in HTML5?

If you come across an HTML5 page with the following error message “file not found,” then it means your browser doesn't have the proper video codec installed. For example, if you are using Google Chrome and you come across an HTML5 MP4 video, then you may get an error message because you don't have an MP4 codec.


2 Answers

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>
like image 83
Joe Johnston Avatar answered Sep 21 '22 02:09

Joe Johnston


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)
like image 40
Viktoriia Krause Avatar answered Sep 17 '22 02:09

Viktoriia Krause