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

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

近年、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スクリプトエラー対処も併用してご利用ください

Advertisement

FLVをHTMLに埋め込むには、FLV Playerが必要になります。

ここではJW FLV MEDIA PLAYER 4.1を利用した説明をします。
2009年1月現在バージョンは4.3ですが手順は一緒です

FreeのPlayerなので、まずは上記リンクからダウンロードしてください。

jwflvp.jpg

ページ上部に左画像のような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を転送したパスになります。

パスやファイル名などの間違いが無ければ下のように表示されます。


プレーヤー下部のコントロールバー右側にあるbig-btn.gifをクリックするとフルスクリーンになります。

このページに書いてある手順だけだと、IE7で開いた後にページを閉じる時スクリプトエラーになる場合が有ります

FLVファイルの埋め込みでのIEスクリプトエラー対処も併用してご利用ください

Advertisement
IE6 SWF埋め込みページで、Press OK to continue loading the content of this page ダイアログが出る現象の回避策
FLV動画を埋め込みしたページをインターネットエクスプローラー7で表示した後に閉じるとスクリプトエラーが発生することの回避手順。
フリーのJW FLV MEDIA PLAYERを利用した、簡単に出来るFLV(フラッシュビデオ)ファイルをHTMLに埋め込む手順。
Flashムービー(ビデオ)をhtmlに埋め込む手順です。通常のembedタグだと文法上良くありませんので、script化して埋め込む方法になります。
wmvやwvxファイルの埋め込み時、Mozilla用のembedタグはXHTML1.0 Transitional では文法上良くありませんので、script化して読み込ませる事で文法上も良くなります。IE、Mozilla共用で使用できます

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


■複数キーワードで検索する時は半角スペースで区切ってください
My Yahoo!に追加
IPv4アドレスついに枯渇!
迷惑極まりない問い合わせ
MTおよびMTOS 5.02 セキュリティーアップデート
ロリポップサーバーでのMT公開日時指定投稿(cron)設定
自サイトが悪意のある他サイトにインラインフレーム表示される
Gumblar対策
MTOS 5.0 アップグレード後、携帯サイトが文字化け
MTOS 5.0 アップグレード手順 SQLite
Firefox プロセス終了できない現象
不正なサイト乗っ取りの防止策
MT ファイルアップロード制限変更手順
Apacheサーバーでのindex Of 表示回避手順
SWFなどの埋め込みコンテンツがIE6でエラーダイアログが出る現象
MT4.261アップグレード手順
ロリポップサーバ、ディスク容量増加!
さくらインターネット .htmlをPHPとして動かす
MTOS 4.x インストール手順
MT 4.x ダウンロード 転送 パーミッション変更 SQLiteデータベース作成
さくらサーバーでの Index of 表示をさせない手順
phpのバージョン確認方法
Apache2.2 最新バージョン
PHP インクルード 文字化けする現象
コアサーバーでのcronの設定 MT4.x 日時指定で予約投稿編
サクラエディター 入力改行コードの指定 (LF)
ハッスルサーバーで Service Temporarily Unavailable が頻繁に出る
チカッパphp5バージョンアップ後のphp includeエラー対処
さくらサーバーで.htmlをphpとして動かす
FLVファイルの埋め込みでのIEスクリプトエラー対処
ロリポップサーバーでphp5バージョンアップ時のincludeエラー対処
ハッスルサーバーでMT4.2 PHP化注意事項
格安レンタルサーバーの比較
Google独自ブランドのブラウザGoogle Chrome登場!
Windows MediaPlayer11 でHTML埋め込みwmvが視聴出来ない現象
FLV動画の埋め込み手順
Safariでのcssレイアウトずれ対処
Firefox3 公開!IE7より9.3倍早い!!!
自宅サーバーでの検索エンジン対策
相互リンクと被リンク
metaタグを知ろう!
go-pear.phpが実行できない場合
SEOを考慮したサイトの引越し(301リダイレクト)
IE7でのレイアウトずれ対処
バックリンク(被リンク)について
Thumbs.db ファイルをFTPに残さない(作らない)
自宅サーバ でのwmv埋め込み+Firefox・Mozilla(Apache)
サイト整理=リンク切れのチェック
FireFox Add-ons Edit CSS
Flash(.swf)の埋め込み-IE・Mozilla系共有
wmvファイル埋め込み(Java Script 編)
wmv動画の埋め込み(IE・Mozilla系共用)
IEでのレイアウトずれ対処(css)
IE6以前でpng透過画像を使用する
フレームセットの利点と欠点
htmlファイル整理|ディレクトリ毎のファイル整理
検索エンジンを意識したサイトを作る
ホームページのタイトルと内容
MT作成サイトのPHP化手順
さくらサーバーでのPHPサイト構築
PEARのインストール(さくらサーバー編)
サクラエディターの使い方
サクラエディターのインストール

サイトマップ