HTML5 从多个部分播放电影而不闪屏

Question

我有一个视频标签和一部电影，每部剪辑 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>

Answer 1

如果您正在更改视频的src ，这将变得非常困难，因为一旦src更改，它将加载整个视频，因此您将面临闪烁的屏幕效果。 使用视频部分获得无缝视频似乎是不可能的，但您可以通过以下方式尝试：

为每个视频使用不同的elements预加载所有视频，并为所有元素设置preload="auto"属性。 您需要以一次播放一个视频的方式播放元素的可见性。 第一个视频将autoplayed 。 当ended事件触发时，只需将下一个元素的可见性更改为真，将上一个元素的可见性更改为假（不要使用dispay:block/display:none因为我观察到在某些移动设备中，具有样式display:none视频标签display:none浏览器没有预加载display:none ）。 还要为视频保留一些background ，以避免出现白色背景闪光效果。

参考这个片段：

 var my_video = document.getElementById("my_video"); var my_video2 = document.getElementById("my_video2"); document.querySelector("#my_video").addEventListener("ended", nextVideo, false); function nextVideo() { my_video2.play(); my_video2.setAttribute('class', ''); my_video.setAttribute('class', 'hidden'); }

 .hidden { position: absolute; top: -10000px; left: -10000px; } video { background: black; }

 <video id="my_video" width="640" height="480" preload="auto" autoplay controls> <source src="test.mp4" type="video/mp4"> </video> <video id="my_video2" width="640" height="480" preload="auto" controls class="hidden"> <source src="test2.mp4" type="video/mp4"> </video> <button type="button" onclick="nextVideo()">Next</button>

Answer 2

可能这会帮助你我们制作两个视频标签并在第一个视频标签上设置第一部 10 秒电影，在第二个视频标签上设置第二部电影，在第一个视频标签上设置第三部电影，这个过程一个接一个地完成。

检查我的链接http://jsfiddle.net/qoch687a/2/

有 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);

        };
    }

}