HTML5视频不会循环播放

Question

我有一个视频作为网页的背景,我试图让它循环.这是代码:

<video autoplay='true' loop='true' muted='true'>
  <source src='/admin/wallpapers/linked/4ebc66e899727777b400003c' type='video/mp4'></source>
</video>

即使我已经告诉视频循环,但事实并非如此.我也试图让它循环使用该onended属性(根据这个Mozilla支持线程,我也尝试了一点jQuery).到目前为止,没有任何工作.这是Chrome或我的代码的问题吗？

编辑:

我检查了网络事件和HEAD的工作副本(http://fhsclock-labs.heroku.com/no-violence)与我正在努力工作的应用程序.不同之处在于工作副本是从Heroku上的静态资产(通过Varnish,显然)提供视频,而我的服务来自GridFS(MongoDB).

Chrome的Inspector的"网络"标签显示,在我的应用程序中,视频会被请求三次.一次状态为"待定",第二次"取消",最后一次为200 OK.工作副本仅显示两个请求,一个是状态待定,另一个是206部分内容.但是,在视频播放一次后,该请求将更改为"已取消",并再次请求该视频.在我的应用程序中,这不会发生.

至于Type,在我的应用程序中,两个是"未定义"而另一个是"video/mp4"(应该是它).在工作应用程序中,所有请求都是"video/mp4".

另外,我Resource interpreted as Other but transferred with MIME type undefined.在控制台收到警告.

我不太确定从哪里开始.我相信这个问题是服务器端的,因为服务文件就像静态资产一样正常.可能是服务器没有发送正确的内容类型.这可能是GridFS的一个问题.我不知道.

无论如何,来源就在这里.您可以提供的任何见解表示赞赏.

Answer 1

啊,我只是偶然发现了这个问题.

事实证明,只有当视频文件由了解部分内容请求的服务器提供时,才能在Chrome 中的元素中循环(或任何类型的搜索).即服务器需要遵守包含具有206"部分内容"响应的"Range"标头的请求.如果视频足够小以便通过chrome完全缓冲,并且不再进行服务器往返,则情况甚至如此:如果您的服务器第一次没有遵守chrome的Range请求,则视频将无法循环播放或可搜索.<video>

所以,是的,GridFS存在一个问题,尽管可以说Chrome应该更宽容.

Answer 2

最简单的解决方法:

$('video').on('ended', function () {
  this.load();
  this.play();
});

在'ended'视频播放到结束事件触发,video.load()重置视频开始,video.play()开始玩它立即一旦加载.

这适用于您没有对服务器响应进行过多控制的Amazon S3,并且video.currentTime如果视频缺少其长度元数据,也可以解决与无法设置相关的Firefox问题.

类似javascript没有jQuery:

document.getElementsByTagName('video')[0].onended = function () {
  this.load();
  this.play();
};

Answer 3

看起来它过去是一个问题,至少有两个已关闭的错误,但两者都说明它已被修复:

http://code.google.com/p/chromium/issues/detail?id=39683

http://code.google.com/p/chromium/issues/detail?id=18846

由于Chrome和Safari都使用基于webkit的浏览器,因此您可以使用其中的一些工作:http: //blog.millermedeiros.com/2011/03/html5-video-issues-on-the-ipad-and-how -to-解决,他们/

function restartVideo(){
vid.currentTime = 0.1; //setting to zero breaks iOS 3.2, the value won't update, values smaller than 0.1 was causing bug as well.
vid.play();
}

//loop video
vid.addEventListener('ended', restartVideo, false);

Answer 4

以防万一上面的答案都没有帮助您，请确保您的检查器没有在选中禁用缓存选项的情况下运行。由于 Chrome 从缓存中抓取视频，所以它基本上会工作一次。在意识到这是原因之前刚刚调试了 20 分钟。作为参考，所以我知道我不是唯一一个别人的铬错误报告。