我有一个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>
任何帮助是极大的赞赏!!
HTML:
<video id="myVideo" src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4">
JavaScript的:
setTimeout(function(){
document.getElementById("myVideo").play();
}, 5000);
这对我来说是一个有效的解决方案。您应该使用canplay作为最佳实践,以确保浏览器可以播放视频。此外,这是一个直接的JavaScript解决方案。
注意:我删除了自动播放,一个额外的关闭视频标记,并格式化了静音和循环标记。
var video = document.getElementById("video_background");
video.addEventListener("canplay", function() {
setTimeout(function() {
video.play();
}, 5000);
});
<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>