视频一个接一个播放顺利吗?

Question

我知道有一个简单的解决方案来播放视频一个接一个的HTML。然而，我还没有找到一个从视频平稳过渡的。我的问题是，我有一个很长的视频流在我的服务器上由多个MP4文件组成。我通过HTTP将这些文件提供给我的web客户端，并使用video.js播放它们。为了一个接一个地播放文件，我简单地实现了这个解决方案，它简单地更改了ended事件的源。问题是，当一个视频结束，一个新的开始有一个小口吃。对于用户来说，这些小文件必须是一个连续的视频，所以当文件改变时，我不能接受一个小的断断续续。

是否有办法做到这一点在videojs或只是在HTML5的video元素?我目前保存我的MP4文件作为blobs在我的客户端，所以我想，也许我可以尝试"合并"blobs在一起，以避免改变源。然而，我不认为我可以简单地将MP4文件连接在一起在blob和播放他们作为一个单一的来源。有没有另一种格式，可以支持"合并"视频文件在飞行中，以避免改变视频源?

请注意，任何HTTP流协议，如HLS或DASH将不适合我。我的服务器必须从可能的长期存档存储中获取MP4文件，视频的总持续时间我不知道。因此，我无法真正为这些块构建清单。我也有我的文件在普通MP4，而不是碎片化的MP4。

Answer 1

如果我们总是有一个视频设置并准备播放，即两个视频元素，一个播放一个与src设置就绪，似乎没有口吃。这需要在其他视频上测试，但这个片段似乎不会在视频之间口吃。

function createObjectURL(object) {
return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}
async function makeBlob(i){
let blob = await fetch(srcs[i]).then(r => r.blob());
blobs.push(createObjectURL(blob));
if ( i == (srcs.length -1) ) {
videoEls[0].src = blobs[0];
videoEls[1].src = blobs[1];
videoEls[0].style.visibility = 'visible';
videoEls[0].play();
}
}
const srcs = ['https://vjs.zencdn.net/v/oceans.mp4', 'https://vjs.zencdn.net/v/oceans.mp4', 'https://vjs.zencdn.net/v/oceans.mp4'];
let blobs= [];
let curBlob = 0;
let curVideo = 0;
for (let i=0; i < srcs.length; i++) {
makeBlob(i);
}
let videoEls = document.querySelectorAll('video');
for (let j = 0; j < videoEls.length; j++) {
videoEls[j].addEventListener("ended", function() {
videoEls[curVideo].style.visibility = 'hidden';
curVideo = (curVideo+1)%(videoEls.length);
videoEls[curVideo].play();
videoEls[curVideo].style.visibility = 'visible';
curBlob = (curBlob+1)%(blobs.length);
videoEls[(curVideo+1)%(videoEls.length)].src = blobs[curBlob];    
});
}

video {
position: absolute;
visibility: hidden;
}

<video></video>
<video></video>

Answer 2

我尝试了很多东西，但在过渡期间总是有一个小口吃，特别是在音轨上。我最终将服务器上的MP4文件转换为碎片化的MP4文件。我只是简单地将新的MP4片段附加到相同的缓冲区，它作为一个视频播放。