Question

我有一个没有加载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>

任何人都知道可能是什么问题？

Answer 1

错误转换后我遇到了同样的问题。尝试在chrome控制台中扩展问题以检查哪个视频文件产生错误。我认为它是.mp4版本。我使用“miro video Converter”从mp4转换为mp4，它运行良好，但你会有一点质量损失......

之后你可能会遇到像我一样的问题...... chrome不会播放.webm文件......不明白为什么：（

关于糟糕的英语^^

Answer 2

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

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

2 个答案: