Question

我已经广泛搜索以找到解决方案，但没有成功。我创建了一个4秒的视频剪辑，可以在编辑器中无缝循环。但是，当剪辑通过Safari，Chrome或Firefox在页面中运行时，从结束到开始播放时会有一个小但明显的暂停。

我尝试过一起和独立地使用循环和预加载属性。

我也尝试过以下javascript：

loopVid.play();
loopVid.addEventListener("timeupdate", function() {
    if (loopVid.currentTime >= 4) {
        loopVid.currentTime = 0;
        loopVid.play();
    }
}

但在所有情况下，暂时的停顿仍然存在并破坏效果。我对任何想法持开放态度？

Answer 1

由于这个问题是谷歌的热门搜索结果，但在“技术上”尚未得到答案，我想提供我的解决方案，这有效，但有一个缺点。另外，公平警告：我的回答使用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实际上从未达到与duration相同的视频对象价值。它非常接近，但从未完全存在。在我的情况下，我可以承受最后一半的切断，但在您的情况下，您可能希望在仍然工作时将.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，所以如果有人想出更好的方法来确切地检测视频何时结束，请发表评论，我将编辑此答案。

Answer 2

我发现如果我使用mp4或ogv文件，Firefox会在循环时断断续续。我改变了我的页面中的代码，首先尝试使用webm文件，然后突然口吃不见了，视频无缝循环，或者至少足够接近，我没有看到问题。如果你没有给出一个镜头，那么尝试将文件转换为webm格式并加载它是值得的。

无缝的HTML5视频循环

2 个答案: