スキルテスト: 音声と動画
このスキルテストの目的は、あなたが HTML での動画と音声コンテンツの埋め込みを行う方法を理解しているかどうかを評価することです。
メモ: 手助けが必要な場合は、スキルテスト使用ガイドをお読みください。また、コミュニケーションチャネルのいずれかを使用して、私たちに連絡することもできます。
課題 1
この課題では、単純な音声ファイルをページに埋め込んでいただきます。必要なことは次の通りです。
この課題を完成させるには、次のようにしてください。
- 音声ファイルのパスを適切な属性に追加して、ページに埋め込みましょう。音声は
audio.mp3という名前で、カレントフォルダー内のmediaというフォルダーの中に入っています。 - ブラウザーにいくつかの既定のコントロールを表示させるための属性を追加しましょう。
<audio>に対応していないブラウザーのために、適切な代替テキストを追加しましょう。
html
<h1>Basic audio embed</h1>
<audio></audio>
ここをクリックすると、模範解答を表示します。
完了した HTML は、次のようになるはずです。
html
<h1>Basic audio embed</h1>
<audio
controls
src="https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/audio.mp3">
<p>
Your browser doesn't support HTML audio.
<a
href="https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/audio.mp3"
>Download the track here</a
>
instead.
</p>
</audio>
課題 2
この課題では、複数のソース、字幕、他にも機能を備えた、少し複雑な動画プレーヤーをマークアップしていただきます。必要なことは次の通りです。
この課題を完成させるには、次のようにしてください。
- ブラウザーにいくつかの既定のコントロールを表示させるための属性を追加しましょう。
<video>に対応していないブラウザーのために、適切な代替テキストを追加しましょう。- 動画ファイルへのパスを含む、複数のソースを追加しましょう。ファイルは
video.mp4とvideo.webmという名前で、次のパスに収められています。https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/video.mp4https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/video.webm
- ブラウザーは、元の動画形式がどのような点であるかをあらかじめ知っておくことで、前もってダウンロードする動画形式を選択することができます。
<video>の幅と高さは、その内在サイズ（320 × 240 ピクセル）と同じにしましょう。- 動画は既定でミュート状態にしましょう。
- 動画再生時に
mediaフォルダー内のhttps://raw.githubusercontent.com/mdn/learning-area/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/subtitles_en.vttというファイルに格納されたテキストトラックを表示するようにしましょう。入力する種類を字幕に、字幕言語を英語に明示的に設定する必要があります。 - 読み手が既定のコントロールを使用する際に、字幕の言語を識別できるようにしましょう。
html
<h1>Video embed</h1>
<video></video>
ここをクリックすると、模範解答を表示します。
完了した HTML は、次のようになるはずです。
html
<h1>Video embed</h1>
<video controls width="320" height="240" muted>
<source
src="https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/video.mp4"
type="video/mp4" />
<source
src="https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/video.webm"
type="video/webm" />
<track
kind="subtitles"
src="https://raw.githubusercontent.com/mdn/learning-area/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/subtitles_en.vtt"
srclang="en"
label="English" />
<p>
Your browser doesn't support HTML video.
<a
href="https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/video.mp4">
Download the track here
</a>
instead.
</p>
</video>