HTML マルチメディア
Web 上の多媒体は音声、音楽、ビデオ、およびアニメーションを指します。
現代のウェブブラウザは多数の多媒体形式をサポートしています。
何が多媒体ですか？
多媒体は様々な形式から成り立っています。文字、画像、音楽、音声、録音、映画、アニメーションなど、聴くことも見ることもできる内容の全てが含まれます。
インターネット上では、ページに埋め込まれた多媒体要素をよく見かけます。現代のブラウザは多種多様な多媒体形式をサポートしています。
このチュートリアルでは、異なる多媒体形式とそれらをあなたのウェブページで使用する方法について学びます。
ブラウザのサポート
最初のインターネットブラウザはテキストのみをサポートしていましたが、サポートするフォントや色も単一でした。その後、色やフォント、テキストのスタイルをサポートするブラウザが登場し、画像のサポートも追加されました。
異なるブラウザは音声、アニメーション、ビデオのサポートを異なる方法で処理します。一部の要素はインラインで処理できるものもあれば、追加のプラグインが必要な場合もあります。
以下の章ではプラグインについて詳しく学びます。
多媒体形式
多媒体要素（例：ビデオや音声）はメディアファイルに格納されます。メディアタイプを判別する最も一般的な方法はファイル拡張子を見ることです。ブラウザはファイル拡張子 .htm または .html を受け取ると、そのファイルを HTML ページと見なします。.xml 拡張子は XML ファイルを指し、.css 拡張子はスタイルシートを指します。画像形式は .gif や .jpg によって識別されます。
多媒体要素も .swf、.wmv、.mp3、および .mp4 などの異なる拡張子を持つファイル形式があります。
ビデオ形式
MP4はインターネットで広く使用される新しいビデオ形式です。
- YouTube は MP4 の使用を推奨しています。
- Flash プレイヤーは MP4 をサポートしています。
- HTML5 は MP4 をサポートしています。
| 形式 | ファイル | 説明 |
|---|---|---|
| AVI | .avi | AVI (Audio Video Interleave) フォーマットは Microsoft によって開発されました。すべての Windows コンピュータは AVI フォーマットをサポートしています。インターネット上でよく使われるフォーマットですが、非 Windows コンピュータでは再生できない場合があります。 |
| WMV | .wmv | Windows Media フォーマットは Microsoft によって開発されました。インターネット上でよく使われますが、追加の（無料）コンポーネントがインストールされていないと再生できません。 |
| MPEG | .mpg .mpeg |
MPEG (Moving Pictures Expert Group) フォーマットはインターネット上で最も一般的です。クロスプラットフォームであり、すべての主要なブラウザでサポートされています。 |
| QuickTime | .mov | QuickTime フォーマットは Apple によって開発されました。インターネット上でよく使われますが、追加の（無料）コンポーネントがインストールされていない Windows コンピュータでは再生できません。 |
| RealVideo | .rm .ram |
RealVideo フォーマットは Real Media によってインターネット向けに開発されました。低帯域条件下でのビデオストリーミング（ライブビデオ、インターネットテレビ）に対応しています。低帯域優先のため、品質が低下することがあります。 |
| Flash | .swf .flv |
Flash (Shockwave) フォーマットは Macromedia によって開発されました。再生するには追加のコンポーネントが必要ですが、Firefox や IE といったブラウザにはプリインストールされています。 |
| Mpeg-4 | .mp4 | Mpeg-4 (with H.264 video compression) はインターネット用の新しいフォーマットです。実際に、YouTube は MP4 を推奨しています。YouTube では多数のフォーマットが受け付けられ、それらはすべて .flv または .mp4 に変換されて配信されます。ますます多くのビデオ投稿者が MP4 に移行し、これを Flash プレイヤーと HTML5 のインターネット共有フォーマットとして採用しています。 |
Note:最新の HTML5 標準は MP4、WebM、および Ogg ビデオフォーマットのみをサポートしています。
音声形式
MP3（MPEG Audio Layer III）は動画像専門家グループによって開発された音声圧縮技術です。音声データを大幅に削減するように設計されています。あなたのサイトが音楽を主なコンテンツとする場合、MP3 フォーマットを選択することができます。
| 形式 | ファイル | 説明 |
|---|---|---|
| MIDI | .mid .midi |
MIDI (Musical Instrument Digital Interface) は楽器や音声カード向けの形式です。MIDI ファイルには音声そのものは含まれませんが、電子機器（例えばシンセサイザーや音声カード）を通じて再生できるデジタル音楽命令が含まれています。 |
| RealAudio | .rm .ram |
RealAudio フォーマットは Real Media によってインターネット向けに開発されました。この形式はビデオもサポートしています。低帯域条件下での音声ストリーミング（オンライン音楽、ネットラジオ）に対応しており、低帯域優先のため、品質が低下することがあります。 |
| Wave | .wav | Wave (waveform) フォーマットは IBM と Microsoft によって開発されました。すべての Windows コンピュータとほとんどのブラウザ（Google Chrome を除く）はこれをサポートしています。 |
| WMA | .wma | WMA フォーマット (Windows Media Audio) は MP3 よりも高品質で、多くのプレイヤーと互換性がありますが、iPod とは互換性がありません。WMA ファイルは連続データストリームとして送信できるため、ネットラジオやオンライン音楽に適しています。 |
| MP3 | .mp3 .mpga |
MP3 ファイルは実際には MPEG ファイルの音声部分です。最初に動画像専門家グループによって開発されました。MP3 は音楽に特化した最も人気のある音声形式です。今後、多くのソフトウェアシステムがこれをサポートすることを期待しています。 |
注記:最新の HTML5 標準は MP3、WebM、および Ogg 音声フォーマットをサポートしています。
この例では、ビデオとオーディオを組み合わせて、字幕とブラウザがHTML5ビデオをサポートしていない場合のフォールバックコンテンツを含めます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5マルチメディアの例</title>
</head>
<body>
<h1>素晴らしい動画をご覧ください</h1>
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<track src="movie.vtt" kind="subtitles" srclang="ja" label="日本語字幕">
お使いのブラウザはHTML5ビデオをサポートしていません。
<a href="movie.mp4">こちら</a>からダウンロードしてください。
</video>
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
お使いのブラウザはオーディオ要素をサポートしていません。
</audio>
</body>
</html>
説明:
-
<video> タグはビデオを埋め込みます。
-
width と height 属性は、ビデオプレーヤーのサイズを指定します。
-
controls 属性は、ブラウザの標準的なビデオコントロールを表示します。
-
<source> タグは、複数のビデオソースを提供します。ブラウザは、サポートされている最初のソースを使用します。
-
<track> タグは、字幕ファイルを指定します。
-
ビデオがサポートされていないブラウザのために、フォールバックコンテンツとしてダウンロードリンクを提供しています。
-
-
<audio> タグはオーディオを埋め込みます。
-
controls 属性は、ブラウザの標準的なオーディオコントロールを表示します。
-
<source> タグは、複数のオーディオソースを提供します。ブラウザは、サポートされている最初のソースを使用します。
-
オーディオがサポートされていないブラウザのために、フォールバックメッセージを表示します。
-
注意点:
-
sample-video.mp4、sample-video.webm、sample-subtitle.vtt、sample-audio.mp3、sample-audio.ogg は、実際のファイル名に置き換えてください。
-
すべてのブラウザがすべてのビデオ/オーディオ形式をサポートしているわけではないため、複数の形式を提供することをお勧めします。
-
アクセシビリティのために、字幕やフォールバックコンテンツを提供することが重要です。
関連する質問と回答
HTML5でどのビデオ形式がサポートされていますか？
- HTML5ではMP4、WebM、Oggビデオ形式がサポートされています。
MIDIファイルの利点は何ですか？
- MIDIファイルは非常に小さく、多くの電子音楽機器と互換性があります。
MP3とWMAの違いは何ですか？
- MP3は広く普及している音声圧縮形式であり、WMAは音質がより良いとされ、多くのプレイヤーと互換性がありますが、iPodでは再生できません。