视频海报延迟播放

Question

我想弄清楚如何延迟播放我的“动画”视频。 它需要有一个透明的背景并且没有控制器，所以就像一个 gif。

我认为视频是唯一的解决方案，但是现在它要么循环运行，要么运行一次。

示例图像：

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

也尝试使用间隔，但我没有让它正常工作。

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

如果有人有任何提示，将不胜感激。

干杯，

Answer 1

我在加载时pause视频，视频在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>

如果要loop播放视频，则需要添加更改

 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>