HTML5 video (video.js) not loading in Chrome (2)

Question

This the same question as HTML5 video (video.js) not loading in Chrome which was not resolved.

On Chrome with only a mp4 source I get the same message in the console:

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

Types are set up correctly in .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>

This mp4 file does not Play natively in Chrome - some codec Problem - colorspace Problem etc. but instead of the error message in the console, the mp4 should then just Play via the Video.js Flash Player. AFAIK.

The Video "works" in FF, IE, and Safari - (in FF i think the console also Displays an error message but the Video loads anyway).

Video.js used in conjunction with Drupal7

Answer 1

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

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

to

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

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

firstly webm file, my problem solved

Answer 2

The good thing (or bad) is the fact that this is not the VideJS 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' });
}

Answer 3

You haven't closed the source line off in your code. I had the same problem and this fixed it.