我看到其他几个与 Firefox 相关的线程没有正确渲染 VideoJS 的视频播放器并抛出“VideoError”。大多数这些线程都是通过修改 .htaccess 文件以正确映射各种 Content-Types 来解决的。我相信我已经排除了问题的根源。
到目前为止,这些是我为解决问题所采取的步骤:
- 在 Firefox 或 Chrome 中查看视频文件时有效
- 事实上,如果没有提供 .webm 文件以外的源,VideoJS 播放器也可以在 Firefox 中使用。在以下演示页面中,.webm 视频很容易被 Zencoder 水印识别。
- 演示 - 当
.mov
还包含视频源时:http : //dev.muzioapp.com.s3-website-us-east-1.amazonaws.com/videoTest.html- 观察结果:VideoJS 播放器(顶部)不加载WebM 视频...此外,页面上的第二个视频使用默认浏览器 HTML5 视频播放器,并且它可以正确回退以在 Firefox 上加载 .webm 源。
- 演示 - 仅
.webm
视频源:http ://dev.muzioapp.com.s3-website-us-east-1.amazonaws.com/videoTest-noMov.html- 观察结果:VideoJS 播放器(顶部)在 Firefox 中成功加载了 WebM 视频。
- 我在 Amazon S3 上托管这些视频,并且我验证了此 .webm 视频文件(在属性面板的元数据部分中)的“内容类型”的值为“视频/webm”。
- 演示 - 当
标记(有多个来源):
<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>
标记(只有 .webm 源):
<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>
用于初始化 VideoJS 播放器的 JavaScript:
<script type="text/javascript">
videojs('vid-2', {'controls': true, 'controls': true, 'autoplay': false, 'preload': 'auto', 'width': '800', 'height': '600'}, function() {});
</script>
我在 Firefox 控制台中看到的错误:
[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}]
任何人有任何想法会是什么问题?拥有 .mp4/.mov 视频文件是该项目的要求,以支持所有基于 webkit 的浏览器,我反对使用 Flash 后备。我将不胜感激任何帮助!我已经用尽了我能想到的一切来解决这个问题。提前致谢!