Before we start, it's important to know which file formats are supported by HTML5 multimedia elements. Different web browsers support different formats, so it's a good practice to provide multiple sources for compatibility. In this step, we will learn about the most common audio and video formats supported by HTML5 and their compatibility with various web browsers.

For audio, the most common formats are:

• MP3: Supported by all major browsers, including Chrome, Firefox, Safari, and Edge.
• WAV: Supported by all major browsers, except for Internet Explorer.
• OGG: Supported by Chrome, Firefox, and Opera, but not by Safari and Edge.

For video, the most common formats are:

• MP4: Supported by all major browsers, including Chrome, Firefox, Safari, and Edge.
• WebM: Supported by Chrome, Firefox, and Opera, but not by Safari and Edge.
• OGG: Supported by Chrome, Firefox, and Opera, but not by Safari and Edge.

When embedding audio and video files in your web pages, it's essential to use supported file formats to ensure that your multimedia content can be played on various web browsers. Providing multiple sources in different formats can help improve compatibility and user experience. In the next steps, we will learn how to embed audio and video files using the HTML5 <audio> and <video> tags, and how to provide multiple sources for better compatibility.

In this step, we will embed an audio file into our web page using the <audio> tag. We will provide an MP3 file as the source. If the browser doesn't support this format, it will display the message 'Your browser does not support the audio element.'

Add the following code to your HTML file:

<audio controls> 
	<source src="https://www.123code.org/lessonfiles/audio/guitar-riff.mp3" type="audio/mpeg"> 
    Your browser does not support the audio element. 
</audio>

In this step, we will embed a video file into our web page using the <video> tag. This will create a video player with controls and a specified width and height. Add the following code the audio player code:

<video controls width="640" height="360"> 
	<source src="https://www.123code.org/lessonfiles/video/puppy.mp4" type="video/mp4"> 
    Your browser does not support the video element. 
</video>

This code provides an MP4 file as the source. If the browser doesn't support this format, it will display the message 'Your browser does not support the video element.'

In this step, you will preview your work by testing the audio and video players in the embedded playground. You will also try out different video dimensions to see how they affect the appearance of the video player.

First, add the following code to the playground:

<audio controls> 
	<source src="path/to/your/audiofile.mp3" type="audio/mpeg"> 
</audio> 
<video controls width="320" height="240"> 
    <source src="path/to/your/videofile.mp4" type="video/mp4"> 
</video>

Replace path/to/your/audiofile.mp3 and path/to/your/videofile.mp4 with the URL paths to audio and video files that you find by searching for sample audio and video files on the internet.

Congratulations! You have successfully embedded audio and video files into your web page using the HTML5 <audio> and <video> tags. Now, let's review and reflect on what you've learned.