播放完整的HTML5视频，然后循环播放部分内容
我试图完全播放一段8.6秒的视频，然后无限循环一小段视频，以保持视频永无止境的幻觉。 到目前为止，我已经查看了媒体片段的URI以及视频的结束事件。 在结束事件监听器中设置currentTime属性有效，但会使视频“闪烁”。
目前，我使用timeupdate事件侦听器来改变视频接近结束的时间[如下所示]
elem.addEventListener('timeupdate', function () {
if (elem.currentTime >= 8.5) {
elem.currentTime = 5;
elem.play();
}
}, false);
JSFiddle在这里
这也适用，但视频在5秒重新启动之前明显暂停。 是否有一种播放视频的平滑方式，然后循环播放一段视频？
尝试以下操作，在其结束后立即“倒带”：
vidElem.addEventListener("ended", function () {
vidElem.currentTime = 2.5;
vidElem.play();
}, false);
更新小提琴：http://jsfiddle.net/Lt4n7/1/
你的代码很好，问题在于你的MP4文件！ 尝试使用像这样的小得多的视频（http://www.w3schools.com/tags/movie.mp4）来确认问题不在您的代码中。
那么你怎么能达到同样的结果，但与大视频文件？ 您将需要两个视频文件：
请记住：HTML5视频播放和循环大型视频文件没有问题，因此我们将使用此方法播放视频。
在下面的例子中，我们将播放第一个视频，当它结束时，我们将执行一个功能来隐藏video1，然后显示/播放video2。 （视频2已设置为循环）
不要忘记在你的头部加载JQuery，否则这将无法正常工作。
<video id="video1" width="1080" height="568" poster="movie.png" autoplay onended="run()">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<object data="movie.mp4" width="1080" height="568">
<embed width="1080" height="568" src="movie.swf">
</object>
Optional test to be displayed if the browser doesn't support the video tag (HTML 5)
</video>
<video id="video2" width="1080" height="568" poster="loop.png" loop>
<source src="loop.webm" type="video/webm">
<source src="loop.ogg" type="video/ogg">
<source src="loop.mp4" type="video/mp4">
<object data="loop.mp4" width="1080" height="568">
<embed width="1080" height="568" src="loop.swf">
</object>
Optional test to be displayed if the browser doesn't support the video tag (HTML 5)
</video>
<script>
$( "#video2" ).hide();
function run(){
$( "#video1" ).hide();
$( "#video2" ).show();
document.getElementById("video2").play();
};
</script>
我只是不得不面对同样的问题，并注意到与闪烁相同的问题。 这是我的解决方案：
然后，捕获结束的事件和交换显示状态（例如使用jquery，但您可以像使用'style.display =“none / block”'一样简单：
VideoPlayer1 = document.getElementById('video1');
VideoPlayer2 = document.getElementById('video2');
VideoPlayer1.addEventListener('ended', videoLooper, false);
function videoLooper()
{
VideoPlayer2.play();
$(VideoPlayer2).show();
$(VideoPlayer1).hide();
}