Strange error - video js error line 21 or 449 - mp4 not loading / just spinning

Question

Just experienced at strange error.

On some computers with the latest current version of Chrome (26.0.1410.43m) and video-js the video does not load, and the spinner just keeps on spinning. Notice that on a different computer with the same version of Chrome it works.

That is:

1. Computer 1 - Chrome 26.0.1410.43m - doesn't load
2. Computer 1 - Internet Explorer 9 - does load
3. Computer 2 - Chrome 26.0.1410.43m - does load
4. Computer 2 - all other browsers - does load

The error given in Chrome where it doesn't work is below.

What solved the error on Computer 1 was to convert the file to .webm format.

 Event, type: "error", isDefaultPrevented: function, timeStamp: 1365411449401, vdata1365411437555: true…}
altKey: undefined
attrChange: undefined
attrName: undefined
bubbles: false
button: undefined
cancelable: true
charCode: undefined
clientX: undefined
clientY: undefined
ctrlKey: undefined
currentTarget: video#example_video_1_html5_api.vjs-tech
accessKey: ""
attributes: NamedNodeMap
autoplay: false
baseURI: "http://kurssajten.balansekonomi.se/start.php?module=ks_part07&action=start"
buffered: TimeRanges
childElementCount: 0
childNodes: NodeList[2]
children: HTMLCollection[0]
classList: DOMTokenList
className: "vjs-tech"
clientHeight: 309
clientLeft: 0
clientTop: 0
clientWidth: 550
contentEditable: "inherit"
controller: null
controls: false
currentSrc: "https://s3-eu-west-1.amazonaws.com/kurssajten-cdn/uploads/media/ks_part07-start-introduction.mp4"
currentTime: 0
dataset: DOMStringMap
defaultMuted: false
defaultPlaybackRate: 1
dir: ""
draggable: false
duration: 80.17066955566406
ended: false
error: MediaError
firstChild: text
firstElementChild: null
height: 0
hidden: false
id: "example_video_1_html5_api"
initialTime: 0
innerHTML: "↵                    ↵                "
innerText: ""
isContentEditable: false
lang: ""
lastChild: text
lastElementChild: null
localName: "video"
loop: false
mediaGroup: ""
muted: false
namespaceURI: "http://www.w3.org/1999/xhtml"
networkState: 0
nextElementSibling: img.vjs-poster
nextSibling: img.vjs-poster
nodeName: "VIDEO"
nodeType: 1
nodeValue: null
offsetHeight: 309
offsetLeft: 0
offsetParent: div#example_video_1.video-js vjs-default-skin vjs-playing
offsetTop: 0
offsetWidth: 550
onabort: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
onchange: null
onclick: null
oncontextmenu: null
oncopy: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
onerror: null
onfocus: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onmousedown: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onreset: null
onscroll: null
onsearch: null
onselect: null
onselectstart: null
onsubmit: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
onwebkitkeyadded: null
onwebkitkeyerror: null
onwebkitkeymessage: null
onwebkitneedkey: null
outerHTML: "<video id="example_video_1_html5_api" class="vjs-tech" preload="none" data-setup="{}">↵                    ↵                </video>"
outerText: ""
ownerDocument: document
parentElement: div#example_video_1.video-js vjs-default-skin vjs-playing
parentNode: div#example_video_1.video-js vjs-default-skin vjs-playing
paused: false
playbackRate: 1
played: TimeRanges
player: Class
poster: ""
prefix: null
preload: "none"
previousElementSibling: null
previousSibling: null
readyState: 1
scrollHeight: 309
scrollLeft: 0
scrollTop: 0
scrollWidth: 550
seekable: TimeRanges
seeking: false
spellcheck: true
src: ""
startTime: 0
style: CSSStyleDeclaration
tabIndex: -1
tagName: "VIDEO"
textContent: "↵                    ↵                "
textTracks: TextTrackList
title: ""
translate: true
vdata1365411437555: 10
videoHeight: 308
videoWidth: 550
volume: 1
webkitAudioDecodedByteCount: 6771
webkitClosedCaptionsVisible: false
webkitDecodedFrameCount: 0
webkitDisplayingFullscreen: false
webkitDroppedFrameCount: 0
webkitHasClosedCaptions: false
webkitPreservesPitch: true
webkitPseudo: ""
webkitShadowRoot: null
webkitSupportsFullscreen: true
webkitVideoDecodedByteCount: 332046
webkitdropzone: ""
width: 0
__proto__: HTMLVideoElement
data: undefined
detail: undefined
eventPhase: 2
fromElement: undefined
handler: undefined
isDefaultPrevented: function returnFalse(){return false}
isPropagationStopped: function returnTrue(){return true}
keyCode: undefined
metaKey: undefined
newValue: undefined
offsetX: undefined
offsetY: undefined
originalEvent: Event
pageX: undefined
pageY: undefined
prevValue: undefined
relatedNode: undefined
relatedTarget: undefined
result: undefined
screenX: undefined
screenY: undefined
shiftKey: undefined
srcElement: video#example_video_1_html5_api.vjs-tech
target: div#example_video_1.video-js vjs-default-skin vjs-playing
timeStamp: 1365411449401
toElement: undefined
type: "error"
vdata1365411437555: true
view: undefined
wheelDelta: undefined
which: undefined
__proto__: Object

Answer 1

I'm almost positive this is the exact problem I had yesterday, again specifically with Chrome. Chrome cannot play .mp4 and its hanging up on the .mp4 in the first line of video sources. Most likely you have them listed like this:

<source src="/video/TVC-Intro.mp4" type='video/mp4'>
<source src="/video/TVC-Intro.webm" type='video/webm'>
<source src="/video/TVC-Intro.ogv" type='video/ogg'>

Move the webm tag above mp4 and I bet it works. That was the simple solution I found.