无缝 HTML5 视频循环

我进行了广泛的搜索以找到解决此问题的方法，但没有成功。 我创建了一个 4 秒的视频剪辑，可以在编辑器中无缝循环。 然而，当剪辑通过 Safari、Chrome 或 Firefox 在页面中运行时，从结尾到开头的播放会出现一个小但明显的暂停。

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

我还尝试过以下 JavaScript：

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

但在所有情况下，短暂的停顿仍然存在并破坏了效果。 我愿意接受任何想法吗？

由于这个问题是谷歌的热门搜索结果，但“技术上”还没有答案，所以我想贡献我的解决方案，该解决方案有效，但有一个缺点。另外，公平警告：我的答案使用 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(). Sorry.

无论如何，在此之后的想法是检测原始视频何时结束，然后切换到克隆并播放它。这样，DOM 中只需要更改显示哪个视频，但实际上在克隆开始播放之前不需要进行任何搜索。因此，在隐藏原始视频并播放克隆视频后，您将寻找原始视频回到开头并暂停它。然后，您可以向克隆添加相同的功能，以便在完成后切换到原始视频，等等。只需来回翻转即可。

Example:

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，因此，如果有人想出更好的方法来准确检测视频何时结束，请发表评论，我将编辑此答案。