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

【问题标题】：HTML5 video (video.js) not loading in ChromeHTML5 视频 (video.js) 未在 Chrome 中加载
【发布时间】：2013-06-18 16:28:10
【问题描述】：

我有一个没有在 chrome 中加载的 html5 视频视频，它只显示来自 video.js 的加载微调器。

我在 chrome 控制台中也收到以下错误：

Uncaught TypeError: Cannot call method 'init' of undefined machinas.com/:830
["Video Error", Object]
0: "Video Error"
1: Object
length: 2
__proto__: Array[0]

.htaccess

AddType video/mp4 .mp4 .m4v
AddType video/webm .webm
AddType video/ogg .ogv .ogg

html

<video id="video-1" class="video-js vjs-default-skin"
                 width="100%" height="100%"
                 poster="videos/timelapse.jpg"
                 data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'>
                 <source src="videos/timelapse.mp4" type='video/mp4' />
                  <source src="videos/timelapse.webm" type='video/webm' />
                  <source src="videos/timelapse.ogv" type='video/ogg' />
                  Your browser doesn't support HTML5 video.
            <a href="videos/benstatue.mp4">Download</a> the video instead.
 </video>

有人知道可能是什么问题吗？

【问题讨论】：

标签： html5-video video.js

【解决方案1】：

错误转换后我遇到了同样的问题。尝试在 chrome 控制台中扩展问题以检查哪个视频文件产生错误。我认为它是 .mp4 版本。我使用“miro video Converter”将 mp4 转换为 mp4，效果很好，但质量会有所下降......

之后你可能会遇到和我一样的问题... chrome 不播放 .webm 文件...不知道为什么 :(

抱歉英语不好^^

【讨论】：

【解决方案2】：

好事（或坏事）是 这不是 VideoJS 问题。我有同样的问题。在网上我们可以找到一些信息（例如：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' });
}

【讨论】：