html5 视频播放列表有视频之间的差距答案

【问题标题】：html5 video playlist has gaps between videoshtml5 视频播放列表有视频之间的差距
【发布时间】：2020-04-18 08:52:09
【问题描述】：

我正在尝试使用 HTML5 <video> 标记和 onended 触发器制作播放列表。

播放列表有效，视频一个接一个地播放，但问题是播放的 2 个视频之间存在微小的差距。

这不是无缝的连续播放。我该怎么做才能解决这个问题？

这是我的代码：

<video id="vd" style=" width: 480px; height: 360px; " autoplay controls 
src="vid/0006v.mp4" />

<script type="text/javascript">
var vf=[ "0006v", "0007v", "0008v", "0009v", "0010v" ];
var c=0;
v=document.getElementById("vd");
v.onended=function()
{
  ++c;
  if( c >= vf.length ){ c=0; }
  v.src= "vid/"+ vf[c]+ ".mp4";
};
</script>

下面是播放器演示。
每个视频时长 1 分钟，播放列表中加载了大约 5 个。

当第一个视频在 1 分钟和第二个视频开始后结束时出现间隙，依此类推...

http://13pp.co.uk/play.php

【问题讨论】：

它会在播放新视频时缓冲视频，这很明显
那么我该怎么做才能预加载视频文件，以免发生这种缓冲？
正如您在代码中看到的那样，一旦最后一个视频结束，就会设置 src。因此，如果您只是为过渡设置动画，使其看起来更自然和更生动，那就太好了，否则不可能在同一个视频标签上设置两个 src。你可以做的是创建一个自定义的 html5 视频播放器，比如这个 github repo => github.com/sampotts/plyr

标签： javascript

【解决方案1】：

发生这种情况是因为下一个视频只有在上一个视频结束时才开始下载。这是我的解决方案：

有两个<video> 元素，一个可见，一个隐藏。将 first 的 src 属性设置为第一个视频 URL。当第一个<video> 元素播放快结束时，将第二个的src 属性设置为第二个视频并调用video2.load()，但不要立即开始播放。当第一个<video> 元素播放完毕后，使第一个不可见，使第二个可见并开始播放第二个。然后用第一个播放第三个视频，第二个播放第四个，等等......

【讨论】：