映像と音声

images モジュールで学習したように、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>）をサポートしていない場合は、この内容が表示されます。2 つの間にコンテンツが存在しない場合でも、終了タグ </video> が必要です（ただし、常に代替コンテンツが必要です）。

<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 パラメータを含めることができます。コーデックを使用すると、一部のブラウザでまだサポートされていないメディアの最適化を組み込むことができます。コーデックはセミコロンでメディアタイプと区別されます。たとえば、コーデックは、WebM ファイルに VP8 動画と vorbis 音声が含まれていることを示す <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis"> などの直感的な構文で記述できます。また、MP4 エンコードが Advanced Video Coding Main Profile レベル 4.2 であることを示す <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a"> のように、コーデックの解読が難しくなることもあります。この構文の説明はこのレッスンの範囲外です詳しくは、Jake Archibald さんが AV1 動画のコーデック パラメータを決定する方法についての記事を投稿しています。

動画を表示する際、デフォルトでは、動画の最初のフレームが利用可能になると静止画として表示されます。これは制御できる項目です。poster 属性を使用すると、動画のダウンロード中と再生が完了するまで画像のソースを表示できます。動画が再生された後で一時停止しても、ポスターは再表示されません。

動画の読み込み時に、ポスターと動画のサイズの違いによりリフローと再ペイントが発生するため、動画のアスペクト比を定義するようにしてください。

常にbooleanの 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 属性には 5 つの列挙値（subtitles、captions、descriptions、chapters、その他の metadata）があります。

会話の音声文字変換と翻訳のために subtitles を srclang 属性とともに指定します。各 label 属性の値は、オプションとしてユーザーに表示されます。選択した VTT オプションの内容が動画の上に表示されます。::cue/ ::cue() をターゲットに設定することで、字幕の外観のスタイルを設定できます。

値 kind="caption" は、効果音やその他の関連する音声情報を含む音声文字変換と翻訳のために予約する必要があります。これは聴覚障がいのある視聴者だけを対象とするものではありません。ヘッドフォンが見つからずに字幕をオンにした可能性があります。あるいは、お気に入りのポッドキャストの最後のいくつかの話題をキャッチできていなかったので、文字起こしを読んで理解度をチェックしたいかもしれません。オーディオ コンテンツと動画コンテンツに別の方法でアクセスできることは、重要かつ便利です。

kind="description" は、動画を表示できないユーザー、Google Home や Alexa などの画面のないシステムを使用している場合や目の見えないユーザーを対象に、動画内のビジュアル コンテンツをテキストで説明するためのものです。

WebVTT 形式で字幕を追加すると、聴覚障がいのあるユーザーが動画を利用できるようになります。障がいとは、人と現在の環境との不一致のことです。聴覚障がいの原因としては、ユーザーが騒がしい環境にいる、スピーカーやヘッドフォンが故障している、ユーザーがなんらかの難聴を持っている、聴覚障がいがある、などが考えられます。コンテンツへのアクセス性を確保することは、考えているよりも多くの人々の役に立つこと、そしてあらゆる人のためになります。

背景動画に関する考慮事項

マーケティング チームやデザイン チームは、サイトに背景動画を含めたい場合があるかもしれません。一般的には、ミュートされて自動再生され、コントロールのないループ再生の動画が必要です。HTML は次のようになります。

<video 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 を使用してカスタム メディア コントロールを追加し、control 属性を削除します。たとえば、音声ファイルの再生状態を切り替える <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 と Streams API と MediaDevices API を使用して、ユーザーのマイクから音声を録音したり、ユーザーの画面を録音したりできます。Web Audio API を使用すると、ライブ録音と事前録音の音声、ストリーミングの操作、保存、<audio> 要素への音声の送信を行うことができます。

理解度チェック

音声と動画の知識をテストします。