HTML5视频不循环播放

Question

我有一个奇怪的问题.我的两个版本的chrome(常规和金丝雀)拒绝循环我正在显示的视频.或者,有时他们将它循环两次并在此之后停止.奇怪的是,它适用于safari,所以我知道这不是一些webkit shizzle下降.

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

我的设置是一个带有山狮和mamp的mac,Chrome版本是最新的(金丝雀:26.0.1384.0和常规:24.0.1312.52).

有谁知道为什么会这样？

Answer 1

我还发现如果没有正确设置MP4关键帧,Chrome就会窒息.例如,在After Effects中,在输出中,如果关键帧距离保留为"自动",则视频无法正常循环.

我怀疑Chrome在视频长度内需要可分割的关键帧,而不是在关键帧之间.即如果您的视频是24帧,则使您的关键帧距离可以被整除,例如4.

Answer 2

这个解决了,这是我案例中的解决方案:

视频的分辨率太大了.即使比特率很低,铬也不想这样做.将其调整为720p并且完美运行.

如果您遇到问题,请提供其他建议解决方案:

• 设置正确的内容类型,包括编解码器.
• 确保您所在的浏览器支持您的文件类型.对于实时内容,始终至少使用.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();