« QuickTime ムービーを貼付けるときのマークアップで困った | Main | QuickTime ムービーを貼付けるときのマークアップを更になんとかする(多分最終回) »
昨日の続きです。最もましなパターンでも Firefox でインライン表示できませんでしたがそれを表示させる方法です。
昨日の「僕は見ていた : QuickTime ムービーを貼付けるときのマークアップで困った」では次の結論になりました。QuickTime の mov ファイルに対して非標準の embed 要素を使わず object 要素を使って Safari, Firefox そして Internet Explorer 6 で共通して QuickTime のプラグインが使える標準準拠のマークアップはありません。次のパターンがもっともましですが 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>因に Opera では昨日試した全てのパターンで OK でした。嬉しいことにとりあえず Opera は気にしなくてもいいです。
さて、問題は Firefox です。
Firefox の場合、classid 属性が無く data 属性があればインラインで表示できます。ということは、Firefox に限って classid 属性を取り去り、data 属性を入れればいいってことです。そうです JavaScript の出番です。仮に JavaScript が無効にされていても mov ファイルへのリンクは見えているのですから、発信側としての責務は果たした、あとは受信側でよろしくと胸を張って言えそうです。
というわけでそういうスクリプトを添えて次のようにすれば OK です。
<object id="MovObject" height="16" width="170"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
standby="Now Loading..."
>
<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>
<script type="text/javascript"><!--
if (window.navigator.userAgent.match(/Firefox/)) {
var objElmt = window.document.getElementById('MovObject');
objElmt.removeAttribute('classid');
objElmt.removeAttribute('codebase');
objElmt.setAttribute('data', 'http://homepage.mac.com/yuji_okamura/iSawIt/attach/2008-09-21/ToySymphony.mov');
objElmt.setAttribute('type', 'video/quicktime');
}
--></script>
ついでに standby 属性も入れておきました。script 要素の中をコメントにしています。XHTML の場合これは本来は間違いですが、ページの拡張子を .html にしているなどでサーバがページの Content-Type を text/html として返すときには多くのブラウザも従来の HTML のように扱うのでこれで OK です。本当に XHTML としてサーバが Content-Type を返すと IE6 は XML として扱ってしまって Web ページとしてうまくありません。そしてコメントにしておかないと携帯電話のブラウザなど script 要素を知らないブラウザではスクリプトのコードが表示されてしまいます。
上のコードを実際に表示させると次のようになります。