Test your skills: Multimedia and embedding

In this task, we want you to embed a simple audio file onto the page. You need to:

• Add the path to the audio file to an appropriate attribute to embed it on the page. The audio is called audio.mp3, and it is in a folder inside the current folder called media.
• Add an attribute to make browsers display some default controls.
• Add some appropriate fallback text for browsers that don't support <audio>.

Try updating the live code below to recreate the finished example:

In this task, we want you to mark up a slightly more complex video player, with multiple sources, subtitles, and other features besides. You need to:

• Add an attribute to make browsers display some default controls.
• Add some appropriate fallback text for browsers that don't support <video>.
• Add multiple sources, containing the paths to the video files. The files are called video.mp4 and video.webm, and are in a folder inside the current folder called media.
• Let the browser know in advance what video formats the sources point to, so it can make an informed choice of which one to download ahead of time.
• Give the <video> a width and height equal to its intrinsic size (320 by 240 pixels).
• Make the video muted by default.
• Display the text tracks contained in the media folder, in a file called subtitles_en.vtt, when the video is playing. You must explicitly set the type as subtitles, and the subtitle language to English.
• Make sure the readers can identify the subtitle language when they use the default controls.

Try updating the live code below to recreate the finished example:

In this task, we want you to:

• Embed a PDF into the page. The PDF is called mypdf.pdf, and is contained in the media folder.
• Go to a sharing site like YouTube or Google Maps, and embed a video or other media item into the page.

Try updating the live code below to recreate the finished example: