HTML5 视频不会循环播放 [英] HTML5 video will not loop

问题描述

我有一个视频作为网页的背景，我正在尝试让它循环播放.代码如下:

I have a video as a background to a web page, and I am trying to get it to loop. Here is the code:

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

即使我已经告诉视频循环播放，它也没有.我还尝试让它与 onended 属性循环(根据 这个 Mozilla 支持线程，我也尝试了一点 jQuery).到目前为止，一切都没有奏效.是 Chrome 的问题还是我的代码的问题?

Even though I have told the video to loop, it does not. I also tried to get it to loop with the onended attribute (as per this Mozilla support thread, I also tried that bit of jQuery). Nothing has worked so far. Is it an issue with Chrome, or my code?

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

I checked the Network events and HEAD of a working copy (http://fhsclock-labs.heroku.com/no-violence) versus the application I'm trying to get working. The difference is the working copy is serving up the video from a static asset on Heroku (via Varnish, apparently), whilst mine is serving from GridFS (MongoDB).

Chrome Inspector 的网络选项卡显示，在我的应用程序中，视频被请求了 3 次.一次Status是pending"，第二次是canceled"，最后一次是200 OK.工作副本只显示了两个请求，一个是 Status 待处理，另一个是 206 Partial Content.但是，在视频播放一次后，该请求会更改为已取消"，并且会对该视频发出另一个请求.在我的应用程序中，这不会发生.

The Network tab of Chrome's Inspector show that in my application, the video is requested three times. One time the Status is "pending", the second is "canceled", and the final one is 200 OK. The working copy only shows two requests, one's Status is pending and the other is 206 Partial Content. However, after the video plays once, that request changes to "Cancelled" and it makes another request for that video. In my application, that does not happen.

至于类型，在我的应用程序中，两个是未定义"，另一个是视频/mp4"(应该是).在工作应用中，所有请求都是video/mp4".

As for Type, in my application, two are "undefined" and the other "video/mp4" (which it is supposed to be). In the working app, all of the requests are "video/mp4".

此外，我收到 Resource 被解释为其他但以未定义的 MIME 类型传输. 控制台中的警告.

In addition, I'm getting Resource interpreted as Other but transferred with MIME type undefined. warnings in the Console.

我不太确定从哪里开始.我认为问题出在服务器端，因为将文件作为静态资产提供工作正常.可能是服务器没有发送正确的内容类型.这可能是 GridFS 的问题.我不知道.

I'm not really quite sure where to begin on this. It's my belief that the issue is server-side, as serving the file as static assets works fine. It could be that the server isn't sending the correct content type. It could be an issue with GridFS. I do not know.

无论如何，来源是这里.感谢您提供的任何见解.

At any rate, the source is here. Any insight that you can offer is appreciated.

推荐答案

啊，我刚刚偶然发现了这个确切的问题.

Ah, I just stumbled into this exact problem.

事实证明，Chrome 上的 元素中的循环(或任何 类型的搜索)仅在提供视频文件时才有效由能够理解部分内容请求的服务器启动.即服务器需要接受包含范围"标头和 206部分内容"响应的请求.如果视频小到足以被 chrome 完全缓冲，并且不再进行服务器往返行程，情况也是如此:如果您的服务器第一次没有满足 chrome 的 Range 请求，则视频将无法循环或可搜索.

As it turns out, looping (or any sort of seeking, for that matter) in <video> elements on Chrome only works if the video file was served up by a server that understands partial content requests. i.e. the server needs to honor requests that contain a "Range" header with a 206 "Partial Content" response. This is even the case if the video is small enough to be fully buffered by chrome, and no more server-round trips are made: if your server didn't honor chrome's Range request the first time, the video will not be loopable or seekable.

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

So yes, an issue with GridFS, although arguably Chrome should be more forgiving.

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