FLV動画の埋め込み手順
近年、Webで扱う動画はFLV形式のフラッシュビデオが主流になりつつあります。
おなじみのYou Tubeで扱っているのもFLVであり、Windows Media Player がMac用の開発をやめたことも拍車をかけているのかもしれない。
ちなみにMacOS用のWindows Media Playerは、Windows Media Player 9 for Mac OS Xまで。
そんな訳で、私の所でもFLVを扱う事がかなり増えてきています。
FLVをHTMLに埋め込むにはいくつか方法がありますが、ここでは簡単で分かりやすい手順を紹介することにします。
JW FLV MEDIA PLAYER 4.1を利用したFLVファイルの埋め込み
FLVをHTMLに埋め込むには、FLV Playerが必要になります。
ここではJW FLV MEDIA PLAYER 4.1を利用した説明をします。
FreeのPlayerなので、まずは上記リンクからダウンロードしてください。
ページ上部に左画像のようなDownload Nowと言う所が有りますので、メールアドレスを入力してDownload JW FLV MEDIA PLAYERをクリックするとダウンロードされます。
mediaplayer.zipと言うファイル名でダウンロードされます。
ダウンロードしたmediaplayer.zipを任意の所に解凍してください。
解凍した中身で使用するのは、本説明ではplayer.swfのみです。
これがプレーヤー本体になります。
埋め込みタグ
320x240 pixel/inch のｆｌｖ動画を埋め込む場合のタグの例です。
<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 、ｆｌｖファイル（example.flvの部分）、最初に表示させる静止画（example.jpgの部分）のobject用パスです。
■4行目のsrc=""内は、embedタグ用で、player.swf 、ｆｌｖファイル（example.flvの部分）、最初に表示させる静止画（example.jpgの部分）、のパスで、fullscreen=trueはフルスクリーン表示可能の命令です。
2行目と4行目に入れるパス・フルスクリーン可否は、それぞれ&で仕切ります。
（フルスクリーンを許可しない場合は、fullscreen=trueを書かなくて良い）
mediaplayer.zipを解凍して出来たplayer.swfとFLVファイル・表示用画像を、タグに記した任意のパスに転送すればOKです。
HTML文法を考慮したFLV動画の埋め込み
上記のタグのように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を転送したパスになります。
パスやファイル名などの間違いが無ければ下のように表示されます。
プレーヤー下部のコントロールバー右側にある
をクリックするとフルスクリーンになります。
FLV動画の埋め込み手順に関連したエントリー
<<<前の記事へ | 次の記事へ>>>
Copyright(C) 2008 ホームページ作成SEOマニアックス Allrights reserved.