HTML 【 コンテンツの組み込み 】 ~ object要素、param要素

Laptop and multimedia (done in 3d)

object要素は、外部コンテンツをHTML上に組み込む要素で、画像、音声、動画、HTML、PDFファイルなどを表示することができます。
そして、param要素はobject要素の子要素です。
今回は、外部コンテンツを組み込む際に使われるobject要素、param要素についてまとめたいと思います。

目次

1.object要素とparam要素
2.object要素で扱える外部コンテンツの種類
3.object要素で画像の組み込み
4.object要素とparam要素で動画の組み込み
5.object要素で別のHTMLファイルの組み込み
6.object要素の属性一覧

1.object要素とparam要素

object要素は、外部コンテンツをHTML上に組み込む要素です。
画像、音声、動画、HTML、PDFファイルなどを表示することができます。

画像はimg要素、音声はaudio要素など、それぞれ組み込みのための要素がありますが、object要素は、これらを表示することができます。

param要素は、object要素の子要素です。
プラグインを使って再生する、動画などのコンテンツを組み込んだ場合、プラグインが必要とするパラメータをobject要素で埋め込めないときは、param要素で指定します。

プラグインとは、Flashファイル(.swf)を再生するFlash Playerのように、ブラウザに追加インストールするものです。
代表的なプラグインとして、Adobe Flash Player、Adobe Reader、Windows Media Player、Real Player、QuickTime、Microsoft Silverlightなどがあります。

使用する要素 <object>~</object>
<param>
object要素の属性 data属性 組み込むファイルのURL
type属性 組み込むファイルのMIMEタイプ
width属性
height属性 高さ
usemap属性 イメージマップの名前を指定
name属性 targetで指定される名前を指定
form属性 関連づけるform要素のid名を指定
グローバル属性 id属性、class属性、title属性、style属性など
param要素の属性 name属性 パラメータの名前(必須)
value属性 パラメータの値(必須)
グローバル属性 id属性、class属性、title属性、style属性など

object要素の属性のうち、data属性か、type属性のどちらか1つは指定が必須です。

object要素を使用すると、代替コンテンツが詳細に作れます。
<object>~</object>間に、テキストや他のHTML要素を使って詳細な代替コンテンツが作れます。object要素で指定した外部コンテンツが表示されれば、この代替コンテンツは表示されません。

▲目次へ戻る

2.object要素で扱える外部コンテンツの種類

object要素で組み込む外部コンテンツは、下記の3種に分類されます。

画像
画像(gif, jpeg, png, svgなど)
 
プラグインに処理されるデータ
動画(AVI, MPEG, MP4, QuickTime など)
音声(MP3, AAC, MIDI, RealAudio, WAVE など)
その他コンテンツ(swf, JAVAアプレット(.class) )
 
入れ子の表示コンテンツ
他のHTMLファイルやPDFなど
 

入れ子の表示コンテンツとは、ネスト(入れ子)されたブラウジング・コンテキスト(nested browsing contexts)」のことです。
ウィンドウやタブなど、HTMLが表示される場所を、HTML5からブラウジング・コンテキストと呼ぶようになりました。
インラインフレームや、object要素を使う場合のように、画面にさらに窓があって、HTML文書などが入れ子になってる場合を、ネストされたブラウジング・コンテキスト(nested browsing contexts)と言います。

▲目次へ戻る

3.object要素で画像の組み込み

 
次の例は、object要素で画像を組み込み、代替コンテンツにリスト要素を使っています(img要素ではリスト要素は使えません)。
 
  1. 灰青色の円
  2. 赤い三角形
  3. 青い四角形

DBlue Red Blue

htmlコードは、以下の通りです。

<object data=”sample.jpg” type=”image/jpeg” width=”525″ height=”150″ usemap=”#shapes”>
<ol>
<li><a href=”#”>灰青色の円</a></li>
<li><a href=”#”>赤い三角形</a></li>
<li><a href=”#”>青い四角形</a></li>
</ol>
</object>
<map name=”shapes”>
<area coords=”107,75,55″ shape=”circle” href=”#” />
<area coords=”209,132,262,20,314,132″ shape=”poly” href=”#” />
<area coords=”371,28,463,123″ shape=”rect” href=”#” />
</map>

<ol>~</ol>の部分が代替コンテンツのリストです。

▲目次へ戻る

4.object要素とparam要素で動画の組み込み

 
次の例は、object要素とparam要素で動画(MP4ファイル)を組み込んでいます。
 

htmlコードは、以下の通りです。

<object data=”sample.mp4″ type=”video/mp4″ width=”640″ height=”380″>
<param name=”src” value=”video/uchiage.mp4″>
<param name=”autoplay” value=”false”>
<param name=”controller” value=”true”>
<embed src=”video/uchiage.mp4″ width=”640″ height=”380″ type=”video/mp4″
autoplay=”false” controller=”true” pluginspage=”http://www.apple.com/jp/quicktime/download/”>
</object>

param要素でプラグインのパラメータを指定しています。
param要素は、name属性の値で指定したパラメータ名に対して、value属性の値でパラメータ値を指定します。
ここではembed要素も代替コンテンツとして利用しています。

▲目次へ戻る

5.object要素で別のHTMLファイルの組み込み

 
他のHTMLファイルを組み込むと、インラインフレームのようになります。
 

wikipediaを別ウィンドウで開く

htmlコードは、以下の通りです。

<object data=”https://ja.wikipedia.org/wiki/” type=”text/html” width=”570″ height=”200″>
<a href=”https://ja.wikipedia.org/wiki/” target=”_blank”> wikipediaを別ウィンドウで開く</a>
</object>

▲目次へ戻る

6.object要素の属性一覧

 

data=”URL”
組み込むファイルのURLを指定

<object data=”image/shapes.gif” type=”image/gif” width=”525″ height=”150″></object> 

type=”MIMEタイプ”
組み込むファイルのMIMEタイプを指定
text/html(HTML)、application/pdf(PDF)、video/mpeg(MPEG)など

<object data=”image/shapes.gif” type=”image/gif” width=”525″ height=”150″></object> 

width=”object要素の幅”、height=”object要素の高さ”
object要素の幅や高さをピクセルや%などで指定

<object data=”image/shapes.gif” type=”image/gif” width=”525″ height=”150″></object> 

usemap=”イメージマップの名前”
要素の name属性で指定したイメージマップの名前を指定して関連付ける

<object data=”image/shapes.gif” type=”image/gif” width=”525″ height=”150″ usemap=”#shapes”></object> 
<map name=”shapes”>
<area shape=rect coords=”25,25,125,125″ href=”rect.html” alt=”四角”>
</map>

name=”名前”
他のHTMLファイルを読み込む場合など、target属性で指定させるために、埋め込む領域の名前を指定(ネスト(入れ子)時のブラウジング・コンテキスト名)
 
form=”関連付けるform要素のid名”
関連付けるform要素のid名を指定
object要素内に組み込んだコンテンツを、同じページ内のform要素に関連付けて、form要素で指定したプログラムに処理させることができる
この場合、組み込みコンテンツは、フォーム部品として扱えるもの(例えば、swfでユーザに入力や選択をさせた値や、フォーム部品のある外部HTMLなど)である必要がある

<object form=”exform” data=”ex.swf” type=”application/x-shockwave-flash” width=”525″ height=”150″>
<param name=movie value=”ex.swf”>
<embed src=”ex.swf” type=”application/x-shockwave-flash” width=”525″ height=”150″>
<input type=”datetime-local” name=”date”> *ご予約の年月日を入力してください
</object>

<form id=”exform” action=”example.cgi”>
<input type=”submit”>
</form>

この他に、id属性、class属性、title属性、style属性などのグローバル属性も使います。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です