javascript - 无缝 HTML5 视频循环

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