画像モジュールで学習したように、HTML を使用すると、メディアをウェブページに埋め込むことができます。このセクションでは、音声ファイルと動画ファイルについて説明します。埋め込み方法、ユーザー コントロール、動画の静止画像プレースホルダの提供、音声ファイルと動画ファイルへのアクセシビリティの確保など、ベスト プラクティスについて説明します。
<audio>、<video>
<video> 要素と <audio> 要素は、src 属性でメディア プレーヤーを直接埋め込むために使用することも、一連の <source> 要素のコンテナ要素として使用することもできます。各要素は src ファイルの提案を提供します。<video> を使用して音声ファイルを埋め込むこともできますが、音声ファイルを埋め込むには <audio> 要素を使用することをおすすめします。
開始タグ <video> と <audio> には、controls、autoplay、loop、mute、preload、グローバル属性など、他の属性を複数含めることができます。<video> 要素は、height、width、poster 属性もサポートしています。
<video src="videos/machines.webm" poster="images/machine.jpg" controls>
<p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>
この <video> の例では、src 属性が動画ソースにリンクされている単一のソースがあります。poster 属性は、動画の読み込み中に表示する画像を提供します。最後に、controls 属性はユーザーの動画コントロールを提供します。
代替コンテンツは、開始タグと終了タグの間に含まれます。ユーザー エージェントが <video> をサポートしていない場合（または <audio>）、このコンテンツが表示されます。終了 </video> タグは必須です。2 つのタグの間にコンテンツがない場合でも必要です（ただし、常にフォールバック コンテンツがあるはずです）。
開始 <video> タグまたは <audio> タグに src 属性が含まれていない場合は、1 つ以上の <source> 要素を含めます。各要素には、メディア ファイルへの src 属性があります。次の例では、開始タグと終了タグの間に、3 つのメディア ファイル オプション、フォールバック コンテンツ、英語とフランス語の字幕が含まれています。
<video controls poster="images/machine.jpg">
<source src="videos/machines.webm" type="video/webm">
<source src="videos/machines.mp4" type="video/mp4">
<source src="videos/machines.ogv" type="video/ogg">
<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Francais" kind="subtitles" srclang="fr" src="vtt/subtitles-fr.vtt" />
<p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>
各 <source> 子には、リソースを指す src 属性が含まれています。また、type 属性は、リンクされたファイルのメディアタイプをブラウザに通知します。これにより、ブラウザがデコードできないメディア ファイルを取得することを防ぎます。
type 属性内には、リソースのエンコード方法を正確に指定する codecs パラメータを含めることができます。コーデックを使用すると、メディアの最適化をプログレッシブ エンハンスメント（すべてのブラウザでサポートされているわけではない要素）として含めることができます。コーデックは、メディアタイプとセミコロンで区切られます。たとえば、コーデックは <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis"> などの直感的な構文を使用して記述できます。これは、WebM ファイルに VP8 動画と vorbis 音声が含まれていることを示します。
コーデックは、<source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a"> のように解読が難しい場合もあります。これは、MP4 エンコードが Advanced Video Coding Main Profile Level 4.2 であることを示しています。この構文の説明は、このレッスンの範囲をはるかに超えています。詳しくは、Jake Archibald の投稿「AV1 動画のコーデック パラメータを決定する方法」をご覧ください。
動画を表示する際、デフォルトでは、動画の最初のフレームが静止画として表示されます。これは制御可能なものです。poster 属性を使用すると、動画のダウンロード中から再生されるまでの間、画像のソースを表示できます。動画が再生されてから一時停止された場合、ポスターは再表示されません。
動画のアスペクト比を必ず定義してください。動画の読み込み時に、ポスターと動画のサイズが異なると、リフローと再描画が発生します。
常に ブール値の controls 属性を含めます。これにより、ユーザー コントロールが表示され、ユーザーは音量レベルの調整、音声の完全なミュート、動画の全画面表示を行うことができます。controls を省略すると、特にブール値の autoplay 属性が含まれている場合に、ユーザー エクスペリエンスが低下します。メディア ファイルの自動再生は、ミュートされていてコントロールが表示されている場合でも、一般的にユーザー エクスペリエンスを損なうため、ブール値の muted 属性が省略されている場合、一部のブラウザは autoplay 属性ディレクティブを無視します。
トラック
音声と動画の両方の開始タグと必須の終了タグの間に、1 つ以上の <track> 要素を含めて、タイミング付きテキスト トラックを指定します。次の例には 2 つの <track> ファイルが含まれており、英語とフランス語の両方で字幕のタイミング テキストを提供しています。
<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Français" kind="subtitles" srclang="fr" lang="fr-fr" src="vtt/subtitles-fr.vtt" />
src 属性で指定されたトラック ファイルは、WebVTT 形式（.vtt）である必要があります。crossorigin 属性が含まれていない限り、ファイルは HTML ドキュメントと同じドメインに配置する必要があります。
トラックの kind 属性には、subtitles、captions、descriptions、chapters、その他の metadata の 5 つの列挙値があります。
ダイアログの文字起こしと翻訳に srclang 属性とともに subtitles を含めます。各 label 属性の値は、ユーザーにオプションとして表示されます。選択した VTT オプションの内容が動画の上に表示されます。字幕の外観は、::cue/ ::cue() をターゲットにしてスタイルを設定できます。
値 kind="caption" は、効果音やその他の関連する音声情報を含む文字起こしや翻訳のために予約されています。これは聴覚障がいのある視聴者だけを対象としたものではありません。ヘッドフォンが見つからないため、字幕をオンにした可能性があります。また、お気に入りのポッドキャストの最後の数個のポイントを聞き逃してしまったため、文字起こしを読んで理解を確認したい場合もあります。音声コンテンツや動画コンテンツにアクセスする代替手段があることは、重要かつ便利です。
kind="description" は、Google Home や Alexa などの画面のないシステムを使用しているユーザーや、目の不自由なユーザーなど、動画を視聴できないユーザー向けに、動画の視覚的なコンテンツのテキストによる説明を提供するためのものです。
WebVTT 形式で字幕を提供することで、聴覚障がいのある方が動画を利用できるようになります。聴覚障がいの原因としては、騒がしい環境にいる、スピーカーに欠陥がある、ヘッドフォンが壊れている、聴覚障がいがある、聴覚障がい者であるなどが考えられます。コンテンツのアクセシビリティを確保することは、多くの人にとって役立ちます。
背景動画に関する考慮事項
マーケティング チームやデザイン チームは、サイトに背景動画を含めることを希望する場合があります。一般的に、これは、コントロールのないミュートされた自動再生のループ動画を求めていることを意味します。HTML は次のようになります。
<video playsinline autoplay loop muted poster="images/machine.jpg" role="none">
<source src="videos/machines.webm" type="video/webm">
<source src="videos/machines.mp4" type="video/mp4">
<source src="videos/machines.ogv" type="video/ogg">
</video>
背景動画にアクセスできません。ユーザーが再生を完全に制御でき、すべての字幕にアクセスできない状態で、背景動画を通じてコンテンツを伝達することはできません。この動画は装飾のみを目的としているため、none の ARIA ロールが含まれており、フォールバック コンテンツは省略されています。常にミュートされる動画のパフォーマンスを改善するには、メディアソースから音声トラックを削除します。
動画の再生時間が 5 秒以下の場合は、ユーザー補助のガイドラインで一時停止メカニズムが義務付けられていませんが、ブール値の loop 属性を持つものはデフォルトで無限にループするため、この 5 秒の制限時間やその他の制限時間を超えてしまいます。ユーザー エクスペリエンスを向上させるため、動画を一時停止する方法を必ず含めてください。これは、controls を含めることで簡単に実現できます。
カスタム メディア コントロール
ブラウザの組み込みコントロールではなく、カスタムの動画または音声コントロールを表示するには、controls 属性を含めます。次に、JavaScript を使用してカスタム メディア コントロールを追加し、controls 属性を削除します。たとえば、音声ファイルの再生状態を切り替える <button> を追加できます。
<button id="playPause" aria-controls="idOfAudio"
data-pause-text="Pause audio"
data-play-text="Play audio">Pause audio</button>
この例には、訪問者が再生状態と一時停止状態を切り替えるたびに更新されるテキストを含む dataset 属性を持つボタンが含まれています。aria-controls 属性は、ボタンで制御される要素（この場合は音声）の id とともに含まれます。オーディオを制御する各ボタンにはイベント ハンドラがあります。
カスタマイズされたコントロールを作成するには、HTMLMediaElement.play() と HTMLMediaElement.pause() を使用します。再生状態を切り替えるときに、ボタンのテキストも切り替えます。
const pauseButton = document.getElementById('playPause');
pauseButton.addEventListener("click", pauseAndPlay, false);
function pauseAndPlay() {
console.log(this);
const media = document.getElementById(this.getAttribute('aria-controls'));
if (media.paused) {
media.play();
this.innerText = this.dataset.pauseText;
} else {
media.pause();
this.innerText = this.dataset.playText;
}
}
controls 属性を含めることで、JavaScript が失敗した場合でも、ユーザーが音声（または動画）を制御できるようになります。置換ボタンがインスタンス化されたら、controls 属性を削除します。
document.querySelector('[aria-controls]').removeAttribute('controls');
ユーザーがコントロールにアクセスできない場合（サイト コンテンツの背後にコントロールが隠れている背景動画など）は、常に外部コントロールを含めてください。メディアのユーザー補助機能の要件の基本を理解することは、聴覚障害や視覚障害のある何百万人もの人々を含め、環境や感覚に関するさまざまなニーズを持つユーザーに対応するうえで重要です。HTMLMediaElement について簡単に説明しました。これは、HTMLVideoElement と HTMLAudioElement の両方に継承されるいくつかのプロパティ、メソッド、イベントを提供します。HTMLMediaElement は、独自のプロパティ、メソッド、イベントをいくつか追加します。TextTrack API を含む、他の Media API がいくつかあります。Media Capture and Streams API と MediaDevices API を使用して、ユーザーのマイクから音声を録音したり、ユーザーの画面を録画したりできます。Web Audio API を使用すると、ライブ音声や録音済み音声の操作、ストリーミング、保存、<audio> 要素への送信が可能になります。
理解度を確認する
音声と動画に関する知識をテストします。
<track> 要素の用途
poster 属性は何を制御しますか？