Question

与HTML5 video (video.js) not loading in Chrome相同的问题尚未解决。

在只有mp4源的Chrome上，我在控制台中收到相同的消息：

Array[2]
0: "Video Error"
1: Object
AT_TARGET: 2
Ab: function c(){return f}
BLUR: 8192
BUBBLING_PHASE: 3
CAPTURING_PHASE: 1
CHANGE: 32768
CLICK: 64
DBLCLICK: 128
DRAGDROP: 2048
FOCUS: 4096
KEYDOWN: 256
KEYPRESS: 1024
KEYUP: 512
MOUSEDOWN: 1
MOUSEDRAG: 32
MOUSEMOVE: 16
MOUSEOUT: 8
MOUSEOVER: 4
MOUSEUP: 2
NONE: 0
SELECT: 16384
bubbles: false
cancelBubble: true
cancelable: true
clipboardData: undefined
currentTarget: video#videojs-306-field-video-file-video_html5_api.vjs-tech
defaultPrevented: false
eventPhase: 2
initEvent: function initEvent() { [native code] }
lc: function d(){return l}
preventDefault: function (){e.preventDefault&&e.preventDefault();a.returnValue=l;a.yb=c}
relatedTarget: undefined
returnValue: true
srcElement: video#videojs-306-field-video-file-video_html5_api.vjs-tech
stopImmediatePropagation: function (){e.stopImmediatePropagation&&
stopPropagation: function (){e.stopPropagation&&e.stopPropagation();a.cancelBubble=f;a.Ab=c}
target: video#videojs-306-field-video-file-video_html5_api.vjs-tech
timeStamp: 1372499702066
type: "error"
which: undefined
yb: function d(){return l}
__proto__: Object
length: 2
__proto__: Array[0]
concat: function concat() { [native code] }
constructor: function Array() { [native code] }
every: function every() { [native code] }
filter: function filter() { [native code] }
forEach: function forEach() { [native code] }
indexOf: function indexOf() { [native code] }
join: function join() { [native code] }
lastIndexOf: function lastIndexOf() { [native code] }
length: 0
map: function map() { [native code] }
pop: function pop() { [native code] }
push: function push() { [native code] }
reduce: function reduce() { [native code] }
reduceRight: function reduceRight() { [native code] }
reverse: function reverse() { [native code] }
shift: function shift() { [native code] }
slice: function slice() { [native code] }
some: function some() { [native code] }
sort: function sort() { [native code] }
splice: function splice() { [native code] }
toLocaleString: function toLocaleString() { [native code] }
toString: function toString() { [native code] }
unshift: function unshift() { [native code] }
__proto__: Object

在.htaccess

中正确设置了类型

<video id="videojs-306-field-video-file-video_html5_api" data-setup="{}" class="vjs-tech" 

autoplay="" preload="auto" src="http://wasserfuerwasser.ch/sites/default/files/videohtml5/Tele1_Wasser_fuer_Wasser.mp4">
  <source src="http://wasserfuerwasser.ch/sites/default/files/videohtml5/Tele1_Wasser_fuer_Wasser.mp4" type="video/mp4">
</video>

这个mp4文件不能在Chrome中本地播放 - 一些编解码器问题 - 色彩空间问题等但是而不是控制台中的错误信息，mp4应该只通过Video.js Flash播放器播放。 AFAIK。

视频“工作”在FF，IE和Safari中 - （在FF中我认为控制台也显示错误信息，但视频仍然加载）。

Video.js与Drupal7一起使用

Answer 1

<source src="video/big_buck_bunny.mp4" type="video/mp4" />

<source src="video/big_buck_bunny.webm" type="video/webm" />

到

<source src="video/big_buck_bunny.webm" type="video/webm" />

<source src="video/big_buck_bunny.mp4" type="video/mp4" />

首先是webm文件，我的问题解决了

Answer 2

好事（或坏事）是这不是VideJS问题。我有同样的问题。在互联网上查看我们可以找到一些信息（例如：https://github.com/flowplayer/flowplayer/issues/423），它被认为是Chrome错误。 JWPlayer和VideoJS论坛也报道了问题。

AFAIK绕过这个的唯一方法是加载webm文件：

<source src="test.webm" type="video/webm" />

我试图在mp4之前添加webm源代码。 Chrome认为webm是“好”的来源并且播放得很好。可悲的是，FF和IE不会发挥作用。因此我们需要在浏览器检查后选择一种格式（出了什么问题，但我在这一点上看不到另一种方式;这不是与JS功能相关的问题......）。

为什么浏览器检测通常是个坏主意？您可以在测试驱动的Javascript开发手册或此处阅读更多相关信息：http://jibbering.com/faq/notes/detect-browser/

作为快速解决方案，您可以使用以下内容：

/* load webm for chrome */
if (window.chrome) {
    videojs('videoTagId').src({ type: "video/webm", src: 'path/to/file.webm' });
}

Answer 3

您尚未在代码中关闭源代码行。我遇到了同样的问题，并修复了它。

HTML5视频（video.js）未在Chrome中加载（2）

3 个答案: