帶有閃光燈的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