Hatena::Groupxiss

アリゾナではもう働きたくない社長の blog このページをアンテナに追加 RSSフィード

2008-07-16 (Wed)

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

01:41 |  Adobe Flash をクロスブラウザで埋め込み表示させる Valid な XHTML 1.0/1.1 - アリゾナではもう働きたくない社長の blog を含むブックマーク はてなブックマーク -  Adobe Flash をクロスブラウザで埋め込み表示させる Valid な XHTML 1.0/1.1 - アリゾナではもう働きたくない社長の blog  Adobe Flash をクロスブラウザで埋め込み表示させる Valid な XHTML 1.0/1.1 - アリゾナではもう働きたくない社長の blog のブックマークコメント

目的・経緯

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

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

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

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

成功例

最小構成
<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 の指定なし)

HTMLCSS による 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 を消し去れる時代が来た模様。よきかな。

名無し名無し2008/07/17 11:11すばらしい!

ジャンボジャンボ2008/09/30 00:36operaのバージョン9.27で試してみましたがswfは表示できませんでしたぁ。。

藁にもすがり藁にもすがり2009/05/20 17:25FireFox3.0.10でもFlashは表示されませんでした orz

りらぞうりらぞう2011/06/17 14:19クロームVer12確認表示できましたですよ

InfinityInfinity2012/01/11 13:44Thanks alot - your anewsr solved all my problems after several days struggling

dluhwunuzbdluhwunuzb2012/01/11 21:40wyax3G <a href="http://vjzmsybnjjbf.com/">vjzmsybnjjbf</a>

xbirqqfynsxbirqqfyns2012/01/12 20:01BMrxuq , [url=http://ugihygktodgz.com/]ugihygktodgz[/url], [link=http://owreulnczbeq.com/]owreulnczbeq[/link], http://kzjwktlnnhgs.com/

plfqbljplfqblj2012/01/14 18:46YUBOVh <a href="http://uiswoeubkwfh.com/">uiswoeubkwfh</a>

gsrgemfgsrgemf2012/01/16 04:025im20u , [url=http://drdmwrrhcamy.com/]drdmwrrhcamy[/url], [link=http://jprpaxbonxlr.com/]jprpaxbonxlr[/link], http://fsqceztflkmu.com/

有希紀有希紀2012/02/23 21:28Cool
素晴らしい。
盲点だったけど確かにこれなら従来比でコードも短く済んでかつW3C(XHTML)遵守できますわな。

EmilyEmily2013/08/08 23:26Just cause it's simple doesn't mean it's not super helpufl.

LoloLolo2013/08/10 20:11Dag nabbit good stuff you whnsrerpiappeps! http://tnsgla.com [url=http://zghklvxeg.com]zghklvxeg[/url] [link=http://yycgihoe.com]yycgihoe[/link]

AhmoevaAhmoeva2013/08/15 19:20That kind of thnkiing shows you're an expert http://xkdzjv.com [url=http://ixfrxtwfqaq.com]ixfrxtwfqaq[/url] [link=http://psyskzlwejc.com]psyskzlwejc[/link]