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.
- Demo - When a
.movvideo source is also included: http://dev.muzioapp.com.s3-website-us-east-1.amazonaws.com/videoTest.html- Observations: the VideoJS player (top) does NOT load the WebM video... Also, the second video on the page uses the default browser HTML5 video player, and it DOES properly fallback to load the .webm source on Firefox.
- Demo - ONLY
.webmvideo source: http://dev.muzioapp.com.s3-website-us-east-1.amazonaws.com/videoTest-noMov.html- Observations: The VideoJS player (top) successfully loads the WebM video in Firefox.
- I am hosting these videos on Amazon S3, and I verified that the value for the "Content-Type" of this .webm video file (in the Metadata section of the Properties panel) is "video/webm".
- Demo - When a
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!
