javascript - 如何连续播放视频而没有间隙

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) block (videoJS 支持它，OBS 也支持 m3u8 录制)。

我在 Sia Skynet 上进行了直播，这是一个静态(不可修改)的去中心化文件存储(类似于 IPFS，但不同)。在这里您可以找到一些演示和源代码:https://github.com/DaWe35/Skylive