HTML5 ビデオ再生プラグイン video.js の紹介

video.js は、非常に人気のある HTML5 ビデオ再生プラグインです。モバイル端末でビデオを再生するのに非常に適しています (WeChat Web ページなど)。強力な機能があり、フラッシュへのダウングレードをサポートし、IE8 と互換性があります。公式 Web サイト: http://videojs.com/ git&demo: http://files.cnblogs.com/files/stoneniqiu/video-js-5.11.4.zip

control はコントロール バーを表し、prload: プリロード、poster は最初に表示される画像を表します。 data-set は、json を使用していくつかのパラメーターを設定することをサポートしています。言うまでもなく、ソースとは字幕を指します。

このように出てきますが、実際には別のニーズがあります。

デモの alt ファイルにある novtt の js を適用する必要があります。この方法では、ビデオ コントロール バーで文字を選択する必要がなくなります。もちろん、ページ内に track 要素は必要なくなります。

 <link href=~/js/video-js-5.11.4/alt/video-js-cdn.min.css rel=stylesheet /><script src=~/js/video-js-5.11.4/alt/ video.novtt.min.js></script>

CSSを使用して自分で設定し始めましたが、何も機能しないことがわかりました。ビデオ要素は通常の要素とは異なり、内部要素の比率を設定することで応答性の高い幅と高さを実現する必要があります。 video.js には 2 つのメソッドが用意されています。

js: 流体を true に設定します。

 var player = videojs('video', { Fluid: true }, function () { console.log('Good to go!'); this.play(); // 何らかの理由で自動再生を信頼しない場合 } ）

ただし、これにはビデオ要素の開始幅と高さを設定する必要もあります。そうしないと、開始画像が表示されません。

css: スタイルを直接追加できます。 .vjs-fluid、.vjs-4-3、.vjs-16-9 の 3 つのタイプがあります。最初のものは自動的に計算され、後の 2 つは比率を指定します。 スタイルでは、画像を表示するための開始幅と高さを設定する必要もあります。

 <video id=video class=video-js vjs-default-skin vjs-fluidposter=http://vjs.zencdn.net/v/oceans.png width=375 height=200 コントロール preload=none data-setup=' { html5 : {nativeTextTracks : false } }'> <source [email protected] type=video/mp4> <p class=vjs-no-js> ビデオを再生するには JavaScript を有効にする必要があります。HTML5 をサポートする <a href=http://videojs.com/html5-video-support/ target=_blank> ブラウザを使用することをお勧めします。 /a> にアクセスします。 </p> </video>

イベントの注意:

通常、開始、一時停止、終了の 3 つのイベントに焦点を当てます。

 var player = videojs('video', { }, function () { console.log('Good to go!'); //this.play(); // 何らかの理由で自動再生を信頼しない場合 }) ; player.on('プレイ', function () { console.log('プレイの開始/再開'); }); player.on('一時停止', function () { console.log('プレイの一時停止'); }); player.on('終了', function () { console.log('プレイ終了'); });

更新イベントもあります。

 player.on('timeupdate', function() { console.log(player.currentTime()); });

現在の時間と合計時間が等しいかどうかを判断することで、ビデオが終了するかどうかを判断できます。

 player.on('timeupdate', function () { // currentTime() ===duration() の場合、ビデオの再生が終了 if (player.duration() != 0 && player.currentTime() === player .duration()) { // 再生の終了} });

一部の先輩は、Android デバイスでは終了イベントが正しくトリガーされないことを指摘しました (最初に準備してください)。

デフォルトの iis MIME 設定では mp4 タイプは追加されません。ローカルでの再生には問題ありませんが、サーバーに到達すると 404 エラーが発生します。これには、iis で MIME を設定する必要があります。

flv 形式は、関連付けられた拡張子: .flv、コンテンツ タイプ: application/octet-stream とともに追加されます。

f4v 形式は拡張子: .f4v、コンテンツ タイプ: application/octet-stream です。

mp4 形式は拡張子: .mp4、コンテンツ タイプ: video/mp4 です。

ogv 形式は拡張子: .ogv、コンテンツ タイプ: video/ogg です。

WebM 形式は拡張子: .webm、コンテンツ タイプ: video/webm です。

設定を有効にするには、iis を再起動します。

公式は、編集して遊べるコードペンのアドレス http://codepen.io/heff/pen/EarCt を提供しました。 主に再生ボタン、コントロールバー、プログレスバーです。デフォルトは上記の通りです。

これもあります: http://codepen.io/zanechua/pen/GozrNe SublimeVideo

再生テクノロジは、ブラウザまたはプラグインでビデオまたはオーディオ ファイルを再生するために使用されます。h5 の場合は、ビデオまたはオーディオ要素が使用されます。フラッシュ プレーヤーは、フラッシュ プレーヤーを定義します。フラッシュだけでなく、Silverlight、Quicktime などの再生技術もサポートしています。データ設定は要素内で直接定義できます。サポートされているテクノロジーを指定します。

 <video data-setup='{techOrder: [html5、フラッシュ、その他のサポートされている技術]}'

または、JavaScript を使用します。

 videojs(videoID, { techOrder: [html5、フラッシュ、その他のサポートされている技術]});

ここでのデフォルトのルールでは、最初のテクノロジーがプレイに使用され、失敗した場合は後続のオプションが使用されます。たとえば、上記の最初の場所に html5 を記述すると、すべての動画が html5 を使用して再生されます。フラッシュを優先したい場合は、フラッシュを前に置くだけです。

 data-setup='{ techOrder: [flash,html5] }'

ページ要素では、video.js が使用する Flash オブジェクトを提供していることがわかります。

autoplay 属性を video 要素に追加するか、autoplay:true を js に追加します

 <video id=video autoplayposter=/images/bk.png width=375 height=200 コントロール preload=none > </video>

または

 var player = videojs('video', { autoplay:true }, function () { console.log('Good to go!'); //this.play(); // 保険、積極的に play( を呼び出すこともできます) ) });

自動再生は常に煩わしいので、その逆は autoplay 属性を削除するか false に設定することです。

他の：

video.js は拡張プラグインをサポートしており、非常に便利です。

 //プラグイン関数を定義 examplePlugin(options) { this.on('play', function (e) { console.log('再生を開始しました!'); }); // videojs.plugin(' を登録します) examplePlugin' , examplePlugin); // player.examplePlugin({ exampleOption: true }); を使用します。

プレーヤーの API はプラグイン内で直接呼び出すことができます。 プレイリストが必要な場合に学習できるプレイリスト プラグインがあります。 https://github.com/brightcove/videojs-playlist および http://videojs.com/advanced/ には次のような効果があります。

以上、編集者が紹介した HTML5 ビデオ再生プラグイン video.js の紹介でした。ご質問がございましたら、メッセージを残していただければ編集者がすぐに返信させていただきます。 。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！