视频海报播放延迟

【问题标题】：Video Poster play at delay视频海报播放延迟
【发布时间】：2020-05-02 04:11:42
【问题描述】：

我想弄清楚如何延迟播放我的'动画'视频。它需要有一个透明的背景并且没有控制器，所以就像一个 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);
  });

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

干杯，

【问题讨论】：

标签： javascript html css

【解决方案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>

【讨论】：