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

问题描述

我有一个视频作为网页的背景，我试图让它循环。这里是代码：

 < 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 /无暴力）与我尝试工作的应用程序相比较。不同之处在于工作副本从Heroku上的静态资源（通过Varnish显然）提供视频，而我的是从GridFS（MongoDB）提供的。

Chrome Inspector的Network标签显示，在我的应用程序中，视频被请求三次。有一次状态是未决，第二个是取消，最后一个是200 OK。工作副本只显示两个请求，其中一个状态处于挂起状态，另一个是206部分内容。但是，在视频播放一次之后，该请求会变为已取消，并会再次请求该视频。在我的应用程序中，这没有发生。

至于Type，在我的应用程序中，两个是undefined，另一个是video / mp4成为）。在工作应用程序中，所有请求都是video / mp4。

另外，我将 Resource解释为Other，但转移MIME类型未定义。控制台中的警告。

我不太确定从哪里开始。我相信这个问题是服务器端的问题，因为静态资产可以正常工作。可能是服务器没有发送正确的内容类型。这可能是GridFS的一个问题。我不知道。

无论如何，源代码都是这里。任何洞见，你可以提供的是赞赏。

解决方案

啊，我只是偶然发现这个确切的问题。
$ b

事实证明，在< video> 寻找任何类型的东西） > Chrome上的元素仅适用于视频文件是由了解部分内容请求的服务器提供的。即服务器需要遵守包含具有206部分内容响应的范围标头的请求。如果视频足够小以便可以通过镀铬进行全面缓冲，并且不再进行服务器往返，那么情况更是如此：如果您的服务器第一次没有兑现镀铬的范围请求，则该视频不会是可循环或可寻找的。



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

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>

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?

Edit:

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).

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.

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".

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

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.

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.

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

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