img 要素
画像を表示する。終了タグはない。
１２ マルチメディア
１２．１ イメージ
１２．１．１ 画像 (img)
img 要素は、画像を表示する際に使用します。 必須属性のsrc属性で画像ファイルのURLを指定します。
一般的なブラウザで表示できる画像フォーマットとしては、PNG、GIF、JPEGがよく利用されています。他にも、ウェブ用のベクター画像フォーマットである SVG や、単一ページのPDFなどを src 属性の値として指定できます。
alt 属性は、単に画像のタイトルを入れるのではなく、その画像が表すものを文章として説明する必要があります。例えば、文章中に画像が埋め込まれた場合、画像を取り除いて本文と代替テキストだけを残した場合でも、その文章が問題なくつながるような内容とすることが求められています。
また、画像全体ではなく一部をクリックしたときに他の文書にリンクしたり、Javascriptを実行したい場合には、usemap 属性で map 要素の name を指定します。
（１） src 属性
src 属性に表示したい画像の URI を指定します。
画像を base64 にエンコード（変換）して直接HTMLファイルに埋め込むこともできます。src 属性の ","以降の文字列が base64 にエンコードされた画像のデータです。こうすることで、別に画像ファイルを読み込むことがなくなり表示速度が速くなります。ただし、エンコードすることで src 属性に記述される文字列が多くなり HTML ファイルの読み込みが遅くなることもあります。アイコンなどの小さい画像だけにすべきでしょう。
ちなみに下の例の画像は base64 にエンコードすると 12512文字になります（記述例では省略してあります）。
記述例
<img src="bear.png" title="ファイルを読み込んだ熊の絵"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA ... AAAAASUVORK5CYII=" title="base64でエンコードした熊の絵">
表示例
（２） width、height 属性
width 属性では表示される幅、height 属性では表示される高さを指定します。表示する画像の大きさではありません。
記述例
<img src="bear.png" alt="オリジナルの大きさそのままの熊の絵" title="普通"> <img src="bear.png" width="74" height="111" alt="縦に1.5倍に引き伸ばした熊の絵" title="のっぽ"> <img src="bear.png" width="111" height="74" alt="横に1.5倍に引き伸ばした熊の絵" title="ぽっちゃり">
width や height を記述しなければ画像そのままの大きさで、指定すればその大きさで表示されます。
表示例
（３） ismap 属性
また、ismap を指定すると、サーバー側イメージマップとなり、クリックした座標（x,y）が、URLのクエリ文字列としてサーバーに送信されるようになります。
左の例は、熊の絵をクリックしてもパラメーターは送られませんが、右の例ではクリックした座標がサーバーに送られます。
記述例
ismap がない例<a href="bear.htm"><img src="bear.png" title="くま"></a> |
ismap がある例<a href="bear.htm"><img src="bear.png" title="くま" ismap></a> |
|
表示例
|
表示例
|
（４） srcset 属性
srcset 属性とは、サイズ違いの画像を条件によって切り替える機能です。
srcset 属性では、表示したい画像の候補を複数記述しても、実際に読み込まれる画像は適切な1枚のみであって、表示しないその他の候補画像を無駄にロードしません。
画像の候補には、画像ファイルの横幅（ w ）またはデバイスピクセル比（ x ）のどちらかを指定することができます。1つ目はビューポート（ブラウザの表示領域）の幅に応じて画像を切り替える指定、2つ目はデバイスのピクセル比に応じて画像を切り替える指定です。
次の例では、bear-500.png は 500px、bear-600.png は 600px、bear-700.png は 700px であるという情報をブラウザに伝えています。そして、ブラウザの幅が 500px 以下ならば bear-500.png、600px 以下ならば bear-600.png、600px より大きければ bear-700.png が表示されます。
また、のような srcset 属性をサポートしていないブラウザ用に src 属性も合わせて記述します。ただし、srcset 属性の後に記述する必要があります。なお、srcset 属性の画像が表示された場合には、src 属性は無視されます。
記述例
<img srcset="bear-500.png 500w, bear-600.png 600w, bear-700.png 700w"
src="bear.png" sizes="100vw" title="くま">
別ウィンドウで表示し、ウィンドウの横幅を変えてみてください。横幅の大きさによって画像が変わります。ただし、などは、一度大きなサイズの画像が表示されてしまうと、それ以降はその画像しか表示されなくなってしまいます。その場合は、ウィンドウの横幅を小さくした状態で、キャッシュされた画像を消去して、再表示してみてください。
は、大きなサイズの画像が表示されても、ウィンドウの横幅を小さくすれば小さなサイズの画像が表示されるようになります。
下の表示例は別ウィンドウで表示したときのイメージです。緑色の濃い部分までが実際にウィンドウに表示される部分です。ウィンドウの幅によって画像が変わります。
表示例
700px
600px
500px
（５） sizes 属性
スマートフォン、タブレット、ＰＣなどデバイスによって表示サイズが異なります。いろいろなデバイスの表示サイズにあわせて最適な画像を表示する仕組みです。
sizes 属性は、表示する画像のサイズ（横幅）とその条件を指定します。割合で指定する場合は % ではなく w、h、vw、vh、vmin、vmax 単位を使います。長さで指定する場合は em、rem、px、cm、pt などが使用できます。（長さの単位 を参照してください）
また、sizes 属性は srcset 属性で幅指定子（w）が指定された場合のみ記述でき、srcset 属性にはセットされる全ての画像候補に画像ファイルの幅（w）を指定しておく必要があります
srcset と同じ例を sizes を指定して記述すると次のようになります。
記述例
<img srcset="bear-500.png 500w, bear-600.png 600w, bear-700.png 700w"
sizes="(max-width: 500px), (max-width: 600px)"
src="bear.png" title="くま">
下の表示例は別ウィンドウで表示したときのイメージです。緑色の濃い部分までが実際にウィンドウに表示される部分です。ウィンドウの幅によって画像が変わります。
表示例
700px
600px
500px
次の例では、画像を替えず、同じ画像をウィンドウの表示サイズが 500px 以下ならば350pxで、500px～700px の間ならはウィンドウの幅 70%で、それ以上ならば 490px で表示されます。
記述例
<img srcset="bear-700.png 700w"
sizes="(max-width:500px) 350px, (max-width:700px) 70vw, 490px"
src="bear.png" title="クマ">
別ウィンドウで表示し、ウィンドウの横幅を変えてみてください。ウィンドウの横幅の大きさによって画像の横幅が変わります。
表示例
700px
500px
１２．１．２ イメージマップ (map)
map 要素は、area 要素で定義されたクライアントサイド・イメージマップを参照できるように名前を定義します。
map 要素内の area 要素で、クリックできる領域の形やリンク先を定義し、img 要素の usemap 属性で使用する map 要素の name 属性を指定します。
イメージマップとは、クリック可能なリンク領域を持つ画像のことで、それをサーバーではなくブラウザ側で処理するのでクライアントサイド・イメージマップといいます。
map 要素
定義されたクライアントサイド・イメージマップを参照できるように名前を定義する。
実際の定義は、要素内に配置された area 要素で行う。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| name | 文字列 | イメージマップの名称（img 要素の usemap 属性で指定される名前）
注意：id 属性と同時に指定する場合は同じ名前にする必要がある。 | × |
記述例
<img src="map.png" usemap="#disk"><br> <map name="disk"> <area shape="circle" coords="250,100,50" href="circle.htm" title="丸"> </map>
実行例は、次の area 要素を参照してください。
１２．１．３ リンク領域 (area)
area 要素は、イメージマップのクリックできる領域の形やリンク先を定義します。この要素は、map 要素内で使用します。
領域の形は、shape 属性と coords 属性で決定し、リンク先は href 属性で指定します。href 属性を記述しなければ、クリックしてもどこにもリンクしない領域になります。
イメージマップとは、クリック可能なリンク領域を持つ画像のことで、それをサーバーではなくブラウザ側で処理するのでクライアントサイド・イメージマップといいます。
area 要素
イメージマップのクリックできる領域の形やリンク先を定義する。
なお、領域が重なっていた場合は先に指定したほうが優先される。また、クリックしてもどこにもリンクしない領域にしたい場合は、href 属性を記述しない。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| shape | 領域の形状 | × | |
| rect | 四角形（規定値） | ||
| circle | 円形 | ||
| poly | 多角形 | ||
| default | 画像全体（他の属性より後に指定する必要がある） | ||
| coords | 座標（x,y）等 | × | |
| x1,y1,x2,y2 | 四角形のとき、左上(x1,y1)と右下(x2,y2)の角の座標 | ||
| x,y,r | 円形のとき、中心(x,y)の座標と半径(r) | ||
| x1,y1,x2,y2,x3,y3 ... | 多角形のとき、すべての頂点(x1,y1 など)の座標 | ||
| x1,y1,x2,y2 | 画像全体のとき、左上(x1,y1)と右下(x2,y2)の角の座標 | ||
| href | URI | リンク先のURI（記述しなければどこにもリンクしない） | × |
| alt | 代替テキスト | マップが表示できない場合に説明する文章 | × |
| hreflang | 記述言語 言語コード一覧 | リンク先の文書を記述している言語 | href がない場合は指定できない |
| type | MIME タイプ MIME タイプ一覧 | リンク先の MIME タイプ | |
| rel | 関係性 リンクタイプ一覧 | 外部ファイルとの関係性 | |
| media | メディア メディアタイプ一覧 | 対象とするメディア | |
| target | リンク先の内容を表示するウィンドウ(フレーム) | ||
| _blank | 新規のウィンドウに表示 | ||
| _self | 現在のウィンドウ（フレーム）に表示 | ||
| _parent | 親ウィンドウ（フレーム）に表示 | ||
| _top | ウィンドウ全体に表示 | ||
| 名称 | 指定のウィンドウ（フレーム）に表示 | ||
記述例
<p><img src="map.png" alt="クリッカブルマップのためのサンプル図形" usemap="#example"></p> <map name="example"> <area shape="rect" coords="50,50,150,150" href="rect.htm" title="四角"> <area shape="circle" coords="250,100,50" href="circle.htm" title="円"> <area shape="poly" coords="400,50,450,150,350,150" href="poly.htm" title="三角"> <area shape="default" coords="0,0,500,200" href="default.htm" title="その他"> </map>
表示例
１２．１．４ 図表・別表・挿絵 (figure)
figure 要素は、本文から参照される図版（挿絵、図表、写真、ソースコード、等）を表します。
本文とは独立した単位として記述します。つまり、本文と関連しつつも、削除・移動しても本文の内容に影響がないブロックに対して使用します。
キャプション（タイトルや説明）を付けたい場合は、figure 要素内に figcaption 要素を配置します。
figure 要素
本文から参照される図版（挿絵、図表、写真、ソースコード、等）を表す。
多くのブラウザでは、上下に 1em、左右に 40px 程度のマージンが入る。
属性
なし記述例
<figure style="float:right;"> <img src="bear.png" alt="くまの絵" title="くま"> </figure> <p>クマ科に属する哺乳類の総称。体はよく肥え、がんじょうで、毛はあらく、毛色は褐色、黒色、白色など種類によって異なる。体長は最大種ホッキョクグマで約三メートル。四肢は太くて短く、強大なかぎ爪を備える。尾は短い。臭覚が優れ、雑食性で魚、小獣、木の実、草などを食べる。冬は穴の中で絶食して過ごすことが多い。肉は食用、毛皮は敷物、胆嚢は「くまのい」といって薬にする。北極地方から熱帯林まで分布し、ホッキョクグマ・マレーグマなど七種がいる。日本には本州以南に、黒色でのどの下に三日月形の白斑のあるツキノワグマが、北海道には大形のヒグマがすむ。</p>
この例では、スタイルシートで figure 要素を右に寄せて配置しています。
表示例
１２．１．５ 図表のキャプション (figcaption)
figcaption 要素は、figure 要素のキャプション（タイトルや説明）を表します。
figure 要素内に１つだけ配置することができます。
figcaption 要素
figure 要素のキャプション（タイトルや説明）を表す。
figure 要素に１つだけ配置することができる。
属性
なし記述例
<figure> <figcaption>くま（熊）</figcaption> <img src="bear.png" title="くま"> </figure> |
<figure> <img src="bear.png" title="くま"> <figcaption>くま（熊）</figcaption> </figure> |
|
キャプションが上にある例
表示例
|
キャプションが下にある例
表示例
|
１２．１．６ ピクチャー (picture)
レスポンシブイメージを実現するための要素で、img 要素で表示する画像の代わりに、ブラウザの横幅などの条件に従い、他の画像を指定する source 要素をグルーピングするために用いられます。
レスポンシブイメージとは、HTML 5.1 で定められた仕様で、スマートフォン、タブレット、ノートパソコン、デスクトップパソコン等、いろいろなデバイス幅・解像度に適した画像を表示する仕組みです。主な特徴は次の通りです。
- CSS や JavaScript を使わず、HTMLのみでレスポンシブな画像を取り扱える
- デバイスに応じた最適な「大きさ」の画像を表示できる
- デバイスに応じた最適な「見た目」の画像を出し分けできる
picture 要素
0個以上の source 要素と一つの img 要素を含み、様々な画面や端末の条件に応じた画像を提供する。
source 要素の type 属性や media 属性に適合するすれば、その source 要素の srcset 属性で指定された画像が表示される。適合しなければ、その source 要素はスキップされ、次の source 要素が検査される。
属性
なしsource 要素
画像ファイルの URL や種類を指定する。
type 属性を指定すれば、ブラウザがメディアファイルを取得する前に表示可能かどうかを判断することができます。
属性
| 属性名 | 属性値 | 説明 | 必須 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| srcset | 画像URL 記述子 | 画像のセット（コンマ区切りで並べたリスト） 記述子は次のいずれか
| ○ | ||||||||||
| sizes | 表示幅 | 表示する条件とそのときに表示する画像の横幅（コンマ区切りでで複数記述できる） srcset 属性に幅記述子 (w) がある場合のみ有効
| × | ||||||||||
| type | MIME タイプ | メディアファイルの MIME タイプやコーデック 例：type='MIMEタイプ; codecs="コーデック名"'（注） MIMEタイプ一覧 | × | ||||||||||
| media | メディア | 対象とするメディア（規定値：all） メディアタイプ一覧 | × | ||||||||||
（注）type の引用符の記述は例の通り外側がシングルクォーテーション（'）で、内側がダブルクォーテーション（"）です。
srcset 属性とは、サイズ違いの画像を条件によって切り替える機能です。
srcset 属性では、表示したい画像の候補を複数記述しても、実際に読み込まれる画像は適切な1枚のみであって、表示しないその他の候補画像を無駄にロードしません。
画像の候補には、画像ファイルの横幅（ w ）またはデバイスピクセル比（ x ）のどちらかを指定することができます。1つ目はビューポート（ブラウザの表示領域）の幅に応じて画像を切り替える指定、2つ目はデバイスのピクセル比に応じて画像を切り替える指定です。
横幅が 400px より小さいときは bear1.png が、 500px より小さいときは bear2.png が、それより大きいときは bear3.png が表示されます。
ブラウザの幅を変えてみてください。
記述例
<picture> <source type="image/png" media="all" srcset="figures/bear1.png 400w, figures/bear2.png 500w, figures/bear3.png 600w" sizes="(max-width: 400px), (max-width: 500px)" > <img src="bear1.png" width="80px" alt="くま"> </picture>
下の表示例は別ウィンドウで表示したときのイメージです。緑色の濃い部分までが実際にウィンドウに表示される部分です。ウィンドウの幅によって画像が変わります。ただし、などは、横幅が広いとき用の画像が一度でも表示されてしまうと、横幅をせまくしてもその画像しか表示されなくなってしまいます。その場合は、ウィンドウの横幅を小さくした状態で、キャッシュされた画像を消去して、再表示してみてください。
は、横幅が広いとき用の画像が表示されても、ウィンドウの横幅を小さくすれば横幅が狭いとき用の画像が表示されるようになります。
表示例
600px
500px
400px
注意
media 属性に alternate を記述すると、画像が変わらなくなります。
media 属性に下の例のように min-width や max-width を記述することもできるようです。
この記述方法だと、横幅が広いとき用の画像が表示されても、ウィンドウの横幅を小さくすれば横幅が狭いとき用の画像が表示されるようになります。
記述例
<picture> <source media="(min-width: 400px)" srcset="bear3.png"> <source media="(min-width: 300px)" srcset="bear2.png"> <img src="bear1.png" alt="くま"> </picture>
表示例
500px
400px
300px
１２．２ 動画
１２．２．１ 動画 (video)
<video>タグは、動画を再生する際に使用します。<video>タグを使用することで、Flash などのプラグインをインストールすることなく、標準の HTML からシンプルに動画を扱えるようになります。
また、<video>～</video> の中に、動画を再生できなかった場合の代替要素を記述することができます。
| 形式 | 拡張子 | MIME | ||||||
|---|---|---|---|---|---|---|---|---|
| MP4 （H.264 + AAC） | mp4 | video/mp4 | ○ | ○ | ○ | ○ | × | ○ |
| WebM （VP8 + Vorbis） | webm | video/webm | ○ | ○ | ○ | ○ | × | ○ |
| Ogg （Theora + Vorbis） | ogv | video/ogg | ○ | ○ | ○ | ○ | × | ○ |
video 要素
動画を表示する。動画は src 属性で指定するか、<video> ～ </video> 内に記述した <source> 要素で指定する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| src | URI | 埋め込む動画の URI | × （省略した場合は <source> 要素必須） |
| autoplay | なし | 自動再生（注） | × |
| preload | あらかじめ動画を読み込んでおくかどうかの指定 | × | |
| auto | ウェブページを読み込んだ時点で動画を裏側で読み込む（規定値） | ||
| metadata | 動画のサイズ・最初のフレーム・トラックリスト・再生時間などの動画のメタデータのみを取得する | ||
| none | ウェブページを読み込んだ時点では動画を読み込まない | ||
| controls | なし | 動画再生を利用しやすくするユーザインターフェースを表示する | × |
| muted | なし | 音声を出さずに再生 | × |
| poster | URI | 表示できる動画が無い場合のメッセージや動画の内容を知らせるヒントなどを表示させる画像ファイルの URI | × |
| loop | なし | ループ再生 | × |
| width | ピクセル数 | 表示の幅 | × |
| height | ピクセル数 | 表示の高さ | × |
| playsinline | なし | 全画面モードではなく、動画ファイルの表示領域で再生する | × |
（注）自動再生の可否は Media Engagement Index (MEI) というスコアによって決まります。muted を指定すると、自動再生できることもあります。
例えば、再生・一時停止・再生位置の移動・ボリュームなどのユーザインターフェースを表示するには次のようにします。
記述例
<video controls src="criticalCat.mp4" poster="start.png" width="320" height="240"> </video> <video src="notExist.mp4" autoplay poster="JollyRoger.png" width="320" height="240"> </video>
poster は動画が読み込まれるまで表示される画像を指定します。
左は、動画が再生されるまで再生ボタンのある画像が表示されます。この画面かユーザインターフェースの再生ボタンをクリックすると再生が始まるようにしています。右は動画が存在していませんので、どくろのマークが表示され続けます。
なお、ユーザインターフェースが表示されていない場合は、マウスを重ねると表示されます。
表示例
preload は動画をあらかじめ読み込むかどうかを指定します。デフォルトの値は auto なのでウェブページを読み込んだ時点で動画もあらかじめ読み込まれます。ウェブサーバに余分な負担を掛けたくない場合には、none を指定すると良いでしょう。
記述例
<video controls src="criticalCat.mp4" preload="auto" width="320" height="240"></video> <video controls src="criticalCat.mp4" preload="metadata" width="320" height="240"></video> <video controls src="criticalCat.mp4" preload="none" width="320" height="240"></video>
次の例では、再生時間（duration）と バッファされたメディアデータの範囲（buffered.start(0)～buffered.end(0)）も表示しています。
表示例
上の例では、preload='metadata' でも、動画ファイルが小さいためかすべて読み込まれるようです（まれに途中までのこともあります）。
|
preload='auto' |
preload='metadata' |
preload='none' |
|
メタデータ:未読 メディアデータ:未読 |
メタデータ:未読 メディアデータ:未読 |
メタデータ:未読 メディアデータ:未読 |
１２．２．２ リソース (source)
動画の URL は、<video> の src 属性で指定しますが、選択可能なリソースを複数指定するには <source> で記述します。
source 要素
動画ファイルの URL や種類を指定する。
type 属性を指定すれば、ブラウザがメディアファイルを取得する前に再生可能かどうかを判断することができます。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| src | URI | 埋め込む動画の URI | ○ |
| type | MIME タイプ | メディアファイルの MIME タイプやコーデック type='MIMEタイプ; codecs="コーデック名"'（注） MIMEタイプ一覧 | × |
| media | メディア | 対象とするメディア（規定値：all） メディアタイプ一覧 | × |
（注）type の引用符の記述は例の通り外側がシングルクォーテーション（'）で、内側がダブルクォーテーション（"）です。
source 要素を使うと、再生用のファイルを複数指定できるようになり、ブラウザは複数の選択肢から、再生対象のファイルを選択することができるようになります。ブラウザは、記述順にファイルをチェックし、再生可能なファイル形式が見つかるとその時点でファイルを再生します。
記述例
<video controls width="320" height="240"> <source src="criticalCat.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="criticalCat.webm" type='video/webm; codecs="vp8,vorbis"'> <source src="criticalCat.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> </video>
多くのブラウザでは、Ogg が再生できますので、criticalCat.ogv が再生されます。
表示例
ブラウザによって video 要素で再生できる種類が異なることもあります。
| mp4 | webm | ogv |
|---|---|---|
注意
type に引用符を二重に記述しようとした場合は、type='... "..."' のように外側に '（シングル引用符）を指定する必要があります。
引用符を二重に記述しない場合は、"（ダブル引用符）でも問題ありません。
| type='video/mp4; codecs="avc1.42E01E"' | type="video/mp4; codecs='avc1.42E01E'" | type="video/mp4;" |
|---|---|---|
１２．２．３ 字幕 (track)
track 要素を使用すると、動画/音声ファイルに字幕やキャプション、スクリーン リーダーのテキスト、チャプターを簡単に、標準化された方法で追加することができます。
ひとつの video 要素に複数の track 要素を付加すると、[cc] ボタンをクリックしたときに表示された、 label 属性で指定した名前によって切り替えることができます。
注意
track 要素で使用するテキストトラックファイルを有効にするためには、拡張子（vtt）を Web サーバーの MIME（text/vtt）に登録する必要があります。
track 要素
動画/音声ファイルに字幕やキャプション、スクリーン リーダーのテキスト、チャプターを追加する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| src | URI | テキストトラックファイル（拡張子 vtt）(注)の URI | ○ |
| kind | テキストトラックの種類 | × | |
| subtitles | 翻訳字幕（画面も音もある環境向け）（規定値） | ||
| captions | 字幕プラス効果音や状況説明（画面はあるけど音の無い環境向け） | ||
| descriptions | 動画の視覚的な構成の説明（画面の無い環境向け） | ||
| chapters | チャプター（章）タイトル | ||
| metadata | スクリプトから利用される情報（非表示） | ||
| srclang | 言語コード | テキストトラックデータの言語（規定値：ja） 言語コード一覧 | × |
| label | 文字列 | 複数トラックを区別するための名前 | × |
| default | URI | 複数トラックのときのデフォルトトラック | ○（複数トラック） |
（注）テキストトラックファイルは、WebVTTというファイルフォーマット（拡張子 vtt）で作成する。
ただし、テキストトラックファイルを有効にするためには、拡張子（vtt）を Web サーバーの MIME（text/vtt）に登録する必要がある。
ただし、テキストトラックファイルを有効にするためには、拡張子（vtt）を Web サーバーの MIME（text/vtt）に登録する必要がある。
WebVTT フォーマット
WebVTT は、プレーンテキストのファイル（文字エンコードは UTF-8）
WebVTT 一行目は必ず WebVTT 開始時刻 --> 終了時刻 [表示位置] 時刻の形式は、hh:mm:ss.sss（hh: は省略可） 表示テキスト 表示文字列（複数行可、タグも記述できるがブラウザによる） 表示テキスト 空行が表示文字列の終了（必須） 開始時刻 --> 終了時刻 [表示位置] 表示位置（省略可、以下参照） 表示テキスト
表示位置の形式 キーワード:値 （規定値:画面下部分の中央）
| キーワード | 値 | 意味 |
|---|---|---|
| line | 数値% | 上下の位置 |
| position | 数値% | 左右の位置 |
| align | start end | 文字揃えの基準位置 左揃え 右揃え |
記述例
<video controls width="320" height="200"> <source src="criticalCat.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="criticalCat.webm" type='video/webm; codecs="vp8,vorbis"'> <source src="criticalCat.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <track label="説明" src="criticalCat.vtt" kind="subtitles" srclang="ja" default> </video>
criticalCat.vtt
WEBVTT 00:00:00.200 --> 00:00:01.000 おっ！ネコだ 00:00:03.500 --> 00:00:04.500 line:20% <b>ジャンプ！！</b> 00:00:04.600 --> 00:00:05.000 line:50% position:70% align:end <span style="font-size:200%;">ア゛゛ーーッ</span>
表示例
スタイルシートは有効ではないようです。
１２．３ 音声
１２．３．１ 音声 (audio)
<audio>タグは、音声を再生する際に使用します。
また、<audio>～</audio> の中に、音声を再生できなかった場合の代替要素を記述することができます。
| 形式 | 拡張子 | MIME | ||||||
|---|---|---|---|---|---|---|---|---|
| MP3 | mp3 | audio/mp3 | ○ | ○ | ○ | ○ | × | ○ |
| Ogg | ogg | audio/ogg | ○ | ○ | ○ | ○ | × | ○ |
| AAC | m4a | audio/aac | ○ | ○ | ○ | ○ | × | ○ |
audio 要素
音声を再生する。音声ファイルは src 属性で指定するか、<audio> ～ </audio> 内に記述した <source> 要素で指定する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| src | URI | 埋め込む音声ファイルの URI | × （省略した場合は <source> 要素必須） |
| autoplay | なし | 自動再生 | × |
| preload | 事前読み込み | × | |
| auto | ウェブページを読み込んだ時点で音声を裏側で読み込む（規定値） | ||
| metadata | 再生時間などの音声のメタデータのみを取得する | ||
| none | ウェブページを読み込んだ時点では音声を読み込まない | ||
| controls | なし | 音声再生を利用しやすくするユーザインターフェースを表示する | × |
| muted | なし | 音声を出さずに再生 | × |
| poster | URI | ユーザー環境で利用できる音声が無い場合に表示させる画像ファイルの URI | × |
| loop | なし | ループ再生 | × |
例えば、ユーザインターフェースを表示するには次のようにします。
記述例
<audio controls src="goodMorning.mp3"> </audio>
表示例
１２．３．２ リソース (source)
音声の URL は、<audio> の src 属性で指定しますが、選択可能なリソースを複数指定するには <source> で記述します。
source 要素
音声ファイルの URL や種類を指定する。
type 属性を指定すれば、ブラウザがメディアファイルを取得する前に再生可能かどうかを判断することができる。
終了タグはない。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| src | URI | 埋め込む音声の URI | ○ |
| type | MIME タイプ | メディアファイルの MIME タイプやコーデック type='MIMEタイプ; codecs="コーデック名"'（注） MIMEタイプ一覧 | × |
| media | メディア | 対象とするメディア（規定値：all） メディアタイプ一覧 | × |
（注）type の引用符の記述は例の通り外側がシングルクォーテーション（'）で、内側がダブルクォーテーション（"）です。
source 要素を使うと、再生用のファイルを複数指定できるようになり、ブラウザは複数の選択肢から、再生対象のファイルを選択することができるようになります。ブラウザは、記述順にファイルをチェックし、再生可能なファイル形式が見つかるとその時点でファイルを再生します。
記述例
<audio controls> <source src="goodMorning.ogg" type='audio/ogg'> <source src="goodMorning.m4a" type='audio/aac'> <source src="goodMorning.mp3" type='audio/mp3'> </audio>
goodMorning.ogg を再生できないブラウザでは goodMorning.m4a が再生されます。
表示例
ブラウザによって audio 要素で再生できる種類が異なります。
| mp3 | |
|---|---|
| ogg | |
| aac |
１２．４ プラグイン (embed)
<embed>タグは、外部のアプリケーションやインタラクティブコンテンツを文書内に埋め込む際に使用します。
プラグインがインストールされていなかったり、プラグインのバージョンが異なっていたりすると、再生できなかったり、再生方法が異なっていたりします。プラグインがインストールされていないと、そのページを表示する度にインストールするかかどうかを確認するダイアログが表示されることもあります。
また、<embed>～</embedo> の中に、コンテンツを埋め込めなかった場合の代替要素を記述することができます。
embed 要素
コンテンツを埋め込む。コンテンツの URL は src 属性で指定する。
終了タグはない。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| src | URI | 埋め込むコンテンツファイルの URI | ○ |
| type | MIME タイプ | コンテンツの MIME タイプ MIMEタイプ一覧 | × |
| width | ピクセル数 | コンテンツの幅 | × |
| height | ピクセル数 | コンテンツの高さ | × |
| その他 | プラグインへのパラメータとして使用される | × |
video 要素で再生できない動画や Flash などのプラグインを必要とするデータを HTML 文書に埋め込みます。
記述例
<embed src="criticalCat.mov" type="video/quicktime" width="200" height="160"> <embed src="criticalCat.wmv" type="video/x-ms-wmv" width="200" height="160">
再生できるかどうかは、ブラウザの種類やプラグインのインストール状況によります。
表示例
| quicktime | Windows Media Player |
|---|---|
１２．５ オブジェクト (object)
<object>タグは、画像やプラグイン、インラインフレームなどの外部マルチメディアリソースなどを文書内に埋め込む際に使用します。詳細のパラメータ制御には <param> を用います。
ただし、<object> の動作は、ブラウザやそのバージョン、インストールされているプラグインの種類などによって動作が大きく異なります。
また、<object>～</object> の中に、リソースなどを埋め込めなかった場合の代替要素を記述することができます。
多くの場合他の要素に置き換えることができます。
- 画像を埋め込む場合
- 通常は img 要素を使用する。詳細な代替コンテンツが必要な場合には、object 要素を使用することも考えらる。
- HTML文書を埋め込む場合
- 通常は iframe 要素を使用する。HTML5における代替コンテンツが必要な場合には、object 要素を使用することも考えられる。
- 動画を埋め込む場合
- 通常は video 要素を使用する。ただし、利用できる動画ファイルの形式が限られているので、object 要素の方がより多くの形式を埋め込める可能性がある。
- 音声を埋め込む場合
- 通常は audio 要素を使用する。ただし、利用できる音声ファイルの形式が限られているので、object 要素の方がより多くの形式を埋め込める可能性がある。
- その他の場合
- 通常は embed 要素を使用する。ただし、代替コンテンツを配置する場合は object 要素の方がよいかもしれない。
記述例
<object data="figures/bear.png" type="image/png" typemustmatch width="74" height="74"></object> <object data="figures/bear.png" type="text/plain" typemustmatch width="74" height="74"></object> <object data="figures/bear.png" type="text/plain" width="74" height="74"></object>
左側はリソースとMIME タイプが一致しています。中央は一致していなくて、typemustmatch が指定されています。右側も一致していませんが、typemustmatch は指定されていません。
表示例
|
image/png |
text/plain typemustmatch |
text/plain |
object 要素で指定したコンテンツがサポートされていない場合に、代替コンテンツを指定できます。
次の例は Flash ファイル（.swf） を再生しようとしていますが、現在はサポートされていませんので MP4 が再生されます。
記述例
<object data="criticalCat.swf" type="application/x-shockwave-flash" width="200" height="160"> <video controls src="criticalCat.mp4" width="160" height="120"></video> </object>
表示例