Html5 视频标签 - 仅加载前几秒

Question

我正在尝试仅加载 html5 视频标签的前几秒。

或者，我可以改写并说我想开始一个视频，让它播放几秒钟，然后完全停止加载（我可以隐藏视频元素，如果重要的话）。

请帮忙。谢谢！

Answer 1

您可以使用 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>

浏览器可能预加载比这部分更多的数据，但它应该给它足够的提示，不要预加载太多。另外，请注意，如果您让用户玩视频的控件，他们很容易超过该范围。

Answer 2

好吧，解决方案是为 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