无缝 HTML5 视频循环

Question

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

我曾尝试将 loop 和 preload 属性一起和独立地使用。

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