FlowPlayerサンプル

powerd by FlowPlayer

Flashの動画形式FLVを再生することができる「FlowPlayer」多くのプラットフォームで動くFlash Player上で動作するので利用したい人も多いとは思いますが、説明が素人向きではないのでサンプル集を作ってみました。

*1.サンプルを並べている為、うっとおしいのでautoPlayはオフにしています。
実際に使用するときは、autoPlayオンでもいいと思います。

*2.１ページに複数のプレーヤーを設置しているので「id」を「FlowPlayer数字」の
様にしています。

*3.任天堂wii等のFlashPlayerのバージョンが低いもので再生するためには
FlowPlayer1.11.1を使用してください。

【最小設定】FlowPlayer1.19

<object type="application/x-shockwave-flash" data="FlowPlayer1.19.swf" id="FlowPlayer1"
　　 width="320" height="262">
　　　　<param name="movie" value="FlowPlayer1.19.swf" />
　　　　<param name="flashvars" value="config={videoFile: 'FlowPlayer/sample.flv', autoPlay: false}" />
</object>

設置：
　　　　/flowplayer_samples.html　　　このファイル
　　　　/FlowPlayer1.19.swf　　　　　　ダウンロードしてきたプレーヤー
　　　　/FlowPlayer/sample.flv　　　　サンプルFLVビデオ

ツールバーの高さが22pixなのでheightに+22pixしています。

【＋動画が無いとき】：FlowPlayer1.19

<object type="application/x-shockwave-flash" data="FlowPlayer1.19.swf" id="FlowPlayer2"
　　width="320" height="262">
　　　　<param name="movie" value="FlowPlayer1.19.swf" />
　　　　<param name="flashvars"
　　　　　　value="config={
　　　　　　　　videoFile: 'FlowPlayer/samplexx.flv',
　　　　　　　　autoPlay: false,
　　　　　　　　noVideoClip: { url: 'FlowPlayer/colorbar.jpg', duration: 0 }
　　　　　　}"
　　　　/>
</object>

設置：
　　　　/flowplayer_samples.html　　　このファイル
　　　　/FlowPlayer1.19.swf　　　　　　ダウンロードしてきたプレーヤー
　　　　/FlowPlayer/colorbar.jpg　　　ムービーが再生できないときの表示画像

存在しないファイルを指定し「FlowPlayer/samplexx.flv」、カラーバー「FlowPlayer/colorbar.jpg」を表示。

【＋メニューを非表示】：FlowPlayer1.19

<object type="application/x-shockwave-flash" data="FlowPlayer1.19.swf" id="FlowPlayer3"
　　width="320" height="240">
　　　　<param name="movie" value="FlowPlayer1.19.swf" />
　　　　<param name="flashvars"
　　　　　　value="config={
　　　　　　　　videoFile: 'FlowPlayer/samplexx.flv',
　　　　　　　　autoPlay: false,
　　　　　　　　noVideoClip: { url: 'FlowPlayer/colorbar.jpg', duration: 0 }
　　　　　　　　hideControls: true
　　　　　　}"
　　　　/>
</object>

設置：
　　　　/flowplayer_samples.html　　　このファイル
　　　　/FlowPlayer1.19.swf　　　　　　ダウンロードしてきたプレーヤー
　　　　/FlowPlayer/sample.flv　　　　サンプルFLVビデオ
　　　　/FlowPlayer/colorbar.jpg　　　ムービーが再生できないときの表示画像

hideControlsを「true」にします。

【＋再生前の画像】：FlowPlayer1.19

<object type="application/x-shockwave-flash" data="FlowPlayer1.19.swf" id="FlowPlayer4"
　　width="320" height="262">
　　　　<param name="movie" value="FlowPlayer1.19.swf" />
　　　　<param name="flashvars"
　　　　　　value="config={
　　　　　　　　videoFile: 'FlowPlayer/samplexx.flv',
　　　　　　　　autoPlay: false,
　　　　　　　　noVideoClip: { url: 'FlowPlayer/colorbar.jpg', duration: 0 },
　　　　　　　　splashImageFile: 'FlowPlayer/play-button-328x240.jpg'
　　　　　　}"
　　　　/>
</object>

設置：
　　　　/flowplayer_samples.html　　　このファイル
　　　　/FlowPlayer1.19.swf　　　　　　ダウンロードしてきたプレーヤー
　　　　/FlowPlayer/sample.flv　　　　サンプルFLVビデオ
　　　　/FlowPlayer/colorbar.jpg　　　ムービーが再生できないときの表示画像
　　　　/FlowPlayer/play-button-328x240.jpg　　　ムービー再生前の画像

Youtubeのように再生前の画像を表示します。
「autoPlay: false」といっしょに使います。

【＋複数の動画再生（プレイリスト）】：FlowPlayer1.19

<object type="application/x-shockwave-flash" data="FlowPlayer1.19.swf" id="FlowPlayer5"
　　width="320" height="262">
　　　　<param name="movie" value="FlowPlayer1.19.swf" />
　　　　<param name="flashvars"
　　　　value="config={
　　　　　　playList: [
　　　　　　　　{ name: 'sample', url: 'FlowPlayer/sample.flv' },
　　　　　　　　{ name: 'sample2', url: 'FlowPlayer/sample2.flv' }
　　　　　　],
　　　　　　autoPlay: false,
　　　　　　noVideoClip: { url: 'FlowPlayer/colorbar.jpg', duration: 0 },
　　　　　　splashImageFile: 'FlowPlayer/play-button-328x240.jpg'
　　　　}"
　　　　/>
</object>

設置：
　　　　/flowplayer_samples.html　　　このファイル
　　　　/FlowPlayer1.19.swf　　　　　　ダウンロードしてきたプレーヤー
　　　　/FlowPlayer/sample.flv　　　　サンプルFLVビデオ
　　　　/FlowPlayer/sample2.flv　　　サンプルFLVビデオ2
　　　　/FlowPlayer/colorbar.jpg　　　ムービーが再生できないときの表示画像
　　　　/FlowPlayer/play-button-328x240.jpg　　　ムービー再生前の画像

今まで指定していた「videoFile」ではなく「playList」で指定します。

【＋ループなし】：FlowPlayer1.19

<object type="application/x-shockwave-flash" data="FlowPlayer1.19.swf" id="FlowPlayer6"
　　width="320" height="262">
　　　　<param name="movie" value="FlowPlayer1.19.swf" />
　　　　<param name="flashvars"
　　　　value="config={
　　　　　　playList: [
　　　　　　　　{ name: 'sample', url: 'FlowPlayer/sample.flv' },
　　　　　　　　{ name: 'sample2', url: 'FlowPlayer/sample2.flv' }
　　　　　　],
　　　　　　autoPlay: false,
　　　　　　loop: false,
　　　　　　noVideoClip: { url: 'FlowPlayer/colorbar.jpg', duration: 0 },
　　　　　　splashImageFile: 'FlowPlayer/play-button-328x240.jpg'
　　　　}"
　　　　/>
</object>

設置：
　　　　/flowplayer_samples.html　　　このファイル
　　　　/FlowPlayer1.19.swf　　　　　　ダウンロードしてきたプレーヤー
　　　　/FlowPlayer/sample.flv　　　　サンプルFLVビデオ
　　　　/FlowPlayer/sample2.flv　　　サンプルFLVビデオ2
　　　　/FlowPlayer/colorbar.jpg　　　ムービーが再生できないときの表示画像
　　　　/FlowPlayer/play-button-328x240.jpg　　　ムービー再生前の画像

ループをなくしました。「loop:false」

【＋プレイリスト使用時用のNext(次へ)、Prev(前へ）ボタン表示】：FlowPlayer1.19

<object type="application/x-shockwave-flash" data="FlowPlayer1.19.swf" id="FlowPlayer7"
　　width="320" height="262">
　　　　<param name="movie" value="FlowPlayer1.19.swf" />
　　　　<param name="flashvars"
　　　　value="config={
　　　　　　playList: [
　　　　　　　　{ name: 'sample', url: 'FlowPlayer/sample.flv' },
　　　　　　　　{ name: 'sample2', url: 'FlowPlayer/sample2.flv' }
　　　　　　],
　　　　　　autoPlay: false,
　　　　　　loop: false,
　　　　　　noVideoClip: { url: 'FlowPlayer/colorbar.jpg', duration: 0 },
　　　　　　splashImageFile: 'FlowPlayer/play-button-328x240.jpg',
　　　　　　showPlayListButtons: true
　　　　}"
　　　　/>
</object>

設置：
　　　　/flowplayer_samples.html　　　このファイル
　　　　/FlowPlayer1.19.swf　　　　　　ダウンロードしてきたプレーヤー
　　　　/FlowPlayer/sample.flv　　　　サンプルFLVビデオ
　　　　/FlowPlayer/sample2.flv　　　サンプルFLVビデオ2
　　　　/FlowPlayer/colorbar.jpg　　　ムービーが再生できないときの表示画像
　　　　/FlowPlayer/play-button-328x240.jpg　　　ムービー再生前の画像

Next(早送り)、Prev(巻き戻し）ボタンつけました。「showPlayListButtons: true」

【任天堂Wiiで見るとき】：FlowPlayer1.11.1

<object type="application/x-shockwave-flash" data="FlowPlayer1.11.1.swf" id="FlowPlayer8"
　　width="320" height="262">
　　　　<param name="movie" value="FlowPlayer1.11.1.swf" />
　　　　<param name="flashvars"
　　　　value="config={
　　　　　　playList: [
　　　　　　　　{ name: 'sample', url: 'FlowPlayer/sample.flv' },
　　　　　　　　{ name: 'sample2', url: 'FlowPlayer/sample2.flv' }
　　　　　　],
　　　　　　autoPlay: false,
　　　　　　loop: false,
　　　　　　noVideoClip: { url: 'FlowPlayer/colorbar.jpg', duration: 0 },
　　　　　　splashImageFile: 'FlowPlayer/play-button-328x240.jpg',
　　　　　　showPlayListButtons: true
　　　　}"
　　　　/>
</object>

設置：
　　　　/flowplayer_samples.html　　　このファイル
　　　　/FlowPlayer1.11.1.swf　　　　　ダウンロードしてきたプレーヤー
　　　　/FlowPlayer/sample.flv　　　　サンプルFLVビデオ
　　　　/FlowPlayer/sample2.flv　　　サンプルFLVビデオ2
　　　　/FlowPlayer/colorbar.jpg　　　ムービーが再生できないときの表示画像
　　　　/FlowPlayer/play-button-328x240.jpg　　　ムービー再生前の画像

最新のプレーヤーを使うと色々機能は向上しているだろうが、組み込み機器と言われる
家電やゲーム機に搭載されているフラッシュプレーヤーはそう簡単にバージョンアップできません。

したがって、1.19はFlash9対応ですが、1.11.1のFlash7対応のプレーヤーの方が
色々なプラットフォームで動きます。

【クリックしなくてもコントロールをアクティブにする】：FlowPlayer1.11.1

<head>
　　<script type='text/javascript' src='FlowPlayer/FlowPlayer_samples.js'></script>
</head>

<body>
<script type='text/javascript'>

</script>
</body>

【FlowPlayer_samples.js】
function subSamplePlay1()
{
　　document.write("<object type='application/x-shockwave-flash' data='FlowPlayer1.11.1.swf' id='FlowPlayer9' ");
　　document.write(" width='320' height='262'>");
　　document.write(" <param name='movie\'value='FlowPlayer1.11.1.swf' />");
　　document.write(" <param name='flashvars' ");
　　document.write(" value=\"config={");
　　document.write(" playList: [");
　　document.write(" { name: 'sample', url: 'FlowPlayer/sample.flv' },");
　　document.write(" { name: 'sample2', url: 'FlowPlayer/sample2.flv' }");
　　document.write(" ],");
　　document.write(" autoPlay: false,");
　　document.write(" loop: false,");
　　document.write(" noVideoClip: { url: 'FlowPlayer/colorbar.jpg', duration: 0 },");
　　document.write(" splashImageFile: 'FlowPlayer/play-button-328x240.jpg',");
　　document.write(" showPlayListButtons: true");
　　document.write(" }\" ");
　　document.write(" />");
　　document.write("</object>");
}

設置：
　　　　/flowplayer_samples.html　　　このファイル
　　　　/FlowPlayer1.11.1.swf　　　　　ダウンロードしてきたプレーヤー
　　　　/FlowPlayer/sample.flv　　　　サンプルFLVビデオ
　　　　/FlowPlayer/sample2.flv　　　サンプルFLVビデオ2
　　　　/FlowPlayer/colorbar.jpg　　　ムービーが再生できないときの表示画像
　　　　/FlowPlayer/play-button-328x240.jpg　　　ムービー再生前の画像
　　　　/FlowPlayer/FlowPlayer_samples.js　　　FlowPlayer書き出しJavaScript

米Eolas Technologies社がブラウザに外部アプリケーションを組み込み自動的に
再生できる事に関する特許を持っていると主張しだし、実際訴訟を起こしたため
プラグインのアプリケーションを自動で開始できなくなった。

Flashプレーヤーもプラグインに当たるので、「アクティブ化するには・・・・」となってしまいます。
この特許を回避するには、外部ファイル化したJavaScriptからプラグイン処理を書き出せば
問題ないようなので、外部ファイル「FlowPlayer_samples.js」を作成し書き出しています。

トップページへ