相关疑难解决方法(0)

HTML5视频不会循环播放

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

<video autoplay='true' loop='true' muted='true'>
  <source src='/admin/wallpapers/linked/4ebc66e899727777b400003c' type='video/mp4'></source>
</video>
Run Code Online (Sandbox Code Playgroud)

即使我已经告诉视频循环,但事实并非如此.我也试图让它循环使用该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的一个问题.我不知道.

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

rack google-chrome gridfs html5-video mime-types

66
推荐指数
4
解决办法
7万
查看次数

HTML5视频不会仅在Chrome中播放

一些背景

我已经在FF和Safari(包括iDevices)中测试了我的视频并且播放正常,但它无法在Chrome浏览器中播放.正如您在下面的代码中看到的,我创建了mp4,m4v,webM和ogv文件,并且我已经在我的计算机上测试了所有这些文件以解决任何播放问题.

症状/问题

在Chrome中,视频似乎已加载,并且控制台日志没有错误.按下播放按钮时,它会加载文件的一部分,但之后不会播放.然而,有趣的是,如果我在时间栏中随意点击一下,说到中途,即使有字幕,也会播放大约5秒的视频,但没有音频.

我的研究

我已经阅读了可能导致此问题的任何问题,但我没有找到任何有用的想法.要注意,我在.htaccess文件中写了以下内容:

# ----------------------------------------------------------------------
# Proper MIME type for all files
# ----------------------------------------------------------------------

# Audio
AddType audio/ogg                      oga ogg
AddType audio/mp4                      m4a
AddType audio/webm                     webm

# Video
AddType video/ogg                      ogv
AddType video/mp4                      mp4 m4v
AddType video/webm                     webm

# Assorted types
AddType image/x-icon                        ico
AddType image/webp                          webp
AddType text/cache-manifest                 appcache manifest
AddType text/x-component                    htc
AddType application/x-chrome-extension      crx
AddType application/x-opera-extension       oex
AddType application/x-xpinstall             xpi
AddType application/octet-stream            safariextz
AddType application/x-web-app-manifest+json webapp
AddType text/x-vcard …
Run Code Online (Sandbox Code Playgroud)

html5 google-chrome html5-video mediaelement.js

21
推荐指数
2
解决办法
9万
查看次数