仙台,弁護士,小松亀一,法律事務所,宮城県,交通事故,債務整理,離婚,相続

旧TOPホーム > 桐・IT等 > HP作成 >    

動画データのFLASH化

平成22年 6月14日:初稿
○「フラメンコギターミニコンサート忘年会開催」にはwmv形式の動画ファイルを3個も貼り付けているためか、このページを開くのに5,6秒時間がかかり、これを他のページのように一瞬で開くように出来ないものかと思い、動画関係ファイルに詳しいN弁護士に相談していたところ、以下のような返事が来ました。
ところで動画データのFLASH化ですが,先生のご要望は現在wmvの動画データをhtmlページに埋め込んでいるところ,ページを開くたびにロードされて時間がかかってしまうのを改善したいということであると理解しました。

そもそもFLASHのなんたるかを理解していなかったこともあって相当に四苦八苦しておりました。結局AdobeからダウンロードしたFlashCS3は全く使いこなせずActionScriptもさっぱり理解できずギブアップしようかと思っていたところ偶然に「Flowplayer」というツール(無料)を発見しました。
http://flowplayer.org/

これはflvかmp4の動画をYouTubeと同じような方法で(あるいはYouTubeを使わないで)公開するためのもので,読者が「再生ボタン」を押して初めて読み込みと再生を開始するよう設定できます。

もとのwmvをflvにするには「Riva FLV Encoder」というフリーのソフトを使いましたが,動画をflvに変換するソフトは他にもたくさんあるようです。
http://www.rivavx.com/index.php?encoder&L=3

小松先生の演奏はこのRivaで変換しましたが(フレームレート25,ビットレート360),ルナさんの演奏はなぜか変換できなかったのでFlashCS3のおまけについてくるエンコーダーを使っています(画質はオリジナルと同じ)。

サンプルページを作ってみましたので,小松先生が目指しているものとなっているかご確認ください。Flowplayerはまだまだ細かく調整が可能なようですがまずは最低限のところからやってみました。
http://203.138.252.79/flash/movie/sample2.htm

なお設定はやや面倒で,
①サーバーにflowplayerをアップロードする(パーミッション755)
②動画をflvに変換
③当該htmlページにJava Scriptの指示を2か所入れる
④当該htmlページに<a>タグもしくは<div>タグで動画をリンクする
というプロセスが必要です。

(参考にしたページ)
http://www.nero-8.com/blog/archives/2009/04/200904172210.php
http://ladyoss.net/2009/12/11/94/#more-94

flowplayerですが,これはサーバーに設置しておいて,htmlから呼び出されてブラウザのプラグインであるflash playerで動くswfファイルですので,exeファイルとはまた別です。いわゆるフラッシュファイルですのでサーバー経由でなくてもローカルでも動きます。ただしセキュリティの関係でローカルにあるフラッシュファイルを開こうとするとアラートが出るようです。

flowplayerを使うには,サーバのどこかに解凍したflowplayer-3.1.4.min.jsとflowplayer-3.1.5.swfをアップロードして,以下の①から③をhtmlファイルに記述します。

①<head>内
<script type="text/javascript" src="http://203.138.252.79/flash/flowplayer/flowplayer-3.1.4.min.js"></script>

これを<head>に入れます(とはいえ<body>内でもよいようです)。
src=" "の中に,flowplayer-3.1.4.min.jsを置いた場所をフルパスで指定します。

②<body>内の<script>
<script language="JavaScript">
flowplayer("001", "http://203.138.252.79/flash/flowplayer/flowplayer-3.1.5.swf");
$f("001", "http://203.138.252.79/flash/flowplayer/flowplayer-3.1.5.swf",{
clip: {
url: 'http://203.138.252.79/flash/movie/lunakoujou.flv',
autoPlay: false,
autoBuffering: false
}
});
</script>

script開始後の「flowplayer()」というコマンドでflowplayerを呼び出します。
最初の" "ではidを決めます。"001"でも"luna"でもなんでもいいのですが,次の③で記述するidと同じである必要があります。次の" "ではflowplayer-3.1.5.swfを置いた場所をフルパスで指定します。
その後の$f以下はオプションです。
clipというオプションで,自動再生(なし),自動ロード(なし)にそれぞれ設定しています。

③<body>内で<a>または<div>で動画ファイルをリンク動画の画面を配置したい場所に
<a href="http://203.138.252.79/flash/movie/lunakoujou.flv"
style="display:block;width:240px;height:182px;"
id="001">
</a>
で動画へのリンクを張ります。サムネイル画面を置いてそこにリンクを張ることもできます。
a herf=" "の中でフルパスでflvファイルの場所を指定します。
3行目のidは②で指定したscript内のidと同じにします。このidを変えることで同じページの中に複数の動画を配置することができます。

○流石IT通で特に動画関係ファイルに強いN弁護士ですが、上記タグを私自身が記述することは到底不可能で、例によって桐師匠【多遊】さんにワンクリックで設定できるようコマンドボタンを桐HPBに設定して頂き、「フラメンコギターミニコンサート忘年会開催」の動画をFLASH化出来ました。有り難うございました。
以上:2,830文字

タイトル
お名前
email
ご感想
ご確認 上記内容で送信する(要チェック
※大変恐縮ながら具体的事件のメール相談は実施しておりません。

 


旧TOPホーム > 桐・IT等 > HP作成 > 動画データのFLASH化