10月 08

サイト内にFlashムービーを埋め込む方法（公開編）

JavaScript • jQuery • プラグイン • 動画配信 Add comments 1,648 PVs
Posted at 12:46 by Hiro

本シリーズもこれで完結です。flvencバッチファイルセットを使って作成したflvファイルをサイト内にFlashムービーを埋め込んでいきます。

準備としてローカル環境に適当な作業ディレクトリを作成します。Flashムービーをサイトで公開するために必要になるファイルは、すべてこの作業ディレクトリに収めるようにします。まずは、前回作成したBear.flvを作業ディレクトリにコピーしておきましょう。

SWFObjectのダウンロード

SWFObjectは、HTML内にFlash（swfファイル）を埋め込むために広く使われているオープンソースのJavaScriptライブラリで、Google Code上のSWFObjectプロジェクトで公開されています。最新のライブラリ（本エントリ執筆時点ではv2.2）をダウンロードして、ファイルを展開すると以下のようなディレクトリ構成になっています。

swfobject/
    + src/
    - expressInstall.swf
    - index.html
    - index_dynamic.html
    - swfobject.js
    - test.swf

swfobject.jsがSWFObjectの本体となるJavaScriptライブラリです。このファイルだけ作業ディレクトリにコピーしましょう。

FLVプレイヤーのダウンロード

flvファイルをブラウザ上でで再生させるためには、JW FLV Media Playerという専用のFlash（以下、FLVプレイヤー）が必要になります。

JW FLV Media Playerのダウンロードサイト

上記サイトからダウンロードしたmediaplayer-viral.zipを展開すると、以下のようなディレクトリ構成になっています。（本エントリ執筆時点での最新バージョンはv4.5）

mediaplayer-viral/
    - expressInstall.swf
    - player-viral.swf
    - preview.jpg
    - readme.html
    - swfobject.js
    - video.flv
    - yt.swf

player-viral.swfがFLVプレイヤーの本体となるFlashです。このファイルを作業ディレクトリにコピーして、わかりやすいようにファイル名を「flvplayer.swf」に変更しておきます（ファイル名はそのままでも構いません）。

パッケージにはswfobject.jsが同梱されていますが、ライブラリのバージョンがv1.5と古いので、先ほどSWFObjectプロジェクトからダウンロードしたv2.2を使うようにします（作業ディレクトリにはコピーしません）。

HTML/JavaScriptコード

作業ディレクトリに「index.html」というファイルを新規作成します。作業ディレクトリ内には以下の4つのファイルが置かれていることになります。

  • Bear.flv
  • swfobject.js
  • flvplayer.swf
  • expressInstall.swf
  • index.html

それでは、index.htmlを編集してHTML/JavaScriptのコードを書いていきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<div id="bear">
  <a href="http://get.adobe.com/flashplayer">Get Flash</a> to see this player.
</div>
<script type="text/javascript">
//<![CDATA[
var flv = new SWFObject("flvplayer.swf", "flvplayer", "480", "360", "9");
flv.addParam("flashvars", "file=Bear.flv");
flv.write("bear");
//]]>
</script>
</body>
</html>

これが最低限必要なコードとなります。以下、各コードについて説明していきましょう。

4

<script type="text/javascript" src="swfobject.js"></script>

SWFObjectのJavaScriptを読み込みます。

7
8
9

<div id="bear">
  <a href="http://get.adobe.com/flashplayer">Get Flash</a> to see this player.
</div>

このdivブロックがSWFObjectによってFlashムービーに置換されます。任意のid属性値を必ず割り当てるようにしてください。divブロック内には、Flash Playerがインストールされていない場合に表示されるコンテンツを書いておきます。ここでは、AdobeのFlash Playerのダウンロードサイトへのリンクを表示させるようにしています。

12
13
14

var flv = new SWFObject("flvplayer.swf", "flvplayer", "480", "360", "9");
flv.addParam("flashvars", "file=Bear.flv");
flv.write("bear");

Flashムービーを埋め込むためのJavaScriptです。

SWFObjectのコンストラクタに渡す引数は…

  • 第1引数（flvplayer.swf）
    FLVプレイヤーのURLを指定します。今回はindex.htmlのカレントディレクトリにflvplayer.swfを置いているのでファイル名だけで指定しています。
  • 第2引数（flvplayer）
    SWFObjectによって生成されるobject要素のname属性に使用されます。ページ内で一意であれば何でもいいです。
  • 第3引数（480）
    FLVプレイヤーの表示幅をピクセル単位で指定します。
  • 第4引数（360）
    FLVプレイヤーの表示高をピクセル単位で指定します。作成したflvファイルのアスペクト比を崩さないように、表示幅と共に調整する必要があります。

  • 第5引数（9）
    ブラウザに要求するFlashプレイヤーのバージョン番号です。とりあえず最新のバージョンに合わせておきます。

ここでは、最もシンプルなHTML/JavaScriptのコードを紹介しましたが、他にもいろいろ書き方があり、またFlashプレイヤーの振る舞いをカスタマイズすることも可能です。以下、私が参考にしたサイトです。

バックナンバー

タグ: • • • • •

コメントをどうぞ