html5 video.js を使用し、すべてのブラウザと互換性があります

1. 素材を準備します

Video.jsダウンロード: http://www.videojs.com/

2. コード

HTMLコードを貼り付けます:

<video id="example_video_1" class="video-js" width="640" height="410" controls="controls" autoplay preload="auto"  poster="/Images/treatment/reenex2.png">  
   <source src="/Content/videos/homepage.MP4" type=&#39;video/mp4; codecs="avc1.42E01E, mp4a.40.2"&#39; />  
   <source src="/Content/videos/homepage.oggtheora.ogv" type=&#39;video/webm; codecs="vp8, vorbis"&#39; />  
   <source src="/Content/videos/homepage.webmhd.webm" type=&#39;video/ogg; codecs="theora, vorbis"&#39; />   
</video>

互換性のためにここにありますブラウザでは 3 つのビデオ形式が指定されていますが、問題はまだ解決されていません。解決策は後で説明します。

ビデオのいくつかのプロパティについての簡単な説明:

Controls: コントロールパネルを表示するかどうか

Autoplay: 自動的に再生するかどうか

Preload: ビデオがプリロードされているかどうか

Poster: 現在のビデオデータが無効な場合に表示されます(プレビュー画像)

より詳しい紹介については、こちらの記事をご覧ください: http://www.cnblogs.com/kiter/archive/2013/02/25/2932157.html

互換性を解決します

メモ。 : 上記の JavaScript コードは、html5 要素をサポートする IE バージョンの場合、古いバージョンの IE の場合、HTML5shiv を使用して、HTML5 をサポートしていないブラウザが HTML の新しいタグをサポートできるようにすることができます。 htnl5shiv は主に、HTML5 で提案された新しい要素が IE6/IE7/IE8 で認識されず、子要素をラップする親ノードとして使用できず、CSS スタイルを適用できないという問題を解決します。 CSS スタイルを不明な要素に適用するには、document.createElement(elementName) を実行するだけです。 html5shiv の動作原理はこれに基づいています。 html5shiv の使い方はとても簡単です。IE9 は html5 をサポートしているので、次のコードを先頭に追加するだけです。

<script></script>

でも、今は本当に XXXXX です、

それから。自分でダウンロードしてみると、html5media.min.js ファイルにまだ問題があることがわかります。2 つの swf ファイルが見つからないことがわかります。ご存知のとおり、ビデオを再生するためのプラグイン、この 2 つのビデオは必須です。それから再びそれらを降ろしてください。

ネットワーク ディスク上の実際のファイルを共有しました: http://pan.baidu.com/s/1ntiaul7

問題は解決できたようですが、問題なく実行した後も、まだエラーが発生します:

私自身の分析の結果、その理由がわかりました。ビデオの src 属性が必要であるということです

次に、video タグを確認する必要があります

問題ないでしょう、実行して、Chrome、FF IE Safairを見てください、問題ありません

転送サーバーを見てみましょう（前提条件：iisは.mp4のMIME拡張子で構成されている必要があります、タイプ：video /mpeg )

しかし、また問題が出てきました。Google、safairは正常に再生できますが、FFとIEは再生できません。データを確認したところ、MiMEタイプはvideo/mp4である必要があることがわかりました

。