ソース コード_JavaScript スキルを備えた Flowplayer に基づいて無料の WEB ビデオ プレーヤーを作成する

Flowplayer は、オープンソース (GPL 3) の WEB ビデオ プレーヤーです。開発者の場合は、プレーヤーの関連パラメータを自由にカスタマイズおよび構成して、必要な再生効果を実現することもできます。この記事では主にFlowplayerの使い方を紹介します。

デモを見る ソースコードのダウンロード

Flowplayer は、flv、swf、画像ファイルなどのストリーミング メディアの再生をサポートし、ビデオ ファイルを非常にスムーズに再生でき、カスタム構成と拡張をサポートします。

1. flowplayer.js をロードします

ビデオを再生したいページの先頭の間に flowplayer.js を追加します。

<script type="text/javascript" src="js/flowplayer-3.2.6.min.js"></script> 

最新バージョンは、flowplyer 公式 Web サイトからダウンロードできます: http://flowplayer.org/download/index.html

2.XHTML

プレーヤーを追加する必要がある場所に次のコードを追加します:

<a href="flowplayer.flv" style="display:block;width:520px;height:330px" id="player"></a>

a タグの href 属性を再生するビデオ アドレスに指定し、スタイル、幅、高さを設定し、display:block を設定します。もちろん、重要なのは、簡単に行うための a タグの ID を指定することです。 JS が呼び出します。

もちろん、HTML で DIV を指定し、JavaScript を使用して再生アドレスを制御することもできます。

<div id="player2" style="width:520px; height:330px"> </div>

3. JavaScript

プレーヤーを呼び出すための JavaScript スクリプトをページの下部に含めます:

<script type="text/javascript"> 
flowplayer("player", "flowplayer-3.2.7.swf"); 
</script>

flowplayer() 関数を使用してプレーヤーを呼び出します。最初のパラメーターはプレーヤーの ID であり、2 番目のパラメーターはプレーヤーのパスが正しいことを確認してください。 。

タグを使用してビデオ ファイルを呼び出すのではなく、DIV を使用して呼び出す場合、コードは次のようになります:

flowplayer( 
 "player2", 
 "flowplayer-3.2.7.swf",{ 
 clip: { 
 url: "flowplayer.flv", 
 autoPlay: false, 
 autoBuffering: true 
 } 
 } 
); 

flowplayer() 関数の 3 番目のパラメーターは複数の設定に使用できますが、これは実際には高度な設定です。クリップメソッドの URL: ビデオファイルの実際のアドレスを示します。 autoPlay: 自動的に再生するかどうかを示します。デフォルトは true、autoBuffering: 自動的にバッファリングするかどうか、つまりビデオファイルが自動的に再生されないように設定されているかどうかを示します。場合でも、プレーヤーはビデオ ファイル コンテンツを事前にダウンロードします。

flowplayer は、プレイリストやスキン設定などの多くの高度な設定もサポートしています。特定の設定については、興味のある学生は、http://flowplayer.org/documentation/configuration/index.html にアクセスしてください。