ホームページ作成SEOマニアックス

フリーのJW FLV MEDIA PLAYERを利用した、簡単に出来るFLV（フラッシュビデオ）ファイルをHTMLに埋め込む手順。

• ホームページ作成SEOマニアックス
• 初級編
• 中級編
• 上級編
• お問い合わせ
• リンク集

近年、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 のｆｌｖ動画を埋め込む場合のタグの例です。

<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は正常に表示されますが、文法上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スクリプトエラー対処も併用してご利用ください

<<<前の記事へ | 次の記事へ>>> このページのトップへ

Copyright © 2008-2017 ホームページ作成SEOマニアックス All Rights Reserved.