如何解决Html5 视频标签 - 仅加载前几秒
我正在尝试仅加载 html5 视频标签的前几秒。
或者,我可以改写并说我想开始一个视频,让它播放几秒钟,然后完全停止加载(我可以隐藏视频元素,如果重要的话)。
请帮忙。谢谢!
解决方法
您可以使用 url 中的 media-fragment syntax 让浏览器知道它应该播放媒体的哪个部分。
例如,要让它只播放媒体的前 5 秒,您可以将 url 设置为
https://www.example.com/example.mp4#t=0,5
document.querySelector("button").onclick = ({target}) => {
target.remove();
document.querySelector("video").play();
};
video { max-height: 100vh; }
<button>play</button>
<video muted src="https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm#t=0,5"></video>
浏览器可能预加载比这部分更多的数据,但它应该给它足够的提示,不要预加载太多。另外,请注意,如果您让用户玩视频的控件,他们很容易超过该范围。
,好吧,解决方案是为 window 对象设置一个加载事件,以便在整个页面加载后触发您的代码。
或者您可以设置 DOMContentLoaded 此事件将在 dom 加载后触发,这不会等待其他资源,如图像样式表等...
有关这两个事件的更多信息,请参阅本文。
https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
要获取有关 setTimeout 函数的更多信息,请参阅以下文章 https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
顺便说一下,就您而言,您可以使用以下代码段:snippet link
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。