HTML5video不会循环播放

我有一个video作为网页的背景,我试图让它循环。 这里是代码:

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

即使我已经告诉video循环,它不。 我也试图让它循环onended属性(按照这个Mozilla支持线程 ,我也尝试了一下jQuery)。 到目前为止没有任何工作。 这是Chrome或我的代码的问题?

编辑:

我检查了networking事件和HEAD的工作副本( http://fhsclock-labs.heroku.com/no-violence )与我想要工作的应用程序。 不同之处在于,工作副本是通过Heroku上的静态资源(通过Varnish显然)提供video,而我的是从GridFS(MongoDB)提供的。

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

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

另外,我将Resource interpreted as Other but transferred with MIME type undefined. 控制台中的警告。

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

无论如何,来源在这里 。 任何你可以提供的洞察力是值得赞赏的。

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

事实certificate,Chrome上的<video>元素的循环(或任何types的search)只有在video文件由理解部分内容请求的服务器提供时才有效。 即服务器需要对包含“Range”标题的请求进行响应,其中包含206“Partial Content”响应。 如果video足够小,可以通过镀铬进行全面缓冲,则不会发生更多的服务器往返:如果您的服务器第一次没有兑现镀铬的“范围”请求,该video将不会是可循环或可寻找的。

所以,是的,GridFS的问题,虽然可以说铬应该更宽容。

最简单的解决方法:

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

当video到达结尾时, 'ended'事件触发, video.load()将video重置为开始, video.play()在载入后立即开始播放。

这适用于Amazon S3,在这种情况下,您对服务器响应没有太多的控制权,并且如果video丢失了其长度元数据,则与video.currentTime相关的Firefox问题也无法设置。

类似的JavaScript没有jQuery:

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

看起来它过去是一个问题,至less有两个被修正的错误,但都说它是固定的:

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

我的情况:

我有完全相同的问题,但单独更改响应消息的标题没有做。 没有循环,重放或寻求。 也是一个纯粹的停止不起作用,但这可能是我的configuration。

回答:

根据一些网站(不能再find它们),也可以在video结束之后触发load()方法,并在下一个应该开始之前。 这应该重新加载源导致再次工作的video/audio元素。

@约翰

请注意,你的答案/链接是正常的错误,而不是关注这个问题。 使用服务器/networking服务器是导致这个问题的原因。 而这些链接描述的错误是不同的。 那也是为什么答案不起作用。

我希望它有帮助,我仍然在寻找一个解决scheme。

以防万一上面的答案都不能帮助你,请确保你的检查器没有运行Disable Cache选项。 由于Chrome从caching抓取video,基本上只能使用一次。 只是debugging了20分钟,才意识到这是原因。 作为参考,所以我知道我不是唯一一个别人的铬缺陷报告 。

这是超级跛脚但Dropbox使用正确的状态代码。 所以上传到Dropbox并用dlreplacewww。

因此,使用Dropboxurlvideo播放罚款。

我知道这个问题并不完全与问题相关,但如果遇到类似问题时有人遇到此问题,请确保您的资料正确。

我正在加载一个mp4和一个webm文件,并注意到该video不在Chrome循环。 这是因为webm文件是列出的第一个source所以Chrome正在加载webm文件,而不是mp4

希望能够帮助解决这个问题的其他人。

 <video autoplay loop> <source src="/path-to-vid/video.mp4" type="video/mp4"> <source src="/path-to-vid/video.webm" type="video/webm"> </video>