由于这个问题是谷歌的热门搜索结果,但是“技术上”还没有答案,我想提供我的解决方案,但是有一个缺点.另外,公平警告：我的回答使用jQuery.

看起来视频循环中的轻微停顿是因为html5视频从一个位置到另一个位置需要时间.因此,当视频结束时,尝试告诉视频跳转到开头是没有任何帮助的,因为搜索仍然会发生.所以这是我的想法：

使用javascript克隆标记,并让克隆隐藏,暂停,并在开头.像这样的东西：

var $video = $("video");

var $clone = $video.clone();

$video.after($clone);

var video = $video[0];

var clone = $clone[0];

clone.hidden = true;

clone.pause();

clone.currentTime = 0;

是的,我使用了clone.hidden = true而不是$clone.hide().抱歉.

无论如何,在此之后,想法是检测原始视频何时结束,然后切换到克隆并播放它.这样,DOM中只显示了哪个视频正在显示,但实际上没有任何搜索必须发生,直到克隆开始播放.因此,在隐藏原始视频并播放克隆之后,您将原始视频重新开始并暂停.然后你将相同的功能添加到克隆中,以便在完成后切换到原始视频等.只需来回翻转即可.

例：

video.ontimeupdate = function() {

if (video.currentTime >= video.duration - .5) {

clone.play();

video.hidden = true;

clone.hidden = false;

video.pause();

video.currentTime = 0;

}

}

clone.ontimeupdate = function() {

if (clone.currentTime >= clone.duration - .5) {

video.play();

clone.hidden = true;

video.hidden = false;

clone.pause();

clone.currentTime = 0;

}

}

我添加 – .5的原因是因为根据我的经验,currentTime实际上从未达到与视频对象的持续时间相同的值.它非常接近,但从未完全存在.在我的情况下,我可以在最后斩断半秒,但在你的情况下,你可能想要在工作时尽可能小地定制.5值.

所以这是我在页面上的完整代码：

!function($){

$(document).ready(function() {

$("video").each(function($index) {

var $video = $(this);

var $clone = $video.clone();

$video.after($clone);

var video = $video[0];

var clone = $clone[0];

clone.hidden = true;

clone.pause();

clone.currentTime = 0;

video.ontimeupdate = function() {

if (video.currentTime >= video.duration - .5) {

clone.play();

video.hidden = true;

clone.hidden = false;

video.pause();

video.currentTime = 0;

}

}

clone.ontimeupdate = function() {

if (clone.currentTime >= clone.duration - .5) {

video.play();

clone.hidden = true;

video.hidden = false;

clone.pause();

clone.currentTime = 0;

}

}

});

});

}(jQuery);

我希望这对某些人有用.它对我的应用程序非常有效.缺点是.5,所以如果有人想出更好的方法来确切地检测视频何时结束,请发表评论,我将编辑此答案.