gpt4 book ai didi

HTML5 视频自动播放但有 5 秒的延迟

转载 作者:技术小花猫 更新时间:2023-10-29 12:38:19 27 4
gpt4 key购买 nike

我的网页上有一个 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>

非常感谢任何帮助!!

最佳答案

这对我来说是一个可行的解决方案。您应该使用 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="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/SsRadVyPGjdkeg9tt/videoblocks-computer-hacking-in-process-cyber-security-concept_h-l3zbu4xb__PM.mp4">
<source src="videos/backgroundvideo.webm" type="video/webm">
</video>

关于HTML5 视频自动播放但有 5 秒的延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20876864/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com