Blog内に FLV / H.264 動画埋め込み Flowplayer 3 の設定 : blog@nero-8

April 17, 2009

Blog内に FLV / H.264 動画埋め込み Flowplayer 3 の設定

Top ＞ Movabletype ＞ FlowPlayer

以前から使用している動画埋め込み用Flashの Flowplayer が、いつの間にかバージョンも.3.10まで上がり設置方法も一新されていたので、改めて設定例を作ってみました。

2009.05.20：

FlowPlayer 3.1.1 にて動作確認を行い、表記バージョンを修正しました。

2009.07.30：

FlowPlayer 3.1.2 にて動作確認を行い、表記バージョンを修正しました。

2009.09.04：

FlowPlayer 3.1.3 にて動作確認を行い、表記バージョンを修正しました。
このバージョンより、動画ファイル指定に対して、絶対パスまたはflowplayer-3.x.x.swfからの相対パス指定が必要となりました。

2009.10.08：

FlowPlayer 3.1.4 にて動作確認を行い、表記バージョンを修正しました。

2009.10.25：

FlowPlayer 3.1.5 が公開されましたが、自環境にてIE6/IE7が再生不良となりました。本家サイトでは最新版 ver3.1.5 のみDL可のため、正常動作確認まで ver.3.1.4 を置いておきます。
flowplayer-3.1.4.zip

動画は1999年 AlfaRomeoFesta@PortelloGiappone、富士スピードウェイ旧コース。12気筒アルファF1や33SC12が通り過ぎていく1周です。運転はへナチョコですのであしからず。。。

さて本題のFlowplayer 3 です。

【以前のバージョンと比べて…】

使用感では、次のような改善がされている感じです。
・ウェブサーバ側でURLのディレクトリがエイリアス設定などされてる場合の動作不良が改善された。
・フルスクリーン表示時の制御や動作が安定した。
・以前問題だった、ページ内複数動画も問題なし。
・様々な多機能・高機能化

また、「？」と思われる点もちらほら。
・初期画像表示がネイティブ実装から外れて、html依存になった。
・設定諸々、過去のソースが流用出来ない。

そして、相変わらずのコンセプトも。。。
・多機能、高機能を狙っているため標準設定ではアスペクト比維持がされない。
・本家サイトを見ても判りにくいｗ

とっても多機能・高機能なFlowplayer 3 ですが、実現したいのはBlogへの埋め込みと、アスペクト維持でのフルスクリーン表示程度。なので、このあたりの機能にのみフォーカスしたシンプルな設定としています。

【Flowplayer 3 の具体的な設定例】

とにかく設定ソースが欲しい！という方はリンクを開いちゃって下さい。

・基本設定　<div>タグ使用
Flowplayer 3.1.4 <div>タグ設置例【ベーシック設定】

・詳細設定　<div>タグ使用
Flowplayer 3.1.4 <div>タグ設置例【詳細設定】

・基本設定　<a>タグ使用
Flowplayer 3.1.4 <a>タグ設置例【ベーシック設定】

以下、Flowplayer 3 設置に関する格子です。

【Flowplayer 3 で再生可能な動画形式】

・ FLV4
・ H.264 mp4コンテナ
※YouTube fmt=35のFLV5は再生できませんでした。

【Flowplayer 3 のダウンロード】

こちらから Open Source license 版を入手します。
http://flowplayer.org/download/index.html

【使用するファイルは？】

次の3ファイルを使用します。
・flowplayer-3.1.4.swf
・flowplayer.controls-3.1.4.swf
・flowplayer-3.1.4.min.js （exampleフォルダ内）

以下、次のようなディレクトリ構成として進めます。

www.hoge.jp┐
　　　　　　├ /flowplayer
　　　　　　│　　│
　　　　　　│　　├ flowplayer-3.1.4.swf
　　　　　　│　　├ flowplayer.controls-3.1.4.swf
　　　　　　│　　├ flowplayer-3.1.4.min.js
　　　　　　│
　　　　　　├ /movie
　　　　　　│　　│
　　　　　　　　　├ hoge.html (動画ページ)
　　　　　　　　　├ splash.jpg (初期表示画像)
　　　　　　　　　├ hoge.mp4 (動画ファイル)

【Flowplayer 3 設定の基本書式】

Flowplayer 3 の書式構成は下記のようになります。
・<head>～</head>内にflowplayer-3.1.4.min.js を記載。
　（Blog投稿などで入れられない場合は、投稿作成欄に記載でOK）
・<div>タグまたは<a>タグで動画表示エリアを確保。
・<script>～</script>にFlowplayer設定を記載。
・動画表示エリア（<div>または<a>）と、設定（<script>）は、idで紐付け。

　<head>
　　　/flowplayer/flowplayer-3.1.4.min.js
　</head>

　<div id=hoge ></div>　　　←動画表示エリア設定

　<script>　　　　　　　　　←Flowplayer3の設定
　　　id=hoge
　　　/flowplayer/flowplayer-3.1.4.swf
　　　　・
　　　　・
　　　　・
　</script>

【Flowplayer 3 設定 <script>～</script>内の基本書式】

　<script>
　flowplayer(
　　　　紐付けid
　　　　flowplayer-3.1.4.swfのURI

　　clip:
　　　　動画ファイルに関する設定

　　playlist:
　　　　プレイリストによる再生の設定（今回は使いません）

　　canvas:
　　　　背景色などに関する背景の設定

　　plugins:
　　　　コントロールバーに関する設定など
　　　　他様々なPluginの設定
　);
　</script>