无缝的HTML5视频循环 [英] Seamless HTML5 Video Loop

问题描述

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

I have searched extensively to find a solution to this but have not succeeded. I have created a 4 second video clip that loops seamlessly in an editor. However when the clip runs in a page via Safari, Chrome or Firefox there is a small but noticeable pause in the playback from end back to beginning.

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

I have tried using the loop and preload attributes both together and independently.

我也试过以下javascript：

I have also tried the following javascript:

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

但在所有情况下，暂时停顿和损坏效果。
我对任何想法持开放态度？

But in all cases the momentary pause remains and spoils the effect. I'm open to any ideas?

推荐答案

由于这个问题是Google的热门搜索结果但是，技术上还没有答案，我想贡献我的解决方案，这有效，但有一个缺点。另外，公平警告：我的回答使用jQuery 。

Since this question is a top search result in Google, but doesn't "technically" have an answer yet, I'd like to contribute my solution, which works, but has a drawback. Also, fair warning: my answer uses jQuery.

视频循环中的轻微停顿似乎是因为html5视频需要一段时间才能从一个位置寻找到另一个位置。所以试图告诉视频无济于事当它结束时跳到开头，因为搜索仍然会发生。所以这是我的想法：

It seems the slight pause in the video loop is because it takes time for html5 video to seek from one position to another. So it won't help anything to try to tell the video to jump to the beginning when it ends, because the seek will still happen. So here's my idea:

使用javascript克隆标记，并让克隆隐藏，暂停，并在乞讨这样的事情：

Use javascript to clone the tag, and have the clone sit hidden, paused, and at the beginning. Something like this:

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（）。抱歉。

Yes, I used clone.hidden = true instead of $clone.hide(). Sorry.

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

Anyway, after this the idea is to detect when the original video ends, and then switch to the clone and play it. That way there is only a change in the DOM as to which video is being shown, but there is actually no seeking that has to happen until after the clone starts playing. So after you hide the original video and play the clone, you seek the original back to the beginning and pause it. And then you add the same functionality to the clone so that it switches to the original video when it's done, etc. Just flip flopping back and forth.

示例：

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 从未实际达到与持续时间相同的值对于视频对象。它变得非常接近，但从未完全存在过。在我的情况下，我可以支付最后一半的时间，但在你的情况下你可能想要定制 .5 值尽可能小，同时仍然工作。

The reason I add the - .5 is because in my experience, currentTime never actually reaches the same value as duration for a video object. It gets pretty close, but never quite there. In my case I can afford to chop half a second off the end, but in your case you might want to tailor that .5 value to be as small as possible while still working.

所以这是我在页面上的完整代码：

So here's my entire code that I have on my page:

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

I hope this will be useful for somebody. It works really well for my application. The drawback is that .5, so if someone comes up with a better way to detect exactly when the video ends, please comment and I will edit this answer.

这篇关于无缝的HTML5视频循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！