无缝 HTML5 视频循环答案

【问题标题】：Seamless HTML5 Video Loop无缝 HTML5 视频循环
【发布时间】：2015-05-03 23:46:31
【问题描述】：

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

我尝试过同时单独使用循环和预加载属性。

我也尝试了以下javascript：

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

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

【问题讨论】：

这个答案可能会有所帮助：stackoverflow.com/questions/17930964/…
您也可以尝试将loop 属性设置为true wo/设置时间（设置新时间也会触发异步事件）。
@KenFyrstenberg：感谢肯。我确实阅读了您之前的答案，但正如您所说，您的解决方案只是减少了故障，我希望现在已经出现了一个完全无缝的解决方案。我很感激你的意见。我已经尝试过你的循环建议但没有成功。
不幸的是，这是浏览器的限制。我们对此无能为力 - 剩下的唯一选择是创建一个长时间运行的预循环视频流 - 这当然会增加网站的流量。

标签： javascript html loops html5-video

【解决方案1】：

由于这个问题是 Google 的热门搜索结果，但“技术上”还没有答案，我想贡献我的解决方案，它有效，但有一个缺点。另外，公平的警告：我的答案使用 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，所以如果有人想出更好的方法来准确检测视频何时结束，请发表评论，我会编辑这个答案。

【讨论】：

感谢您的回答。你能举一个jsfiddle的例子吗？
我设法用您的代码解决了循环问题，非常感谢！请注意，我设置的不是 0.5，而是 0.2，我的视频现在完全没有了。再次感谢！！
是的，我认为这个数字需要根据您视频的具体需求进行调整。很高兴它对你有用！

【解决方案2】：

我发现如果我使用 mp4 或 ogv 文件，Firefox 在循环时会卡顿。我更改了页面中的代码以先尝试使用 webm 文件，然后突然间卡顿消失了，视频无缝循环播放，或者至少足够接近以至于我没有看到问题。如果您还没有尝试过，不妨尝试将文件转换为 webm 格式并进行加载。

【讨论】：