確認テスト: 音声と動画

音声と動画 1

この課題では、単純な音声ファイルをページに埋め込んでいただきます。

この課題を完成させるには、次のようにしてください。

1. 音声ファイルのパスを適切な属性に追加して、ページに埋め込みましょう。音声は audio.mp3 という名前であり、https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/audio.mp3 のパスで利用できます。
2. ブラウザーにいくつかの既定のコントロールを表示させるための属性を追加しましょう。

この課題の出発点は次のようなものです。

この出発点となる基本的なコードは以下の通りです。

<h1>Basic audio embed</h1>

<audio></audio>

body {
  background-color: white;
  color: #333333;
  font:
    1em / 1.4 "Helvetica Neue",
    "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0;
}

* {
  box-sizing: border-box;
}

audio,
video {
  border: 1px solid black;
}

更新されたコンテンツは次のようになります。

<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"></audio>

音声と動画 2

この課題では、複数のソース、字幕、他にも機能を備えた、少し複雑な動画プレーヤーをマークアップしていただきます。必要なことは次の通りです。

この課題を完成させるには、次のようにしてください。

1. ブラウザーにいくつかの既定のコントロールを表示させるための属性を追加しましょう。
2. 動画ファイルへのパスを含む、複数のソースを追加しましょう。ファイルは video.mp4 と video.webm という名前で、次のパスに収められています。
   1. https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/video.mp4
   2. https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/video.webm
3. ブラウザーは、元の動画形式がどのような点であるかをあらかじめ知っておくことで、前もってダウンロードする動画形式を選択することができます。
4. <video> の幅と高さは、その内在サイズ（320 × 240 ピクセル）と同じにしましょう。
5. 動画は既定でミュート状態にしましょう。
6. 動画再生時に media フォルダー内の https://raw.githubusercontent.com/mdn/learning-area/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/subtitles_en.vtt というファイルに格納されたテキストトラックを表示するようにしましょう。入力する種類を字幕に、字幕言語を英語に明示的に設定する必要があります。
7. 読み手が既定のコントロールを使用する際に、字幕の言語を識別できるようにしましょう。

この課題の出発点は次のようなものです。

この出発点となる基本的なコードは以下の通りです。

<h1>Video embed</h1>

<video></video>

更新されたコンテンツは次のようになります。

<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" />
</video>

• 前のページ
• Overview: HTML によるコンテンツの構造化
• 次のページ