<object></object>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ(usemap属性がある場合 HTML 5.1では廃止) / フォーム関連要素リスト化サブミット可能再関連付け可能) / パルパブル・コンテンツ
利用場所 エンベッディッド・コンテンツが置ける場所
内容 param要素を0個以上、その後にトランスペアレント(親要素のコンテンツモデルを継承)

object要素は、様々な形式のコンテンツ(画像、音声、動画、HTML文書、Javaアプレット、等)を文書内に埋め込みます。


<object data="example.jpg" type="image/jpeg" width="300" height="150"></object>

属性
任意属性(どちらか1つは必ず指定
data="" コンテンツの指定 URL 埋め込むコンテンツのURL
type="" コンテンツのMIMEタイプ MIMEタイプ 埋め込むコンテンツのMIMEタイプ
任意属性
width="" コンテンツの幅 数値 ピクセル数
height="" コンテンツの高さ 数値 ピクセル数
name="" [!]コンテンツの領域名 アンダースコア( _ )で始まらない文字列 固有の領域名
usemap="" [+]クライアントサイド・イメージマップ(HTML 5.1では廃止 #マップ名 イメージマップの名前
typemustmatch [+]MIMEタイプの一致を必要とする typemustmatch 値は省略可能
form="" [+]フォームとの関連付け ID名 対応するform要素に指定したID名
  • data属性type属性は、どちらか1つは必ず指定しなければなりません。
  • typemustmatch属性を指定する場合は、data属性type属性の両方を指定しなければなりません。
  • form属性は、object要素とform要素とを関連付ける際に使用します。

name属性の詳細については、下記のページを参考にしてください。

typemustmatch属性は、data属性で指定したコンテンツは、type属性で指定したMIMEタイプと一致する必要があるということを指定します。(一致しない場合、そのコンテンツは使用できなくなります)

コンテンツの埋め込み方法

コンテンツのURLを、data属性で指定します。例えば次のように記述した場合は、example.mpgがその場所に埋め込まれることになります。

<p><object data="example.mpg" type="video/mpeg"></object></p>
  • コンテンツの種類やブラウザによっては、パラメータとして指定しないと埋め込めない場合があります。

パラメータの指定について

パラメータを指定する場合は、object要素内の最初の部分(代替コンテンツよりも前)にparam要素を配置します。

<object data="example.swf" type="application/x-shockwave-flash" width="300" height="150">

<param name="movie" value="example.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#ffffff">

代替コンテンツはparam要素の後に配置します。

</object>

代替コンテンツについて

指定したコンテンツが利用できない場合は、object要素の内容が利用されることになります。

次の例では、object要素に対応していない、または動画(MPEG)を利用できない環境の場合に、静止画像(JPEG)が表示されるように指定しています。

<object data="example.mpg" type="video/mpeg" width="300" height="200">
<param name="src" value="example.mpg">

<p>動画を再生できません。</p>
<p><img src="example.jpg" alt="サンプル" width="300" height="200"></p>

</object>

次の例では、object要素で埋め込めない場合に、embed要素で埋め込まれるように指定しています。

<object data="example.mpg" type="video/mpeg" width="300" height="200">
<param name="src" value="example.mpg">

<embed src="example.mpg" type="video/mpeg" width="300" height="200">

</object>

次の例では、object要素で埋め込めない場合に、動画ファイルへのリンクが表示されるようにしています。

<object data="example.mpg" type="video/mpeg" width="300" height="200">
<param name="src" value="example.mpg">

<p><a href="example.mpg">動画を見る</a></p>

</object>

object要素の内容について

object要素は、親要素のコンテンツ・モデルを継承します(トランスペアレント)。そのため、親要素の種類によっては、代替コンテンツとして配置できない要素もあるので注意が必要です。

<figure>

<object data="example.mpg" type="video/mpeg" width="300" height="200">
<param name="src" value="example.mpg">

<p>動画を再生できません。</p>

</object>

</figure>

例えば、上記の場合は問題ありませんが、次の例では文法違反となります。(p要素内にはフレージング・コンテンツしか配置できないため)

<p>

<object data="example.mpg" type="video/mpeg" width="300" height="200">
<param name="src" value="example.mpg">

<p>動画を再生できません。</p>

</object>

</p>

他の埋め込み要素との比較

画像を埋め込む場合(img要素との比較)
通常はimg要素を使用した方が良いでしょう。詳細な代替コンテンツが必要な場合には、object要素を使用することも考えられます。
HTML文書を埋め込む場合(iframe要素との比較)
通常はiframe要素を使用した方が良いでしょう。HTML5における代替コンテンツが必要な場合には、object要素を使用することも考えられます。
動画・音声を埋め込む場合(embed要素との比較)
より多くの環境で利用できるのはembed要素かと思われます。しかし、object要素には代替コンテンツを配置できるというメリットがあります。
動画・音声を埋め込む場合(video要素・audio要素との比較)
video要素audio要素の場合は、利用できる動画・音声ファイルの形式が限られています。object要素の方がより多くの形式を埋め込むことが可能です。
HTML5における変更点
HTML 5.1における変更点
  • usemap属性が廃止されました。

使用例

Flashデータを埋め込む例

<object data="clock.swf" type="application/x-shockwave-flash" width="130" height="130">

<param name="movie" value="clock.swf">
<param name="quality" value="high">

<p>Flashを埋め込むことができませんでした。</p>
<p><img src="clock.gif" alt="" width="130" height="130"></p>

</object>

画像を埋め込んだ例

<object data="graph.gif" type="image/gif" width="172" height="85">

<table border="1">
<tr>
<th scope="col">年</th><th scope="col">売上</th>
</tr>
<tr>
<td>2009年</td><td>5000万円</td>
</tr>
<tr>
<td>2010年</td><td>5600万円</td>
</tr>
<tr>
<td>2011年</td><td>3000万円</td>
</tr>
</table>

</object>

表示例
売上
2009年5000万円
2010年5600万円
2011年3000万円
HTML文書を埋め込んだ例

<object data="oexample_a.html" type="text/html" width="250" height="100" name="example">

<p><a href="oexample_a.html">サンプル1へ</a></p>

</object>

表示例

サンプル1へ