Question

我有一个文件夹，其中包含数百个2秒持续时间的mp4文件。我想一个接一个地播放它们，而它们之间没有任何毛刺。

我尝试了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

一种方法是在页面上具有两个视频元素和播放器-这种方法通常用于前，中和后滚动广告，这些广告通常来自与主视频本身不同的来源。

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

您播放第一个视频，并且在接近快要结束时播放，然后暂停第二个视频，但保持播放器处于隐藏状态。

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

然后，您再次在刚刚隐藏的播放器中预加载和暂停下一个视频，当正在播放的视频结束时，该视频就可以开始播放了。

下面的代码段将隐藏第二个视频，直到第一个视频结束为止，然后播放第二个视频，以隐藏第一个视频。这只是一个粗略的轮廓，您可以在其中播放电影等的地方播放。如果将指针悬停在视频上，则可以观看时间线-电影淡入淡出，因此播放时可能不太明显。

var vid1 = document.getElementById("MyVid1");
var vid2 = document.getElementById("MyVid2");
vid2.style.display = "none"
vid1.onended = function() {
  vid2.play();
};

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

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://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>

<video id="MyVid2" 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>

Answer 2

“隐藏2个播放器1”方法不稳定：它在移动设备上不起作用，并且在将一个播放器切换到另一个播放器时，它将在较旧/较慢的计算机上落后。我想用这种方法创建一个实时流，但这是一个丑陋的DIY，请不要这样做。

有一个HTTP Live Streaming（ HLS ）标准，使用它可以连续播放小的m3u8（.ts）块（videoJS支持，OBS也具有m3u8录制支持）。 / p>

我在Sia Skynet上进行了实时流传输，这是文件的静态（不可修改）分散式静态存储（如IPFS，但有所不同）。在这里您可以找到一些演示和源代码：https://github.com/DaWe35/Skylive

如何无间隙地连续播放视频

2 个答案: