2008.2.14 (Thu)

objectタグ考察2

objecctタグの件。続き。

これでどうだっ!

<TABLE cellpadding=0 cellspacing=0 border=0><TR><TD height="28" valign="middle">
<TABLE cellpadding=0 cellspacing=0 border=0 id="bgmtbl"><TR><TD>

<SCRIPT>activxwrite('<OBJECT classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" width="198" height="26" border="0" ><PARAM name="FileName" value="test.mid"><PARAM name="AutoStart" value="true"><PARAM name="PlayCount" value="0"><EMBED SRC="test.mid" width="198" height="16" autostart="true" loop="true"></EMBED></OBJECT>');if(navigator.appName=="Microsoft Internet Explorer"){document.getElementById("bgmtbl").border=1;}</SCRIPT>


<NOSCRIPT>
<OBJECT classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" width="198" height="26" border="0">
<PARAM name="FileName" value="test.mid">
<PARAM name="AutoStart" value="true">
<PARAM name="PlayCount" value="0">
<EMBED SRC="test.mid" width="198" height="16" autostart="true" loop="true">
</EMBED>
</OBJECT>
</NOSCRIPT>

</TD></TR></TABLE>
</TD></TR></TABLE>

・ポイント1
Win IE6のバグ回避のため、objectタグ2つの入れ子はしない。
優先順位は「WindowsMediaPlayerのobject」→「汎用embed」。

・ポイント2
MediaPlayerのPluginは、縁取りしないと見栄えが悪いので縁取り。<object border="1">は、WinのFirefoxで「内側のembedを使うのにobjectタグの枠線が表示されてしまう」問題があるのでボツ。border="0"のtableタグで囲っておいて、MediaPlayerだったらJavaScriptで後から縁取り(border=1)。
判定条件はとりあえず「Microsoft Internet Explorer」であること。これでは厳密じゃないかと思うけど、縁取りだけの判定だから良しとします。

・ポイント3
iframe内に置いたときに縦位置を合わせるために、その外側をtableタグで囲ってtd align="middle"。

・ポイント4
Win IEの「1回クリックしないとActiveXがアクティブにならない問題」(「非ActiveX問題」と命名) の解決のために外部JavaScriptファイルからdocument.writeでobjectタグを書き出し(関数名activxwrite)。

よし、画像イメージじゃなく、実装してみよう〜。

↓こんなんでました。

※重かったのでリンクにしました。



みなさん、どんなふうに表示されてますかね?今回、いろいろやってて思ったのは、「MSIEふざけんな!」と。バグとか特殊な仕様とか盛りだくさん。
MediaPlayerのデザインも気色悪いし。
ver11入れたら、↓こんなんなっちゃったよ(これは画像)。
MSさんよ、こりゃ「カエルの家になります〜」とか言ってる場合じゃないぜ。

それにしても、手打ちでHP作るのは楽しい(笑)
この記事のURL: