javascript - 带闪光灯的 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

尝试将循环添加到您的视频标记中:

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

编辑:

看到您的评论后，您可以使用当前代码实现它，但您必须删除 this.load() 行以避免出现空格。它看起来像这样:

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

<强> jsFiddle