Javascript HTML5在不闪烁屏幕的情况下从多个部分播放电影

我有一个视频标签和一部电影，每部剪辑10秒，名字是：1.webm，2.webm。。。。。。。1535.webm。我试着制作一个js代码，找出视频何时结束并播放下一个，但我有一个问题：屏幕闪烁，电影没有连续播放。我需要完全像电影一样播放，有连续的视频

有什么办法可以做到这一点吗？不管它是否在JavaScript中，或者它是否是许多脚本和代码的组合

<video id="my_video" width="640" height="480" autoplay>
    <source src="files/1.webm" type="video/webm">
</video>

<script>
var src = 0;
var video = document.getElementById("my_video");

document.querySelector("#my_video").addEventListener("ended", nextVideo, false);

function nextVideo() {
    src = src + 1;
    video.src = "files/" + src + ".webm";
    video.play();
}
</script>

var-src=0；
var video=document.getElementById（“我的视频”）；
document.querySelector（“我的视频”）.addEventListener（“结束”，下一个视频，false）；
函数nextVideo（）{
src=src+1；
video.src=“files/”+src+“.webm”；
video.play（）；
}

如果要更改视频的

src

，将变得非常困难，因为一旦

src

更改，它将加载整个视频，因此您将面临闪烁屏幕效果。使用视频部件似乎不可能获得无缝视频，但您可以这样尝试：

为每个视频使用不同的

元素

预加载所有视频，并将

preload=“auto”

属性设置为所有元素。您需要以一次播放一个视频的方式播放元素的可见性。第一个视频将

自动播放

。当

结束

事件触发时，只需将下一个元素的可见性更改为true，将上一个元素的可见性更改为false（不要使用

dispay:block/display:none

，正如我所观察到的，在某些移动设备中，浏览器不会预加载样式为

display:none

的视频标签）。同时在视频中保留一些

背景

，以避免白色背景闪烁效果

请参阅此代码段：

var my_video=document.getElementById（“my_video”）；
var my\u video2=document.getElementById（“my\u video2”）；
document.querySelector（“我的视频”）.addEventListener（“结束”，下一个视频，false）；
函数nextVideo（）{
我的孩子在玩；
my_video2.setAttribute（'class'，''）；
my_video.setAttribute（'class'，'hidden'）；
}

。隐藏{
位置：绝对位置；
顶部：-10000px；
左：-10000px；
}
录像带{
背景：黑色；
}

接下来

可能是这将帮助您制作两个视频标签，并在第一个视频标签上设置第一个10秒的电影，在第二个视频标签上设置第二个电影，在第一个视频标签上再次设置第三个。此过程一个接一个地完成

检查我的链接

有一个timeupdate事件每秒钟触发一次，我们检查持续时间

video.ontimeupdate = function timeUp(e){

    if(parseInt(e.originalTarget.duration - e.originalTarget.currentTime)==1){
        document.getElementById("my_video1").src=videos[1];
        document.getElementById("my_video1").play();
        document.getElementById("my_video1").onloadeddata = function(){
            clearInterval('intTime');
            intTime = setTimeout(function(){document.getElementById("my_video").style.display="none";
            document.getElementById("my_video1").style.display="block";},1000);

        };
    }

}

@嗯，快乐编码