HTML5视频不循环 [英] HTML5 Video not looping

问题描述

我有一个奇怪的问题。我的两个版本的Chrome（普通和金丝雀）拒绝循环显示的视频。或者，有时他们会循环两次，然后停止。奇怪的是，它在Safari浏览器中工作，所以我知道这不是一些webkit shizzle下降。

 < video autoplay =autoplay data-type =bgid =videoloop =loop> 
< source src =/ assets / video / _L88P.mp4content-type =video / mp4> 
< / video> 
  

我的设置是一个带有山狮和麻线的mac，铬版本是最新的

解决方案

这个问题已解决，这里是我的解决方案：

视频的分辨率太大了。即使比特率很低，铬也不想这样做。将其重新设置为720p，并且完美地工作。

其他建议的解决方案，如果您遇到问题：

• 设置正确的内容类型，包括编解码器。


• 确保您位于支持文件类型的浏览器中。对于生活中的事物，请始终使用atleast .mp4和.ogg，并且包含.webm以确保安全。 将
  

• 设置为通过javascript循环。对于浏览器来说，这也是一个很好的回退，因为视频标签上的循环属性（主要示例是ipad's）并不是
  。下面是我昨天复制了一个站点的一些示例代码（抱歉，不记得源代码）

    var myVideo = document .getElementById（ '视频'）; 
   if（typeof myVideo.loop =='boolean'）{//循环支持
   myVideo.loop = true; 
  } else {//循环属性不被支持
   myVideo.on（'ended'，function（）{
   this.currentTime = 0; 
   this.play（）; 
  }，false）; 
  } 
   myVideo.play（）; 
    

I'm having a weird problem. My two versions of chrome(regular & canary) refuse to loop the video i'm showing. Or well, sometimes they loop it twice and stops after that. Weirdly enough, it works in safari, so i know It's not some webkit shizzle going down.

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

My setup is a mac with mountain lion and mamp on it, the chrome versions are the latest(canary: 26.0.1384.0 and regular: 24.0.1312.52).

Does anyone know why this is happening?

解决方案

This one is solved, and here's the solution in my case:

The video had a resolution that was too big. Even if the bitrate was low, chrome didn't want to do it. Resized it to be 720p and it worked perfectly.

Other suggested solutions if you're having problems:

• Set the correct content-type, including codec.
• Make sure you're in a browser that supports your file-type. For live things, always use atleast both .mp4 and .ogg, and include .webm for security.

• Set it to loop via javascript. This is also a good fallback for browsers not being okay with the loop attribute on the video tag (main example being ipad's). Below is some example code that I copied of a site yesterday (sorry, can't remember the source)

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

这篇关于HTML5视频不循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！