マルチメディアファイルを XHTML 文書に埋め込む

はじめに

独自のタグが横行する分野

Web 上でのプレゼンテーションとして、音楽やムービーを HTML 文書内に埋め込む手法がよく用いられています。
よく MSIE では object タグを、 NN では embed タグを使いましょうという話が Web 制作サイトなどで挙がっております。また、 bgsound タグや applet タグに関する情報が掲載されていることもあります。
しかし、 embed, bgsound 各タグは、いわゆる「独自拡張」と見倣され、規格化はなされておりません。また、 applet タグは、一応 HTML 4.01/XHTML1.0 Transitional 及び Applet module で規格化されているものの、「非推奨」扱いとなっております。

XHTML/HTML の規格の範囲内でどうするか

XHTML/HTML では、上記の独自タグの換わりに、汎用の埋め込みを明示する object 要素の使用が規格化されています。そこで、この要素を用いて従来のような埋め込みが実現出来るかどうかを摸索していきたいと思います。

ここでは、以下の方針を掲げることにします。

旧来用いられて来た bgsound, embed, applet 各種タグの使用を禁止し、全て object 要素に切替える。
プラグインは適切にインストールされていると仮定する。
最新のメジャーな Web ブラウザ MSIE, Netscape/Mozilla (及び Opera) で再生が出来るようにする。
DOM を用いた動的な切替えや生成が出来るかどうかを検討する。

embed → objectの置き換え

MSIE 及び Netscape 系 Web ブラウザでは、マルチメディアファイルを埋め込む手段として embed タグを用いることが多いようです。 embed タグでは、主に以下のファイルを埋め込むために使われています。

動画(Flash, QuickTime Movie, SVG など)
音楽(MIDI, MP3 など)

どう書き換えるか

MSIE 5 以上、及び Netscape6以上/Mozilla (及び Opera) でこれらのファイルを再生させるためには、 embed タグを以下のように書き換えれば良いようです。

embed の書式

<embed src="FILE" A1="B1" A2="B2" A3="B3" ....
   name="NAME" type="TYPE" width="WIDTH" height="HEIGHT">

object 要素を用いた書き換え

<object data="FILE" type="TYPE" width="WIDTH"
  height="HEIGHT" id="NAME">
 <param name="src" value="FILE" />
 <param name="autostart" value="true" />
 <param name="A1" value="B1" />
 <param name="A2" value="B2" />
 <param name="A3" value="B3" />
 ....
</object>

注意点

Netscape6/7 及び Mozilla 系 Web ブラウザ (場合によっては Opera も) では data 属性が、 MSIE では param 要素の name="src" が存在する value 属性が、それぞれ認識されます。
Flash を再生させたい場合、 param 要素の name="src" は、 name="movie" に置き換えられます。
幅と広さは、 CSS でも指定可能です。ただし、ちゃんと明示されていないと不具合を生じることがあります。
Flash や MIDI などを扱う場合、自動再生を明示していないと、ロード時に再生されなかったり表示に不具合が出ることがあるので、 param 要素で明示しておきます。通常は true で良いと思います。
object 要素を用いてマルチメディアファイルを再生させたい場合は、 type 属性が必須です。以下に一例を挙げます。

Flash

application/x-shockwave-flash

MIDI

audio/midi

SVG

image/svg+xml

記述例

例えば MIDI ファイルを埋め込む際、 embed タグでは、以下のような記述をします。

<embed src="music.mid" type="audio/midi" name="M1"
 loop="true" autostart="true" width="300" height="200">

同様の効果を object 要素で実現させたい場合は、以下のように書き換えます。少なくとも MSIE 5/6 (Win) 及び Mozilla/Netscape6/7 では、うまく再生出来るようになります。

<object data="sample.mid" type="audio/midi"
   width="300" height="200" id="M1" />
  <param name="src" value="sample.mid" />
  <param name="autostart" value="true" />
</object>

applet → object の書き換え

アプレットの埋め込みには少々コツが必要ですが、以下のように書き換えればうまくいくようです。

要素名を applet から object に変える。
アプレットの所在を明示する code 属性は、 <param name="code" value="ファイル名" /> に置き換える。
type 属性は必須。例えば JAVA アプレットの場合は、 application/x-java-vm とする。
alt 属性の属性値を、 object 要素の中身にする。
param 要素の書き換えは不要。

記述例

JAVAアプレットの .class ファイルを埋め込みたい場合は、以下のように書き換えます。

applet を使った例

<applet code="prog.class" width="100" height="200" 
    alt="ブロック崩し">
 <param name="data1" value="sample.jpg" />
</applet>

object を使った例

<object type="application/x-java/vm" width="100" height="200">
 <param name="code" value="prog.class" />
 <param name="data1" value="sample.jpg" />
ブロック崩し
</object>

DOM / ECMAScript を用いた動的制馭

要素を生成させてみる

例えば、以下の要素に、目的のメディアを埋め込みたいとします。

<p id="media"></p>

Netscape 6/7, Mozilla の場合

application/xhtml+xml の場合を考慮した場合、以下のような記述が最適と思われます。これは Flash でも MIDI でも同様です。

var x = document.getElementById("media");
var y = document.createElementNS("http://www.w3.org/1999/xhtml","object");
y.setAttribute("data","sample.swf");
y.setAttribute("type","application/x-shockwave-flash");
y.setAttribute("width","200");
y.setAttribute("height","200");
x.appendChild(y);

param 要素も一緒に入れたい場合は、 object 要素を文書中に附加させる前に、 param 要素を定義し、 object 要素内に取り込む必要があります。

var x = document.getElementById("media");
var y = document.createElementNS("http://www.w3.org/1999/xhtml","object");

var z = document.createElementNS("http://www.w3.org/1999/xhtml","param");
z.setAttribute("name","movie");
z.setAttribute("value","sample.swf");
y.appendChild(z); // 先に param 要素を取り込む
var z = document.createElementNS("http://www.w3.org/1999/xhtml","param");
z.setAttribute("name","autostart");
z.setAttribute("value","true");
y.appendChild(z); // 先に param 要素を取り込む

y.setAttribute("data","sample.swf");
y.setAttribute("type","application/x-shockwave-flash");
y.setAttribute("width","200");
y.setAttribute("height","200");
x.appendChild(y);

MSIE の場合

param 要素を子要素として入れなければばらないのですが、 data 属性及び type 属性を特定した後で param 要素を埋め込んでも、うまく再生されません。そこで、先に param 要素を突っ込んだ後で、object 要素の各種属性を設定する必要があります。

留意すべき点は、以下の通りです。

MSIE では、 XHTML/XML モードの場合でも、 createElement で作られた要素は常に「(X)HTMLの要素」と見倣されます。 Netscape/Mozilla の場合は、名前空間が特定出来ないため、当然ながら XHTML の要素としては認識されません。
createElementNS を、 MSIE は認識してくれません。従って、双方で DOM を用いた動的生成を行わせるためには、振り分けを行うか、妥協して text/html として認識させて createElement で統一させるかのどちらかが必要になるでしょう。

動的なパラメータ設定

「要素を生成させてみる(MSIE の場合)」でも述べた通り、 param 要素を使いたい場合は、 object 要素の data/type 各属性を設定する前に、 param 要素を object 要素に取り込む必要があります。
従って、静的に記述された object 要素に param 要素を動的に取り込みたい場合は、一旦 removeChild などで元の object 要素を削除する必要があります。

MSIE 5.x (Win)での注意点

動的に object 要素の中に param 要素をいれる方法ですが、 WinIE6 の場合は、「Netscape/Mozilla」で紹介した方法と同様、素直に記述すればうまくいきます(当然、 createElementNS は createElement にしなければなりません)。

ただし WinIE 5.x の場合、DOM を用いて object 要素内にノードを取り込むことが出来ないという不具合があります。これでは使い物にならないのですが、一つの方法として、ダミーのインライン要素(例えば em)を作成してその中に param 要素を取り込み、 DHTML の機能である innerHTML を用いて、 em を object に書き換える手もあります。以下にその一例を挙げます。

var x = document.getElementById("media");
var y = document.createElement("em"); // ダミー要素

var z = document.createElement("param");
z.setAttribute("name","movie");
z.setAttribute("value","sample.swf");
y.appendChild(z);
var z = document.createElement("param");
z.setAttribute("name","autostart");
z.setAttribute("value","true");
y.appendChild(z); // 先に param 要素を取り込む

y.setAttribute("data","sample.swf");
y.setAttribute("type","application/x-shockwave-flash");
y.setAttribute("width","200");
y.setAttribute("height","200");
x.appendChild(y);

x.innerHTML = x.innerHTML.replace(/(<\/?)em/ig,'$1object');

Flash の LiveConnect を使ってみる

object 要素に id 属性を附加させることで、埋め込まれた Flash ファイルを、 ECMAScript を用いて動的に制馭させることが出来ます。ただし、プラグインや Web ブラウザのバージョンや種類によっては出来ない場合もあります(object を用いるか、 embed タグを用いるかは関係ありません)。

Flash 埋め込み文書の一例

<p>
 <object data="sample.swf" type="application/x-shockwave-flash"
  id="Movie" width="360" height="480">
  <param name="movie" value="sample.swf" />
  <param name="autostart" value="true" />
 </object>
</p>

Flash を制馭する ECMAScript の断片(の一例)

var Number = 2;
var x = document.getElementById("Movie");
x.GotoFrame(Number); // フレーム2へ移動

MSIE のXHTML/XML モードでは、object, param 要素には必ず html: 接頭辞が必要になります(通常の HTML モードでは不要)。
上記の例は、フレーム移動 (GotoFrame) を用いていますが、他にも様々な制馭が可能です(ここでは詳しい解説は行いません)。フォームや各種イベントと組み合わせれば、インタラクティブな制馭をすることが出来ます。

動的に生成された Flash を制馭する

DOM によって生成された Flash ムービーを、 ECMAScript/JavaScript で制馭させることも出来ます。ただし、環境によっては、生成直後には id 属性がうまく認識されず、制馭出来ずにスクリプトエラーになる場合もあるようです。 setTimeout 関数を用いて制馭を遅らせる、 id 属性の指定を出来るだけ前に持って行くなどをすれば、ある程度問題を回避出来ます。