Question

我有一个20秒长的HTML5视频循环作为我网页的背景，并设置为自动启动。是否可以将视频自动播放延迟5秒？我试图让视频在尝试播放之前完全加载，以防止它出现干扰。这是我目前的代码：

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

非常感谢任何帮助!!

Answer 1

HTML：

<video id="myVideo" src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4">

JavaScript的：

setTimeout(function(){
  document.getElementById("myVideo").play();
}, 5000);

JSFiddle example

Answer 2

这对我来说是一个有效的解决方案。您应该使用 canplay 作为最佳做法，以确保浏览器可以播放视频。此外，这是一个直接的JavaScript解决方案。

注意：我删除了自动播放，一个额外的关闭视频标记，并格式化您的静音＆amp;循环标志。

＆＃13;

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

＆＃13;

<video id="video_background" poster="images/dmm_background.jpg" controls="controls" preload="true" muted loop>
  <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
    <source src="videos/backgroundvideo.webm" type="video/webm">
</video>

＆＃13;

Answer 3

最好从视频标签中删除自动播放属性，并在实际需要时添加它（意味着5秒钟）。而且，如果您愿意预加载视频，则应该使用preload =“ auto”（而不是preload =“ true”），它将在加载页面时完全加载。

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)

HTML5视频自动播放，但延迟时间为5秒

3 个答案: