映像と音声

画像モジュールで学んだように、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> 終了タグは必須です （ただし、代替コンテンツは常にあるはずです）。

<video> または <audio> 開始タグに src 属性が含まれていない場合は、1 つ以上の <source> 要素を含めます。 それぞれにメディア ファイルへの src 属性を指定します。以下の例では、メディア ファイルのオプション、フォールバック コンテンツ、 開始タグと終了タグの間に英語とフランス語の字幕を付ける必要があります。

<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 メイン プロファイル レベル 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）にする必要があります。 ファイルは HTML ドキュメントと同じドメインに存在する必要があります。ただし、crossorigin 属性が含まれます。

トラックの kind 属性には、subtitles、captions、descriptions、chapters、その他の metadata の 5 つの列挙値があります。

会話の文字起こしと翻訳には、srclang 属性とともに subtitles を含めます。各 label 属性の値 オプションとしてユーザーに提示されます選択した VTT オプションの内容が動画上に表示されます。Pod の 字幕のスタイルは、::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>

バックグラウンド動画にはアクセスできません。背景動画を介してコンテンツを伝えるには、ユーザーにコンテンツの全機能を提供してください すべての字幕へのアクセスを制御できます。この動画は純粋に装飾的な動画であるため、ARIA ロールが含まれています。 none に設定され、フォールバック コンテンツは省略されます。 常にミュート状態の動画のパフォーマンスを向上させるには、メディアソースから音声トラックを削除してください。

動画が 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 にいくつかのプロパティが追加されました。 独自のメソッド、イベントが含まれます。他にもいくつかの Media API があります。 TextTrack API など。メディア キャプチャとストリームを使用して、 および MediaDevices API: ユーザーのマイクから音声を録音する ユーザーの画面を録画したり、Web Audio API ライブ音声や事前に録音された音声の操作や、音声のストリーミング、保存、<audio> 要素への送信を有効にします。

理解度をチェックする

音声と動画に関する知識をテストします。