HTML5视频不循环(HTML5 Video not looping)

我有一个奇怪的问题。我的铬（定期和金丝雀）的两个版本拒绝环路视频我展示。或者不好，他们有时循环两次，之后停止。古怪的是，它工作在野生动物园，所以我知道这不是一些的WebKit shizzle下去。

<video autoplay="autoplay" data-type="bg" id="video" loop="loop">
    <source src="/assets/video/_L88P.mp4" content-type="video/mp4">
</video>

我的设置是与山狮和甲基苯丙胺就可以了MAC，铬版本是最新的（金丝雀：26.0.1384.0和定期：24.0.1312.52）。

有谁知道为什么发生这种情况？

Answer 1:

我还发现，Chrome的扼流圈如果MP4的关键帧设置不正确。例如，在After Effects，在输出时，如果关键帧距离左为“自动”的视频不循环正常。

我怀疑是Chrome需要视频的长度内整除关键帧，在关键帧之间没有结束。也就是说，如果您的视频是24帧，使您的关键帧距离整除，例如如图4所示。

Answer 2:

这一个是解决了，这里是我的情况的解决方案：

视频有一个分辨率太大。即使比特率较低，铬并不想这样做。调整大小它是720P它完美地工作。

其他建议的解决方案，如果您有任何问题：

设置正确的内容类型，包括编解码器。
请确保你在一个支持您的文件类型的浏览器。对于活的东西，一定要使用ATLEAST都.MP4和.OGG，以及包括.webm安全。

通过JavaScript将其设置为循环。这也是不是好与视频代码中循环属性浏览器（主要的例子是iPad的）一个很好的后备。下面是我复制一个网站的一些示例代码，昨日（抱歉，不记得源）

 var myVideo = document.getElementById('video'); if (typeof myVideo.loop == 'boolean') { // loop supported myVideo.loop = true; } else { // loop property not supported myVideo.on('ended', function () { this.currentTime = 0; this.play(); }, false); } myVideo.play();

Answer 3:

出现这种情况只有当你在本地运行您的网站...
并且我有同样的问题与Chrome，但我发现在XAMP本地服务器解决方案......

你可以使用你想（像WAMP和等）任何本地服务器......但网站必须在服务器根目录......这样的镀铬了解到，影片是来自服务器，而不是从本地糖化

Answer 4:

最近我有一些问题，这个我自己。它原来是事做我的网站是在本地主机上。当我移动网站我的生产服务器和远程测试，这一切都按预期。

迫使它在localhost工作，我使用的Joakim Bananskal的解决方案，但在播放视频的原因的错误，因为它已经尝试播放它，所以我不得不首先复位视频使用load()

有它设置为循环似乎也造成一个问题，因为视频从来没有发射的ended事件。

我对本地主机最终的解决方案是如下：

$("video").each(function () {
    this.loop = false;
    this.onended = function () {
        this.load();
    };
    this.play();
});

与此HTML：

<video preload="auto" autoplay>
    <source src="/video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="/video.ogg" type="video/ogg">
    <img src="/backupImage.png" />
</video>

Answer 5:

出于某种原因，我曾与“结束”事件绑定的问题。

这是我如何固定它：

删除“回路” ATTR从视频。

加入onended调用重播（）

  <视频自动播放= '真' onended = “重放（）”> </视频>

定义重放（）如下：

  功能重播（）{      的console.log（ '视频结束'）;      document.getElementsByTagName（ '视频'）currentTime的= 0。      document.getElementsByTagName（ '视频'）[0] .play（）;  }

文章来源: HTML5 Video not looping