僕は見ていた

実は embed 要素は標準じゃない

QuickTime ムービーの mov ファイルをインラインで再生できるように HTML ページに張るとき、embed 要素を使用するというのがお気楽な方法です。でも私の場合この方法は採用できません。なぜかというとこのページのソースを見てもらえればわかりますが、私は XHTML 1.0 Strict をマークアップ言語として採用しているからです。

XHTML 1.0 は HTML 4.01 を XML にしたものと思えば大体間違いありません。だからどんな要素(タグ)があるのか、それはどういうものなのかを調べるときは HTML 4.01 の仕様を見ればいいです。そこで HTML 4.01 の要素一覧「Index of the HTML 4 Elements」を見てください。そうなんです。embed 要素は存在しないんですよ。標準ではない要素だということです。

標準でないものを使用すると

• 標準に則ったという意味で正しいブラウザで表示できないかもしれない。

  というよりも表示できないとき標準でないものをサポートしてなくてもそのブラウザが悪いとは言えませんが、標準でないものを強制してしまうページの方は悪いと言えます。

• 今表示できているブラウザでも将来のバージョンアップで表示できなくなるかもしれない。

  互換性のためにたまたまサポートしているわけですから、いつサポートしなくなるかは開発側の判断です。人様の判断でページの内容が大きく左右されるというのも考えものです。

• 実際にどう表示(表現)されるかはブラウザ依存。

  標準でないわけですからそれがどのように表示されるかはブラウザ依存です。どんなとんでもないことが起きてもそれはそのブラウザでそう表示されるというだけであってブラウザに希望を述べる根拠にはなりますが文句をいう根拠にはなりません。最低限のところが規定されている標準ではないからです。

• 文書型の宣言と矛盾してしまう。

  私の場合は厳格な XHTML 1.0 Strict を使用していますが、比較的制限が緩い XHTML 1.0 Transitional (多くの人はこれだと思う)でも存在しない要素を使ってしまっては矛盾してしまいます。HTML 4.01 でも同様です。つまりページの内容に矛盾が生じるわけです。そういうときにブラウザがどう対応するかもブラウザ依存です。

というようにあまりいいことはありません。

比較的 Windows やその IE に特化したページにがっかりする割合が高い Mac ユーザの人なら非標準に依存した、つまり OS やブラウザに依存したページ造りは一部の人をがっかりさせるというのがよくわかっていると思います。できれば自分が造るときくらいはそれを避けたいものです。

代わりに object 要素を使えばいい

embed 要素を使うべきでないとしたら、その代わりにどうすればよいのでしょうか?

そこで登場するのが object 要素です。object 要素の詳細は W3C の仕様書(日本語訳)を見るのが正確です。これは仕様書なのでもうちょっと噛み砕いたサイトで調べるのもよいでしょう。

この object 要素には三つの役割があります。

• どんなプログラムで表示/実行されるべきかを指定する。
• 表示/実行されるデータの所在や属性を指定する。
• 表示/実行するときの付加的な値を指定する。

QuickTime ムービーの mov ファイルの場合はそれぞれ次のようになります。

• QuickTime Player またはそのプラグインあるいはそれに代わる何か
• mov ファイルの URL やその MIME タイプ
• 自動で再生されるか否かとかループして再生するか否かとか再生や停止等のコントロール部分を表示するか否かとか

それぞれに使用するマークアップの部品には次のものがあります。

どんなプログラムで表示/実行されるべきかを指定する部品

object 要素の classid 属性

この属性は object 要素によって表示/実行されるプログラムを指定する URI を示すためのもので、相対 URI で指定されたら codebase 属性で示された URI からの相対パスと解釈されます。

object 要素の codebase 属性

これは classid 属性、data 属性などで示された URI が相対 URI のときに、その基本パスを示すためのものです。

object 要素の standby 属性

これは表示/実行されるプログラムを指定ためのものではありません。データやプログラムをロードしている間に表示するメッセージを指定するものです。ここで説明しない属性のうち使う機会が多そうなので無理矢理ここに入れました。

表示/実行されるデータの所在や属性を指定する部品

object 要素の data 属性

これは表示/実行されるデータの URI を指定するものでで、相対 URI で指定されたら codebase 属性で示された URI からの相対パスと解釈されます。

object 要素の type 属性

これは表示されるデータがどのような種類のデータであるかを示す MIME タイプを指定するものです。

object 要素の codebase 属性

これは classid 属性、data 属性などで示された URI が相対 URI のときに、その基本パスを示すためのものです。

表示/実行するときの付加的な値を指定する部品

param 要素

これは object 要素の中(開始タグから終了タグの間)に置いて、表示/実行されるプログラムに渡すパラメータを指定するものです。name 属性でパラメータの名前を指定し、value 属性でそのパラメータの値を指定します。

param 要素は複数指定できて、その順序は任意です。表示/実行されるプログラムはそれらが特定の順序で現れることを期待していません。しかし object 要素の開始タグの直後(空白や改行は許容される)に連続して書かなければなりません。

どのようなパラメータが使えるのかは表示/実行されるプログラムに依存します。

QuickTime の場合はそれぞれ次のようになります。

object 要素の classid 属性

clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B

object 要素の codebase 属性

http://www.apple.com/qtactivex/qtplugin.cab

object 要素の standby 属性

あなたの好みで指定してください。必須属性ではありません。

object 要素の data 属性

mov ファイルの URI を指定します。

object 要素の type 属性

video/quicktime

param 要素

色々なパラメータがあります。その一覧は「HTML Scripting Guide for QuickTime: QuickTime <EMBED> and <OBJECT> Parameters」にあります。以下に音声のみのムービーでよく使うと思われるものを挙げておきます。パラメータ名も値も大文字小文字はどちらでもよいようです。

src パラメータ

mov ファイルの URL を指定します。上にリンクしたページには一覧されていません。恐らくその一覧は embed 要素の属性だけを列挙してあるのでしょう。

autoplay パラメータ

表示と同時に自動で再生を開始する場合は true、自動で再生を開始しない場合は false、特定の時刻に再生を開始する場合は @HH:MM:SS:FF という形式でその時刻を指定します。時刻指定の最後の FF は 1 秒を 30 分の 1 に分割した単位です。

controller パラメータ

再生や停止などの制御のインターフェースを表示する場合は true、しない場合は false を指定します。autoplay を false に指定したらこれを true にしないと普通は閲覧者は再生を開始できません。JavaScript によって制御する方法もありますが、JavaScript をサポートしてないあるいは無効にしてあるブラウザではそうはいきません。

loop パラメータ

再生をループさせる場合は true、させない場合は false を指定します。

volume パラメータ

音声のボリュームを 0 から 255 までの整数で指定します。

starttime パラメータ

再生開始ポイントをムービーの最初からの相対時刻で指定します。形式は @HH:MM:SS:FF で最後の FF は 1 秒を 30 分の 1 に分割した単位です。

endtime パラメータ

再生終了ポイントをムービーの最初からの相対時刻で指定します。形式は @HH:MM:SS:FF で最後の FF は 1 秒を 30 分の 1 に分割した単位です。

試行錯誤

さて、以上を踏まえると例えば次のようなコードが考えられます。

<object height="16" width="170"
  codebase="http://www.apple.com/qtactivex/qtplugin.cab"
  classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
  data="http://homepage.mac.com/yuji_okamura/iSawIt/attach/2008-09-21/ToySymphony.mov"
  type="video/quicktime"
  >
    <param name="controller" value="true" />
    <param name="autoplay" value="false" />
    <a href="http://homepage.mac.com/yuji_okamura/iSawIt/attach/2008-09-21/ToySymphony.mov">ToySymphony.mov</a>
</object>

しかしながらこれでは表示できません。Safari, Firefox そして Internet Explorer 6 でも共通して表示できません。使用したのは IE6 を除いて Mac 版です。

これは QuickTime プラグインが mov ファイルの在処を認識できないからのようです。つまり object 要素の data 属性の値が QuickTime プラグインにまで伝えられないのです。そこで次のようにしてみました。

<object height="16" width="170"
  codebase="http://www.apple.com/qtactivex/qtplugin.cab"
  classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
  >
    <param name="controller" value="true" />
    <param name="autoplay" value="false" />
    <param name="src" value="http://homepage.mac.com/yuji_okamura/iSawIt/attach/2008-09-21/ToySymphony.mov" />
    <a href="http://homepage.mac.com/yuji_okamura/iSawIt/attach/2008-09-21/ToySymphony.mov">ToySymphony.mov</a>
</object>

惜しいですがこれも駄目です。Safari と Internet Explorer 6 では表示できますが、Firefox で表示できません。代替の mov ファイルへのリンクが表示されてしまいます。

いっそのことプラグインなどを指定しないというのもありかもしれません。というより私はその方が好みです。なぜなら閲覧者の環境は色々あり得ます。予め一つに決められないし、今の段階で色々なケースを列挙しても将来変わる可能性は十分にあります。そこで次のようにしてみます。

<object height="64" width="256"
  data="http://homepage.mac.com/yuji_okamura/iSawIt/attach/2008-09-21/ToySymphony.mov"
  type="video/quicktime"
  >
    <param name="controller" value="all" />
    <param name="autoplay" value="false" />
    <param name="src" value="http://homepage.mac.com/yuji_okamura/iSawIt/attach/2008-09-21/ToySymphony.mov" />
    <a href="http://homepage.mac.com/yuji_okamura/iSawIt/attach/2008-09-21/ToySymphony.mov">ToySymphony.mov</a>
</object>

残念ながらこれも駄目です。今度は Internet Explorer 6 で表示できません。代替のリンクも出てきません。Internet Explorer 6 ではプラグインを明示しないと駄目なようです。

もう何がなんだかわからなくなってきそうです。そこで object 要素の classid 属性、object 要素の data 属性(type 属性もセットとして考える)、param 要素による src パラメータの有無で Safari, Firefox そして Internet Explorer 6 での表示がうまくいくかどうかを全パターンやってみました。ただし data 属性 も src パラメータも両方無いと mov ファイルの在処を示せないのでそのパターンは抜きです。

全滅でした。三つの主要ブラウザで共通して OK なパターンはありませんでした。かろうじてパターン 3 と 6 で代替のリンクを使ってどのブラウザでも mov ファイルを閲覧者に聞かせることができます。なるべくプラグインを使うとすればパターン 3 がベストということになります。

まとめ

三つの主要ブラウザで共通して QuickTime プラグインを使用してインラインで mov ファイルを表示する標準準拠のマークアップはなさそうです。

最もましなのは次のパターンで、Firefox ではインラインでは表示できないが代替のリンクが表示されるので mov ファイルにアクセスできないというわけではありません。

<object height="16" width="170"
  codebase="http://www.apple.com/qtactivex/qtplugin.cab"
  classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
  >
    <param name="controller" value="true" />
    <param name="autoplay" value="false" />
    <param name="src" value="http://homepage.mac.com/yuji_okamura/iSawIt/attach/2008-09-21/ToySymphony.mov" />
    <a href="http://homepage.mac.com/yuji_okamura/iSawIt/attach/2008-09-21/ToySymphony.mov">ToySymphony.mov</a>
</object>

こうなってくると冒頭に列挙したデメリットを無視してインラインでの表示を最優先にするのなら非標準の embed 要素を使用するという選択肢もないわけではないかもしれませんね。