HTML5 视频 (video.js) 未在 Chrome 中加载 (2)

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 Player 播放。哈哈。

视频在 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" />

我尝试将 webm 源放在 mp4 之前。 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

您尚未在代码中关闭源代码行。我有同样的问题，这解决了它。