HTML5 video (video.js) not loading in Chrome

问题:

I have a html5 video video that is not loading in chrome, it just shows the loading spinner from video.js.

I get the following error in chrome console too:

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>

Anyone know what could be the issue?

回答1:

I had same Problem after wrong Conversion. Try to expand the problem in chrome console to check which video file produces the error. I think its the .mp4 version. I used "miro video Converter" to convert from mp4 to mp4 and it works well but you get a little quality loss...

after that its possible that you have same problem like me... chrome doesnt play .webm files... no idea why :(

sry about bad english ^^

回答2:

The good thing (or bad) is the fact that this is not the VideoJS issue. I had the same problem. Looking on the Internet we can find some informations (for example: https://github.com/flowplayer/flowplayer/issues/423) and it considered to be a Chrome bug. Issues was reported in JWPlayer and VideoJS forum as well.

AFAIK the only way to bypass this is loading webm file:

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

I tried to put webm source before mp4. Chrome recognized webm as "good" source and play it well. Sadly FF and IE won't play a thing. So we need to chose one format after browser-check (what is wrong but I in this point I don't see another way; this is not JS feature related problem...).

Why browser detection is generally bad idea? You can read more about this in Test-Driven Javascript Development book or here: http://jibbering.com/faq/notes/detect-browser/

As quick fix you can use something like this:

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