Firefox に関連する他のいくつかのスレッドが、VideoJS のビデオ プレーヤーを適切にレンダリングせず、「VideoError」をスローしているのを見ました。これらのスレッドのほとんどは、.htaccess ファイルを変更してさまざまなコンテンツ タイプを適切にマッピングすることで解決されました。問題の原因としてそれを除外したと思います。
これまでに問題をトラブルシューティングするために行った手順は次のとおりです。
- 動画ファイルは、Firefox または Chrome で表示すると機能します
- 実際、.webm ファイル以外のソースが提供されていない場合、VideoJS プレーヤーは Firefox でも動作します。次のデモ ページでは、.webm ビデオは Zencoder の透かしで簡単に識別できます。
- デモ -
.movビデオ ソースも含まれている場合: http://dev.muzioapp.com.s3-website-us-east-1.amazonaws.com/videoTest.html- 観察: VideoJS プレーヤー (上) は WebM ビデオをロードしません... また、ページの 2 番目のビデオはデフォルトのブラウザー HTML5 ビデオ プレーヤーを使用し、Firefox で .webm ソースをロードするために適切にフォールバックします。
- デモ -
.webmビデオソースのみ: http://dev.muzioapp.com.s3-website-us-east-1.amazonaws.com/videoTest-noMov.html- 観察: VideoJS プレーヤー (上) は、WebM ビデオを Firefox に正常にロードします。
- これらの動画を Amazon S3 でホストしています。この .webm 動画ファイルの「Content-Type」の値 ([プロパティ] パネルの [メタデータ] セクション) が「video/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}]
問題が何であるか誰にも考えがありますか? すべての Webkit ベースのブラウザーをサポートするために、このプロジェクトでは .mp4/.mov ビデオ ファイルが必要であり、Flash フォールバックの使用には抵抗があります。どんな助けでも大歓迎です!! この問題に取り組むために考えられることはすべて使い果たしました。前もって感謝します！