在特定的开始和结束HTML5视频持续时间后更改视频源

Question

我想在指定时间后更改视频源。

例如，我有3部视频，每部60秒长。我想从15秒开始播放video1，然后在30秒之后开始播放video2，然后从45秒之后播放video3，直到结束
例子
video1开始时间= 15秒，结束时间= 30
video2开始时间= 31秒，结束时间= 45
video3开始时间= 46秒，结束时间= 60

我可以使用媒体片段URI处理视频的开始和结束时间

<video class="v" controls src="vid1.mp4#t=15,30"></video>

https://www.w3.org/TR/media-frags/#standardisation-URI-fragments

http://www.annodex.net/~silvia/itext/mediafrag.html#t=40

我尝试了JavaScript解决方案，该解决方案在加载第二个视频时给整个页面带来了巨大的破坏

我期望必须有一些干净的解决方案，才能平稳地更改视频源

Answer 1

一种解决方案是在页面中包含三个单独的视频元素，并预加载开始时未播放的视频，然后播放然后立即暂停。

每个视频元素都位于页面上的同一位置，即它们彼此重叠，但是您一次只能显示一个视频元素。

然后您可以切换可见的视频并开始播放，暂停先前播放的视频并使它不可见。

某些OTT视频服务使用此技术将广告间隔与主要视频混合。