无缝的HTML5视频循环

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

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

我也曾尝试以下的javascript：

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

但在所有情况下，瞬间的停顿依然存在，败坏了效果。我接受任何想法？

来源

2015-03-03 Steve

此答案可能有所帮助：https://stackoverflow.com/questions/17930964/video-element-with-looping-does-not-loop-videos-seamlessly-in-chrome-or-firefo/18143741# 18143741 – K3N 2015-03-03 10:53:56

您也可以尝试将'loop'属性设置为true /设置时间（并且设置新时间也会触发异步事件）。 – K3N 2015-03-03 11:02:05

@ KenFyrstenberg：谢谢你肯。我确实读过你以前的回答，但正如你所说的你的解决方案只是减少了我曾经希望的一个完全无缝的解决方案，现在已经介绍了自己的故障。我欣赏这个输入。我已经尝试过你的循环建议，但没有成功。 – Steve 2015-03-04 20:28:11

由于此问题是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为视频对象。它变得非常接近，但从来没有在那里。在我的情况下，我可以负担得起半秒钟的时间，但在你的情况下，你可能想要在尽可能小的时候调整这个值，同时仍然工作。

所以这里的，我有我的网页上我的全部代码：

!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，所以如果有人想出一个更好的方式来检测视频到底什么时候结束，请评论，我会编辑这个答案。

来源

2016-04-27 17:08:56

Thx为您的答案。你能举一个jsfiddle的例子吗？ – sidney 2017-01-14 14:44:07

我设法解决了我的代码循环问题，非常感谢！请注意，而不是.5，我设置了0.2，现在我的视频完全没有了。再次感谢！！ – sidney 2017-01-14 14:58:22

是的，我认为这个数字需要根据视频的具体需求进行调整。很高兴它对你有效！ – 2017-01-16 15:21:59

我发现，如果我使用mp4或ogv文件，Firefox会在循环时造成口吃。我改变了我的页面中的代码，先尝试使用webm文件，突然间断了口吃，视频无缝循环，或者至少足够接近以至于我没有看到问题。如果你还没有给出一个镜头，可以尝试将文件转换为webm格式并加载。

来源

2016-08-08 18:36:32 Kadima

无缝的HTML5视频循环

回答

相关问题