ケンちゃんの「知ったかブログ？」

(注意！：このページは動画が複数貼り付けてあるため表示に時間が掛ります)

　前回で、JW Media Playerを使ったブログやホームページ上での動画表示について述べさせていただきましたが、今回は「構築編」をすっとばして「表示編」にします。
　言葉で書こうとも思いましたが、それは本家のマニュアルを見ていただいたほうがよいので、とりあえず簡単で、使えそうな機能だけピックアップします。
　つかった動画は先日携帯電話の911SHでとった320x240の3gpファイルをffmpegでFLV1に変換したものです。画質は低め、音声も低めです。
　

とりあえずまともに見える最低限の設定です。（本当はwidthやheightもいらないけど、入れないと表示が遅くなる） <div id="ken080418-t02"></div> <script type="text/javascript"> var t02 = new SWFObject("http://blog-imgs-21.fc2.com/k/e/n/kenknown/mediaplayer.swf","mediaplayer","320","240","8"); t02.addVariable("file","http://kenknown.web.fc2.com/movieplayer/clock-911sh-test.flv"); t02.addVariable("width","320"); t02.addVariable("height","240"); t02.write("ken080418-t02"); </script>

バーが見えるようになりましたが、その分画像が縦に縮小されてしまいました。バーは20pictのようなので、縦を20pict追加して、240から260にします。 <div id="ken080418-t03"></div> <script type="text/javascript" src="http://blog-imgs-21.fc2.com/k/e/n/kenknown/swfobject.js"></script> <script type="text/javascript"> var t03 = new SWFObject("http://blog-imgs-21.fc2.com/k/e/n/kenknown/mediaplayer.swf","mediaplayer","320","260","8"); t03.addVariable("file","http://kenknown.web.fc2.com/movieplayer/clock-911sh-test.flv"); t03.addVariable("width","320"); t03.addVariable("height","260"); t03.write("ken080418-t03"); </script>

今のままではサムネイルが表示されてないので、サムネイルをimageオプションで表示させます。 　サムネイルは別途画像ファイルを用意します。 t04.addVariable("image","http://blog-imgs-21.fc2.com/k/e/n/kenknown/clock-911sh-test.jpg");

だいぶ見栄えが良くなってきました。　バーの色変更をしてみます。ついでにストップボタンも追加します。　さらに超適当なロゴを入れてみます、ロゴは透過pngにしました。 t05.addVariable("backcolor","0x4444ff"); t05.addVariable("showstop","true"); t05.addVariable("logo","http://blog-imgs-21.fc2.com/k/e/n/kenknown/clock-911sh-test-logo2.png");

ダウンロードボタンも追加できます。ついでに縮小・拡大表示もできます。一応1280x720なんてのもできます(もちろんブログでは本文領域の横幅が決まってるのでそんな大きな解像度は無理。本ブログの場合512x384でもレイアウトが崩れる) t06.addVariable("showdownload","true"); t06.addVariable("link","http://kenknown.web.fc2.com/movieplayer/clock-911sh-test.flv");

コメントというかキャプションを追加できます。xmlファイルを別に用意する必要があります。 　xmlファイルをUTF-8にすれば、日本語も大丈夫なようです（WinXP+IE6では確認） 　ついでにニコニコっぽく左右に黒帯を追加してみます。白っぽい動画はこの方が見やすくなるかな。 <div id="ken080418-t07"></div> <script type="text/javascript"> var t07 = new SWFObject("http://blog-imgs-21.fc2.com/k/e/n/kenknown/mediaplayer.swf","mediaplayer","320","260","8"); t07.addVariable("file","http://kenknown.web.fc2.com/movieplayer/clock-911sh-test.flv"); t07.addVariable("image","http://blog-imgs-21.fc2.com/k/e/n/kenknown/clock-911sh-test-caption.jpg"); t07.addVariable("width","320"); t07.addVariable("height","260"); t07.addVariable("backcolor","0xff4444"); t07.addVariable("showstop","true"); t07.addVariable("logo","http://blog-imgs-21.fc2.com/k/e/n/kenknown/clock-911sh-test-logo2.png"); t07.addVariable("showdownload","true"); t07.addVariable("volume","10"); t07.addVariable("captions","http://blog-imgs-21.fc2.com/k/e/n/kenknown/clock-911sh-test2.xml"); t07.addVariable("link","http://blog-imgs-21.fc2.com/k/e/n/kenknown/clock-911sh-test2.xml"); t07.write("ken080418-t07"); </script>

　他にも、ブログ向きではないですが、自動スタートやループ機能も良さそうです。それ以外にもたくさん機能が組み込まれていそうですが、とりあえずはこんなところでしょうか。
　また、あまりにも高画質なものはやめた方が良いです。ローカルHDDに置いたH.264圧縮の1280x720, 60fps, 5Mbpsファイルを表示させたところ、固まってしまうことが何回かありました。
　また、FC2のホームページ用サーバに置くとダウンロードに時間がかかりすぎる。1280x720のファイルを無理やり512x288で高画質表示してみたり、1280x720のまま高解像度表示させるのはなかなか楽しいけど、固まることも。。。。
　ネットワーク環境にもよりますが、1Mbps以下が程良い感じですがそれだと有名配信サイトとあまり違いはないな。

(追記)　と思ったら、本日FC2ブログもニコニコ対応したようです。ますますこの記事の存在価値が。。。って関係ないですね。
　ニコニコニュース　「ニコニコ外部プレーヤーがＦＣ２ブログにも対応！」
　FC2インフォメーション　「【ブログ】ニコニコ動画ツール公開のお知らせ 」 　

---

【同じカテゴリの記事】

• ブログで簡単に動画配信！（目的編） 　
• JW FLV Media Player のオプション (備忘録)
• JW FLV Playerを使ってハードディスク内の動画を見るファイル
  
  
• JW FLV Playerがver4にアップデート

---

基礎から学ぶモバイルFlashコンテンツ作成講座―携帯電話用Flashを使ったサイト作成テクニックを実例で解説
	小松 学史 技術評論社 2004-09-15 売り上げランキング : 166073 Amazonで詳しく見るby G-Tools 関連商品 Flash For Mobile 携帯端末用Web制作バイブル 第2版 (ADVANCED WEB DESIGN BOOKS) 携帯Flashスクリプト入門―Flash Lite「1.0」「1.1」対応 (I/O BOOKS) ケータイサイト実践運用ガイドブック ケータイサイト構築ガイドブック

---

テーマ:動画 - ジャンル:コンピュータ