带有闪光灯的HTML5视频循环

Question

我在页面上有一个视频， 需要在所有浏览器中无限循环 。 我放弃尝试在视频代码中使用循环归因 ，因为在所有浏览器中均无法正常工作，因此我屏蔽了JS。 我想JS无法检测到视频已结束。

我使用以下代码。

HTML：

<video autoplay="" preload="auto" poster="file" id="id">
   <source src="..." type="video/webm">
   <source src="..." type="video/mp4">
   <source src="..." type="video/ogg">
   <img src="..." title="Lundegaard" alt="Video fallback">
   Your browser does not support the video tag.
</video>

JS：

/* video infinite loop */
$('video').bind("ended", function() {
    this.load();
    this.play();
});

此解决方案很好，除了再次重新加载视频而导致空白出现一会儿的那一刻。 我猜想，一旦视频最初被加载，就无需再次加载。 没有this.load() ，循环将无法正常工作。

您是否知道如何在没有空白闪存的情况下实现循环？

感谢你！

部分解决方案

我发现Chrome存在问题。 如果是Chrome浏览器，则this.play（）出于某种原因无法正常运行，但可以在其他浏览器中正常运行。 所以我用下面的代码部分修复了它。 我愿意寻求更好的解决方案。

function videoLoop() {
    var video = $('video#id');

    //Chrome is not working with this.play() only
    var isChrome = !!window.chrome;

    video.bind("ended", function() {
        if (isChrome) {
            this.load();
        }
        this.play();
    });
};

Answer 1

尝试在视频标记中添加loop ：

<video autoplay="" loop preload="auto" poster="file" id="id">
...

编辑：

在看到您的注释之后，您可以使用当前代码来实现它，但是您必须删除this.load()行以避免空格。 它看起来像这样：

$('video').on('ended', function(){
    this.play();
});

jsFiddle