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 事件触发时，只需将下一个元素的可见性更改为 true 并将上一个元素的可见性更改为 false（不要使用 dispay:block/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 秒的电影，在第二个视频标签上设置了第二部电影，在第一个视频标签上设置了第三部，这个过程一个接一个地完成。

检查我的 link 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);

        };
    }

}

HTML5 多段播放电影不闪屏

HTML5 Play movie from multiple parts without flashing screen

html

javascript

flash

video

jquery