VideoJS player not loading .webm video file for Firefox (throws "Video Error". Works when no other video sources (like mp4/mov) are provided

user2529988 Source

I saw several other threads related to Firefox not properly rendering VideoJS's video player and throwing a "VideoError". Most of those threads were solved by modifying the .htaccess file to properly map the various Content-Types. I believe I have ruled out that as the origin of the problem.

These are the steps I have taken to troubleshoot the problem so far:

  • The video file works when viewed in either Firefox or Chrome
  • In fact, the VideoJS player ALSO WORKS in Firefox, IF no sources other than the .webm file are provided. In the following demo pages, the .webm video is easily identifiable by the Zencoder watermark.

Markup (with multiple sources):

<video id="vid-2" class="video-js vjs-muzio-skin">
<source type="video/mp4" src="http://dev.muzioapp.com.s3-website-us-east-1.amazonaws.com/content/ourMuzeVid1.mov" />
<source type="video/webm" src="http://dev.muzioapp.com.s3-website-us-east-1.amazonaws.com/content/ourMuzeVid1.webm" />
</video>

Markup (with only .webm source):

<video id="vid-2" class="video-js vjs-muzio-skin">
<source type="video/webm" src="http://dev.muzioapp.com.s3-website-us-east-1.amazonaws.com/content/ourMuzeVid1.webm" />
</video>

JavaScript to initialize VideoJS player:

<script type="text/javascript">
videojs('vid-2', {'controls': true, 'controls': true, 'autoplay': false, 'preload': 'auto', 'width': '800', 'height': '600'}, function() {});
</script>

The error I see in the Firefox console:

[17:59:46.293] ["Video Error", {type:"error", target:({}), currentTarget:({}), eventPhase:2, bubbles:false, cancelable:false, timeStamp:1372373986292000, defaultPrevented:false, stopPropagation:(function (){e.stopPropagation&&e.stopPropagation();a.cancelBubble=f;a.Ab=c}), preventDefault:(function (){e.preventDefault&&e.preventDefault();a.returnValue=l;a.yb=c}), initEvent:function initEvent() {
    [native code]
}, stopImmediatePropagation:(function (){e.stopImmediatePropagation&&
e.stopImmediatePropagation();a.lc=c;a.stopPropagation()}), originalTarget:({}), explicitOriginalTarget:({}), preventBubble:function preventBubble() {
    [native code]
}, preventCapture:function preventCapture() {
    [native code]
}, getPreventDefault:function getPreventDefault() {
    [native code]
}, isTrusted:true, NONE:0, CAPTURING_PHASE:1, AT_TARGET:2, BUBBLING_PHASE:3, MOUSEDOWN:1, MOUSEUP:2, MOUSEOVER:4, MOUSEOUT:8, MOUSEMOVE:16, MOUSEDRAG:32, CLICK:64, DBLCLICK:128, KEYDOWN:256, KEYUP:512, KEYPRESS:1024, DRAGDROP:2048, FOCUS:4096, BLUR:8192, SELECT:16384, CHANGE:32768, RESET:65536, SUBMIT:131072, SCROLL:262144, LOAD:524288, UNLOAD:1048576, XFER_DONE:2097152, ABORT:4194304, ERROR:8388608, LOCATE:16777216, MOVE:33554432, RESIZE:67108864, FORWARD:134217728, HELP:268435456, BACK:536870912, TEXT:1073741824, ALT_MASK:1, CONTROL_MASK:2, SHIFT_MASK:4, META_MASK:8, relatedTarget:(void 0), yb:function d(){return l}, Ab:function c(){return f}, lc:function d(){return l}, which:(void 0), cancelBubble:true}]

Anyone have any ideas what the issue would be? Having an .mp4/.mov video file is a requirement of this project in order to support all the webkit based browsers, and I am resistant to using a Flash fallback. I would greatly appreciate any help!! I've exhausted everything I can think of to approach this issue. Thanks in advance!

html5-videovideo.jswebm

Answers

answered 5 years ago Ast Derek #1

It seems mov videos are not supported by HTML5 Firefox implementation, I get this error:

Specified "type" attribute of "video/mp4" is not supported. Load of media resource http://dev.muzioapp.com.s3-website-us-east-1.amazonaws.com/content/ourMuzeVid1.mov failed.

The explanation about this (maybe) confusion is here: https://stackoverflow.com/a/5080583/208067

When the video is not embedded as a html5 video, Firefox looks for a suitable plugin to play the video and finds QuickTime. The video tag does not.

answered 5 years ago PHPglue #2

I experienced a similar problem. It was due to the video convertor not encoding the video correctly. In the end I decided on using YouTube. Try another video convertor. Other than that, .mov is QuickTime, try .mp4.

http://www.w3schools.com/html/html5_video.asp

http://www.winxdvd.com/resource/mov.htm

comments powered by Disqus