近年、Webで扱う動画はFLV形式のフラッシュビデオが主流になりつつあります。
おなじみのYou Tubeで扱っているのもFLVであり、Windows Media Player がMac用の開発をやめたことも拍車をかけているのかもしれない。
ちなみにMacOS用のWindows Media Playerは、Windows Media Player 9 for Mac OS Xまで。
そんな訳で、私の所でもFLVを扱う事がかなり増えてきています。
FLVをHTMLに埋め込むにはいくつか方法がありますが、ここでは簡単で分かりやすい手順を紹介することにします。
このページに書いてある手順だけだと、IE7で開いた時に、スクリプトエラーになる場合が有ります
FLVファイルの埋め込みでのIEスクリプトエラー対処も併用してご利用ください
FLVをHTMLに埋め込むには、FLV Playerが必要になります。
ここではJW FLV MEDIA PLAYER 4.1を利用した説明をします。
2009年1月現在バージョンは4.3ですが手順は一緒です
FreeのPlayerなので、まずは上記リンクからダウンロードしてください。
ページ上部に左画像のようなDownload Nowと言う所が有りますので、メールアドレスを入力してDownload JW FLV MEDIA PLAYERをクリックするとダウンロードされます。
mediaplayer.zipと言うファイル名でダウンロードされます。
ダウンロードしたmediaplayer.zipを任意の所に解凍してください。
解凍した中身で使用するのは、本説明ではplayer.swfのみです。
これがプレーヤー本体になります。
320x240 pixel/inch のflv動画を埋め込む場合のタグの例です。
<object id="flvplayer" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="320" height="260">
<param name="movie" value="player.swf?file=example.flv&image=example.jpg&fullscreen=true">
<param name="wmode" value="transparent">
<embed name="wiitube_refine" src="player.swf?file=example.flv&image=example.jpg&fullscreen=true" width="320" height="260" wmode="opaque" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
■1行目のhttp://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0はプラグインの場所とバージョン。
(現在ではAdobeになっていますが、転送されるのでこのままでOK)
フラッシュのバージョンは、あえて6,0,29,0にしてあります。
理由は下位互換にするため。
自分が最新バージョンを使っていようと、世の中全てが最新バージョンではありませんので。
■1行目後半のwidth="320" height="260"は表示させるサイズ
height="260"になっているのは、プレーヤー下に表示されるコントロールバーの幅を考慮した数値です。
■2行目のvalue=""内は、player.swf 、flvファイル(example.flvの部分)、最初に表示させる静止画(example.jpgの部分)のobject用パスです。
■4行目のsrc=""内は、embedタグ用で、player.swf 、flvファイル(example.flvの部分)、最初に表示させる静止画(example.jpgの部分)、のパスで、fullscreen=trueはフルスクリーン表示可能の命令です。
2行目と4行目に入れるパス・フルスクリーン可否は、それぞれ&で仕切ります。
(フルスクリーンを許可しない場合は、fullscreen=trueを書かなくて良い)
mediaplayer.zipを解凍して出来たplayer.swfとFLVファイル・表示用画像を、タグに記した任意のパスに転送すればOKです。
上記のタグのようにHTMLに埋め込みすればFLVは正常に表示されますが、文法上embedタグを私用するのはよくありません。
embedタグはMozilla用のタグですので
文法を気にする方は、javascriptとして埋め込むと良いでしょう。
上記の例を.jsファイルとして保存し、HTMLでjsファイルを読み込むと言う方法になります。
// example.js
document.write('<embed src="player.swf" width="320" height="260" bgcolor="ffffff" allowscriptaccess="always" allowfullscreen="true" flashvars="author=編集者名&file=example.flv&image=example.jpg&title=sample-mov&fullscreen=true" />');
player.swf JW FLV MEDIA PLAYERのパスとファイル名(ファイル名は【player.swf】で変える必要無し)
author=編集者名 は作成した人の名前(自分の名前など)
file=example.flv flvファイルのパスとファイル名
image=example.jpg 表示用静止画のパスとファイル名
title=sample-mov タイトル
fullscreen=true フルスクリーン可(不可の場合は記述しない)
と言う感じです。それぞれ区切りは通常タグと同じように&で区切ります。
ファイル名を任意のファイル名.jsとして任意の所に転送し、HTMLはFLVビデオを表示させたい所に
<script type="text/javascript" src="example.js"></script>
と記述すればOKです。
例ではexample.jsと言うファイル名にしています。パスはexample.jsを転送したパスになります。
パスやファイル名などの間違いが無ければ下のように表示されます。
プレーヤー下部のコントロールバー右側にあるをクリックするとフルスクリーンになります。
このページに書いてある手順だけだと、IE7で開いた後にページを閉じる時スクリプトエラーになる場合が有ります
FLVファイルの埋め込みでのIEスクリプトエラー対処も併用してご利用ください