8.1 <source> 要素
HTML5で重要な役割を果たす<source>と<track>要素は、様々なマルチメディア形式をサポートし、コンテンツのアクセシビリティを向上させるよ。詳しく見ていこう。
<source>要素は<audio>、<video>、そして<picture>要素の中で使われるんだ。これは異なるマルチメディアコンテンツのソースを指定するためのもの。これにより、ブラウザは再生に最適な形式を選べるから、クロスブラウザ互換性と異なるデバイス対応を実現できる。
構文
<source src="URL" type="MIME-type">
属性
src: マルチメディアファイルへのパスを指定するtype: ファイルの種類とそのMIMEタイプを指定。これによって、ブラウザがその形式をサポートしているか判断できる。
使用例:
例 1: <video> 要素内
この例では、ブラウザは対応している最初のフォーマットを再生しようとする。
HTML
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogv" type="video/ogg">
あなたのブラウザはビデオ再生をサポートしていません。
</video>
例 2: <audio> 要素内
HTML
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
あなたのブラウザはオーディオ再生をサポートしていません。
</audio>
例 3: <picture> 要素内
HTML
<picture>
<source srcset="image-320w.jpg" media="(max-width: 320px)">
<source srcset="image-640w.jpg" media="(max-width: 640px)">
<source srcset="image-1280w.jpg" media="(max-width: 1280px)">
<img src="image-1280w.jpg" alt="画像の例">
<picture>
<source> を使用するメリット
- クロスブラウザ互換性: 複数のフォーマットを指定できるので、異なるブラウザで再生を保証する
- デバイスに最適化: 異なるデバイスや条件に対して異なるファイルを指定できる
8.2 <track> 要素
<track>要素は、字幕や聴覚障害者向け字幕、説明、章、メタデータなどのテキストトラックをマルチメディアコンテンツに追加するために使用されるんだ。<audio> や <video> 要素の中に配置される。
構文
<track src="URL" kind="type" srclang="language" label="label">
属性
src: テキストトラックファイルへのパスを指定する。-
kind: テキストトラックの種類を指定。可能な値は:subtitles: 会話の翻訳用の字幕captions: 聴覚障害者向け字幕で、音の説明を含むdescriptions: 視覚障害者用のオーディオ記述chapters: マルチメディアコンテンツ内をナビゲートするための章metadata: JavaScriptで使用可能なメタデータ
srclang: テキストトラックの言語を指定（例: 英語ならen、スペイン語ならes）。label: トラックの説明的な名前で、トラック選択メニューに表示される。default: デフォルトでこのトラックを有効にする
使用例:
例 1: ビデオへの字幕
この例では、ビデオに英語とスペイン語の字幕トラックがある。ユーザーはメニューから望むトラックを選択できる。
HTML
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español">
あなたのブラウザはビデオ再生をサポートしていません。
</video>
例 2: 聴覚障害者向けの字幕
この設定は、英語で聴覚障害者向けの字幕トラックを追加する。
HTML
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="captions" srclang="en" label="subtitles">
あなたのブラウザはビデオ再生をサポートしていません。
</video>
<track> を使用するメリット
- アクセシビリティの向上: 字幕や説明があることで、内容が聴覚障害者や視覚障害者にとっても利用可能に
- 多言語対応: 異なる言語で字幕を追加可能
- 追加情報: 章やメタデータでマルチメディアコンテンツを整理・構造化できる
8.3 テキストトラックのファイル形式
テキストトラックは通常、WebVTT（Web Video Text Tracks）形式で保存される。この形式はほとんどの最新のブラウザでサポートされていて、機械的にも人間的にも読みやすいんだ。
WebVTTファイルの例 (subtitles_en.vtt)
TEXT
WEBVTT
1
00:00:00.000 --> 00:00:05.000
Welcome to our video presentation.
2
00:00:05.000 --> 00:00:10.000
We hope you find this informative and enjoyable.
<source> と <track> 要素の総合使用例
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>複数のソースとテキストトラックを持つビデオ</title>
</head>
<body>
<h1>複数のソースとテキストトラックを持つビデオの例</h1>
<video controls width="600" poster="posterimage.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
<track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions">
<track src="descriptions_en.vtt" kind="descriptions" srclang="en" label="English Descriptions">
Your browser does not support the video element.
</video>
</body>
</html>
GO TO FULL VERSION