技能测试：音频和视频

任务 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 x 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>

• 上一页
• 概述：使用 HTML 构造内容
• 下一页