如何无间隙地接连播放视频 [英] how to play videos one after another without gap

问题描述

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

I have a folder with several hundred mp4 files of 2sec duration each. I would like to play them one after the other without any glitch between them.

我尝试了中建议的内容，在html5中依次播放视频，但这不能解决视频转换之间的毛刺问题.

I have tried what is advised in Playing videos one after another in html5 but this does not solve the glitch problem between video transitions.

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

有人能指出我正确的方向，以消除每次视频过渡中的故障吗?

Can anyone point me to the right direction in order to eliminate the glitch in each video transition?

推荐答案

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

One approach is to have two video elements and players on your page - this approach is often used for pre, mid and post roll adverts, which are often from a different source than the main video itself.

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

The two video elements are in the same place on the page, one over the other.

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

You play the first video and when you are near the end of it preload and then pause the second video but keep the player hidden.

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

At the point where the first video ends, you hide the first player and show and start the second player.

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

You then again preload and pause the next video in the player you have just hidden and it becomes the one ready to start when the one now playing is finished.

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

The snippet below hides the second video until the first has ended and then plays the second one hiding the first. This is just a rough outline you can play with where you cue the movies to etc. If you leave your pointer over the video you can watch the timeline - films fade in and out so it may not be obvious it is playing.

在播放片段时将其悬停在视频片段上，以查看其从一个切换到另一个的时间.

Hover over the video ion the snippet while it is playing to see the time as it switches from one to the other.

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

vid1.onloadeddata = function() {
    vid1.currentTime = 882;
    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>

这篇关于如何无间隙地接连播放视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！