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();
});

此解决方案很好，除了视频 RELOAD再次出现，导致空白区域出现一段时间。我想一旦视频最初加载，就不需要再次加载它。如果没有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

带闪光灯的Html5视频循环

部分解决方案

1 个答案: