视频海报播放延迟

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>

​