Javascript - 在视频直播结束前隐藏 div 1 秒

Question

我在页面中有这个:

<video src="blob://some-live-stream" autoplay></video>
<div id="hideMePlease"> hide 1 sec before video ends</div>

我想在视频结束前隐藏 div 1 秒，我该怎么做？

注意:我无法知道视频时长，这是直播，视频会自动停止，所以我自己无法停止。

Answer 1

如果，正如您所说，您无法知道视频的长度，因为它正在流式传输，那么您将不可能(尽管存在相对论时间旅行)在事件结束前一秒安排一个事件。

但是，我至少会首先尝试使用视频的持续时间属性，元数据可能会在早期作为流的一部分提供。如果是，您可以使用它来安排 div 的隐藏。

As an aside, if you visit the page http://www.w3.org/2010/05/video/mediaevents.html, you'll find that the duration is set correctly as soon as you start playing the video, despite the fact it seems to be streaming from either an MP4, OGG or WEBM file). So it's at least possible, though it may depend on the data stream itself (whether the metadata comes before or after the actual video data).

如果数据不可用(我认为在这种情况下你会在持续时间内得到Inf)，那么你只需要隐藏div 之后尽早。

这大概是当它完成时(触发 onished 事件)。

因此，简而言之，如果您可以获取持续时间(或者定期获取剩余时间，这可能会更好)，请使用它。否则最后会退回到隐藏它并开始麻烦 w3c 以在 HTML6 中提供您想要的功能。