アリゾナではもう働きたくない社長の blog

Adobe Flash をクロスブラウザで埋め込み表示させる Valid な XHTML 1.0/1.1

01:41 |

目的・経緯

embed 要素は XHTML 1.0/1.1 では定義されておらず、画像以外のオブジェクト埋め込みには object 要素だけで行います。しかし object 要素は以前からブラウザごとの実装に差異が多く、使いどころが難しくて結局 DTD を HTML 4.01 にして embed タグを書かざるを得ないということがままありました。

ここでは、それを解決するために色々書き方を変えては異なる環境でテストし、メジャーな環境すべてで表示され、且つ Valid な (正当な) XHTML になる記述を模索してみました。

表示されることを確認したブラウザ

• Opera 9.51 (Build 10081)
• Firefox 3.0 (Mozilla/5.0 (Windows; U; Windows NT 5.1; ja; rv:1.9) Gecko/2008052906 Firefox/3.0)
• Safari 3.1.2 (5525.20.1)
• Internet Explorer 7 (7.0.5730.11)
• Internet Explorer 6 (6.0.2900.2180.xpsp_sp2_gdr.070227-2254)

他の環境での結果報告もいただけると嬉しいです。

• thanks to d:id:tomoya for Safari 3.1.2

成功例

最小構成

<object data="http://example.com/something.swf"
        type="application/x-shockwave-flash"
        width="400" height="300">
  <param name="movie" value="http://example.com/something.swf" />
</object>

CSS 使用（推奨？）

width と height の指定はそれぞれ以下のように CSS で代用することもできます。（どちらであるべきかはまた別のお話）

object#some-movie
{
  width: 400px; /* 単位指定しないと Opera 9.51 で駄目 */
  height: 300px;
}

<object data="http://example.com/something.swf"
        type="application/x-shockwave-flash"
        id="some-movie">
  <param name="movie" value="http://example.com/something.swf" />
</object>

代替内容あり（推奨）

今回調査した環境以外への対策として、例えば以下のように代替内容も用意しておきましょう。

<object data="http://example.com/something.swf"
        type="application/x-shockwave-flash"
        width="400" height="300">
  <param name="movie" value="http://example.com/something.swf" />
  <a href="http://example.com/something.swf">Some Movie</a>
</object>

失敗例

失敗例 (movie 変数指定なし)

name="movie" のパラメタ指定がないと IE 6 と IE 7 で読み込みが終了しませんでした。神崎さん曰く、ActiveX が原因の様。

<object data="http://example.com/something.swf"
        type="application/x-shockwave-flash"
        width="400" height="300">
</object>

失敗例 (data 属性なし)

param で指定したことで冗長になったことで data 属性を試しに削ってみたところ、Firefox 3、IE 7、IE 6 で表示されませんでした。（それはそれで正しい動作という気もしますが）

<object
        type="application/x-shockwave-flash"
        width="400" height="300">
  <param name="movie" value="http://example.com/something.swf" />
</object>

失敗例 (width と height の指定なし)

HTML や CSS による width・height 幅の指定がないと Opera 9.51、Firefox 3、Safari 3.1.2、IE 7、IE 6 で表示がおかしくなりました。img 要素のようにはいかないのですね。

<object data="http://example.com/something.swf"
        type="application/x-shockwave-flash"
        >
  <param name="movie" value="http://example.com/something.swf" />
</object>

失敗例 (classid 属性あり)

以下のように classid 属性を指定すると Firefox 3 で表示されませんでした。

<object data="http://example.com/something.swf"
        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        type="application/x-shockwave-flash"
        width="400" height="300">
  <param name="movie" value="http://example.com/something.swf" />
</object>

これには嵌まりました。有効活用されるべき HTML 記述を削るのではなく、問題となるブラウザデフォルトの CSS ルールを消して対処すべきかもしれません。ただ今回は HTML コード主体の話なので、任意属性ということもあり、最小構成からは削りました。

失敗例 (type 属性なし)

classid と type どちらの属性も無いと、IE 7、IE 6 で Windows Media Player らしき UI が埋め込まれ、ActiveX 許可の確認ポップアップが出て、しかし OK しても再生されないという状態に。

<object data="http://example.com/something.swf"

        width="400" height="300">
  <param name="movie" value="http://example.com/something.swf" />
</object>

総評・雑感

デスクトップ環境のメジャーブラウザであれば割と自信を持って embed を消し去れる時代が来た模様。よきかな。