サイトへの動画表示方法について検討してみた。

 

まず、表示の対象となるのは、ソニーのハンディカムで撮ったデータで、このデータはm2ts形式なのでそのままではＰＣでの再生ができないので、まず付属のソフトPictur Motion BrowserでMPEG-2形式に変換する。

 

 

 

 

これで、メディアプレーヤーで再生できる形式になったわけだが、Web上にアップするためにXilisoft動画変換でmpg形式からFlash(SWF形式のものとFLV形式)のものに変換する

 

 

３分２７秒のデータサイズ比較

最初に出来上がった、SWF 320X240 low audio cutのものをFCKEditorの「Flash挿入」でswfファイルを挿入

作成されたコード

<div><embed width="320" height="240" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="/uploads/contents/Flash/20080516002854-0.swf" play="true" loop="true" menu="true"></embed></div>

 

 

 

次にjQuery.lightpop.jsを使った場合の表示

作成したコード

 

 ヘッダー部

	<script type="text/javascript" src="http://www.avantec.jp/javascript/lightpop/jquery.lightpop-0.4.3.js"></script>

	<script type="text/javascript">

		$(function() {

			$('a[@rel*=lightbox]').lightpop();

  			$('a.lightpop').lightpop();

			$('a[@href^=http://www.youtube.com/watch], a[@href^=http://jp.youtube.com/watch]').lightpop();

			$('a.video').lightpop({imageMaxWidth:800,mageMaxHeight:600});

		});

	</script>

 

body部

<div><a href="http://www.avantec.jp//uploads/contents/Flash/20080516002854-0.swf?width=320&amp;height=240" title="flv %u30B5%u30F3%u30D7%u30EB" class="video">SWF %u30B5%u30F3%u30D7%u30EB</a>&nbsp;</div>

<div><a href="http://www.avantec.jp/uploads/contents/Flash/admin/20080516002854.flv?width=320&amp;height=240" title="flv %u30B5%u30F3%u30D7%u30EB" class="video">flv %u30B5%u30F3%u30D7%u30EB</a></div>

 

lightpopの設定項目を詳しく調べないと解らないが、再生方法とかFLVのフルスクリーン表示とが、プレビューイメージの設定がが出来ない、

 

次にFLV Media Player 用のコード直書きした場合

作成したコード

<div><embed width="320" height="250" src="http://www.avantec.jp/javascript/mediaplayer/mediaplayer.swf" allowscriptaccess="always" allowfullscreen="true" flashvars="height=250&amp;width=320&amp;file=/uploads/contents/Flash/admin/20080516002854.flv&amp;image=http://www.avantec.jp/uploads/contents/Image/admin/Flash/flv_test_image.PNG&amp;id=0&amp;showstop=true"></embed></div>

 

 

フルスクリーンやプレビューなど色々設定できる（当たり前だけど・・・)

 

ちなみにFCKeditorの「Flash挿入」ダイアログで作成されるコードが以下のような感じ

<div><embed width="352" height="240" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="/uploads/contents/Flash/admin/20080516002854.flv" play="true" loop="false" menu="true"></embed></div>

なので、fckeditor/editor/dialog/fck_flash/fck_flash.jsあたりを弄ってFLV Media Player 用のコードを生成するようにしたらよいのかも

 

つまり、src=の部分を固定にして、flashvarsでFLVファイルの指定を行うパターンで以下のようなコードを作成するようにすればよいような気がします

<div><embed width="320" height="250" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.avantec.jp/javascript/mediaplayer/mediaplayer.swf" allowscriptaccess="always" allowfullscreen="true" flashvars="file=/uploads/contents/Flash/admin/20080516002854.flv&amp;image=http://www.avantec.jp/uploads/contents/Image/admin/Flash/flv_test_image.PNG&amp;id=0&amp;showstop=true"></embed></div>