Video Poster play at delay

Question

I am trying to figure out how to play my 'animation' video at a delay. It needed to have a transparent background and no controller, so like a gif.

I figured video is the only solution, however now it's either running in a loop or running once.

Example image:

  <div id="nee">
  <video poster="" id="bgvid" playsinline muted>
    <source src="   rendermirror.webm" type="video/webm">
    <source src="rendermirror.mov" type="video/mp4">
</video>

Also tried using an interval, but i don't get it to work properly.

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

If anyone has any tips, would be really appreciated.

Cheers,

Answer 1

I pause the video when load and the video plays after 5s

 var video = document.getElementById("myVideo"); // pause video event video.pause(); video.addEventListener("canplay", function() { setTimeout(function() { video.play(); }, 5000); });

 <video id="myVideo" width="320" height="176"> <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"> </video>

if you want to loop the video then you will need to add change this

 var video = document.getElementById("myVideo"); // pause video event video.pause(); video.addEventListener("canplay", function() { setTimeout(function() { video.play(); }, 5000); });

 <video id="myVideo" width="320" height="176" loop> <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"> </video>