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

Question

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

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

请帮助。谢谢！

Answer 1

您可以在 url 中使用媒体片段语法，让浏览器知道应该播放媒体的哪一部分。

例如，要告诉它仅播放媒体的前 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>

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