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

我有一个video标签和一部电影，每部分10秒钟，名称：1.webm，2.webm ……. 1535.webm。 我尝试制作一个js代码，用于查找video何时结束并播放下一个，但我遇到了问题：屏幕闪烁且电影没有连续播放。 我需要像电影一样播放，连续video。

有没有选择呢？ 如果它不在JavaScript中，或者它是许多脚本和代码的组合，则无关紧要。

  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(); }  

Answer 1

如果你改变video的src会变得非常困难，因为它会在src改变后加载整个video，因此你面临着闪烁的屏幕效果。 使用video部件似乎无法获得无缝video，但您可以这样尝试：

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

请参阅此代码段：

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

   Next 

Answer 2

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

检查我的链接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); }; } }