All Tracks/lab multimedia player/
Đang tải...
Hướng dẫn thử thách
1 / 1

Build a Multimedia Player

In the prior lessons, you were introduced to working with `audio` and `video` elements. In this lab, you will build out a multimedia player that will display an `audio` track and `video` with a transcript. For the `audio` element, you will need to include a `source` element which is used to specify the media being used. Here is an example: ```html <audio controls aria-label="descriptive label goes here"> <source src="url-to-audio-goes-here" type="audio/mpeg"> </audio> ``` The `source` element can also be used in the `video` element like this: ```html <video controls width="600" aria-label="descriptive label goes here"> <source src="link-to-mp4-goes-here" type="video/mp4"> <!-- Remaining code goes here --> </video> ``` **Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. **User Stories:** 1. You should have an `h1` element for the main title of the page. 2. You should have three `section` elements. 3. Inside the first `section` element, you should have an `h2` element for the title of song playing. 4. Below the `h2` element, you should have an `audio` element with `controls` attribute and an `aria-label` attribute. 5. Inside the `audio` element, you should have a `source` element with a `src` attribute pointing to an audio file and a `type` attribute. You are free to use this audio URL if you like: `https://cdn.freecodecamp.org/curriculum/js-music-player/sailing-away.mp3` 6. Inside the second `section` element, you should have an `h2` element for the title of the video playing. 7. Below the `h2` element, you should have a `video` element with `controls`, `width` attributes and an `aria-label` attribute. 8. Inside the `video` element, you should have a `source` element with a `src` attribute pointing to a video file and a `type` attribute. You are free to use this video URL if you like: `https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.mp4` 9. Below the `source` element, you should have a `track` element with a `src` attribute pointing to a subtitles file and a `kind` attribute, a `srclang` attribute and a `label` attribute. You are free to use this subtitles URL if you like: `https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.vtt` 10. Inside the third `section` element, you should have an `h2` element for the title of the section eg. "Transcript". 11. Below the `h2` element, you should have a `p` element with the transcript of the video.
Vượt qua bài kiểm tra hiện tại để mở khóa bài tiếp theo.
main.html
UTF-8 • Tab Size: 2Kiểm tra bài:⌘↵
Test Output
Thử thách này không có bài test tự động. Hãy quan sát kết quả trực tiếp ở khung Preview.