CODEWITHSUNDEEP
html5-videovideo.jswebm
user2529988
user2529988

Reputation: 11

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

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:

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!

Upvotes: 1

Views: 5903

Answers (2)

StackSlave
StackSlave

Reputation: 10627

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

Upvotes: 0

Ast Derek
Ast Derek

Reputation: 2729

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.

Upvotes: 0

Related Questions