ウェブDeBLOG｜トライデントコンピュータ専門学校 Webデザイン学科

かなり、遅くなってしまいましたが、明けましておめでとうございます。
本年も引き続き、宜しくお願いいたします。
今年の抱負や展望などは、また後日書きたいと思います。

さて、普段、動画をブログなどに貼る場合は、YouTube、Vimeo、ニコニコ動画など動画共有サイトにUpして埋め込みコードをコピペするだけなのですが、今回、直接動画ファイルを埋め込む必要が出てきたので、忘備録として書いておきます。
まず、動画形式はwmvやmovよりも使いやすそうだったFLV形式を選択しました。「Adobe Flash CS3 Video Encoder」を使えば、あっという間に変換ができます。変換が終わったらサーバーにアップロードしておきます。

次に、FLVを再生するにはPlayerが必要になります。検索すると様々なPlayerが見つかりますが、設置が簡単そうで拡張性もありそうなFLAVER 3.0をダウンロードして解凍します。
使用するファイルは、単独の動画再生であれば、「flaver.swf」のみ。
こちらも、サーバーやブログの任意の場所にアップロードしておきます。

あとは、FLAVER 3.0の設置方法にコードありますので、flaver.swfのパスとFLVファイルのパスを書き換えるだけでOKです。

従来通り <object>タグで 単体ファイルを貼る

<object data="/flaver3/flaver.swf"
  type="application/x-shockwave-flash" width="330" height="230">
<param name="movie" value="/flaver3/flaver.swf" />
<param name="FlashVars" value="file=ファイルパス&その他の設定..." />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
</object>

→swfobject.jsを使って配置することもできます。
SWFObject を用いて単体ファイルを貼る

<script type="text/javascript" src="swfobject.js"></script>
<div id="player1">ここにプレイヤーが表示されます</div>
<script type='text/javascript'>
var play1 = new SWFObject('/flaver3/flaver.swf','flaver','330','230','9');
play1.addParam('flashvars','file=ファイルパス&その他の設定...');
play1.addParam('allowfullscreen','true'); 
play1.addParam('allowScriptAccess','always'); 
play1.write('player1');
</script>

注意するのは、FLVファイルのパスは絶対パスか「flaver.swf」からの相対パスにすること。
試しに学生作品のキャプチャ動画を載せておきます。