如何无间隙地一个接一个地播放视频

Question

我有一个文件夹，其中包含数百个 mp4 文件，每个文件时长为 2 秒。 我想一个接一个地播放它们，它们之间没有任何故障。

我已经尝试了Playing videos one after another in html5 中的建议，但这并不能解决视频转换之间的故障问题。

<video width="256" height="192"  id="myVideo" controls autoplay>
    <source src="../uploads/VID_190923141334_20190923_141336.mp4" id="mp4Source" type="video/mp4">
    Your browser does not support the video tag.
</video>

<script type='text/javascript'>
    var player=document.getElementById('myVideo');
    var mp4Vid = document.getElementById('mp4Source');
    player.addEventListener('ended',myHandler_ended,false);

    function myHandler_ended(e)
    {
        mp4Vid.src = "../uploads/VID_190923141334_20190923_141338.mp4";
        player.load();
        player.play();
}
</script>

谁能指出正确的方向以消除每个视频转换中的故障？

Answer 1

“2 玩家 1 隐藏”方法不稳定：它在移动设备上不起作用，并且在将一个玩家切换到另一个玩家时会在较旧/较慢的计算机上滞后。我想用这个方法做一个直播，但它是一个丑陋的DIY，不要这样做。

有一个 HTTP Live Streaming (HLS) 标准，通过它您可以连续播放小的 m3u8 (.ts) 块（videoJS 支持，OBS 也支持 m3u8 录制）。

我在 Sia Skynet 上制作了直播流，这是一个静态（不可修改）分散文件存储（类似于 IPFS，但不同）。在这里你可以找到一些演示和源代码：https://github.com/DaWe35/Skylive

Answer 2

一种方法是在您的网页上放置两个视频元素和播放器 - 这种方法通常用于前贴片广告、中贴片广告和后贴片广告，这些广告通常来自与主视频本身不同的来源。

两个视频元素在页面上的相同位置，一个在另一个之上。

您播放第一个视频，当您接近结束时预加载，然后暂停第二个视频，但保持播放器隐藏。

在第一个视频结束时，隐藏第一个播放器并显示并启动第二个播放器。

然后，您再次预加载并暂停您刚刚隐藏的播放器中的下一个视频，当正在播放的视频结束时，它会成为准备开始的视频。

下面的 sn-p 隐藏第二个视频，直到第一个视频结束，然后播放第二个隐藏第一个视频。这只是一个粗略的轮廓，您可以在播放电影的位置等进行播放。如果您将指针放在视频上，您可以观看时间线 - 电影淡入淡出，因此可能不明显它正在播放。

在 sn-p 播放时将鼠标悬停在视频上，以查看从一个切换到另一个的时间。

var vid1 = document.getElementById("MyVid1");
var vid2 = document.getElementById("MyVid2");
vid2.style.display = "none"

vid1.onloadeddata = function() {
    vid1.currentTime = 872;
    vid1.play()
};

vid2.onloadeddata = function() {
    vid2.currentTime = 10; //Just to illusrate as begining is black screen
    vid2.pause()
};

vid1.onended = function() {
    vid2.play()
    vid1.style.display = "none"
    vid2.style.display = "block"
};

<video id="MyVid1" width="320" height="176" controls preload="auto">
  <source   src="http://peach.themazzone.com/durian/movies/sintel-1024-surround.mp4" type="video/mp4">
  Your browser does not support this video format
</video>

<video id="MyVid2" width="320" height="176" controls preload="auto">
  <source src="http://ftp.nluug.nl/pub/graphics/blender/demo/movies/ToS/tears_of_steel_720p.mov" type="video/mp4">
  Your browser does not support this video format
</video>