HTML5播放电影从多个部分没有闪烁的屏幕

HTML5 Play movie from multiple parts without flashing screen

本文关键字：闪烁 屏幕 个部 播放 放电影 HTML5      更新时间：2023-09-26

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

如果您正在更改视频的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>

这可能会帮助你制作两个视频标签，并将第一个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);
        };
    }
}
相关文章：