What Are the Roles of the HTML Audio and Video Elements, and How Do They Work?

The HTML <audio> and <video> elements allow you to embed sound and video content directly into your web pages without requiring external plugins.

<audio>: Used to embed sound content, such as music, podcasts, or sound effects.
<video>: Used to embed video content, such as movies, tutorials, or background animations.

Both elements are “media” elements that provide native browser support for playing and controlling these media files.

You can define the source of the media in two primary ways:

Using the src attribute: You can add a src attribute directly to the tag, pointing to the location of your media file.
- Example: <audio src="music.mp3"></audio>
Using <source> elements: You can nest one or more <source> elements inside the tag. This is useful for providing multiple file formats; the browser will automatically select and play the first format it supports.
```
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>
```

Attributes are used to customize how the media behaves:

controls: Adds the browser’s default playback controls (play, pause, volume, seek bar).
autoplay: Makes the media start playing automatically as soon as it can. Note: Most browsers block audio from autoplaying unless muted.
loop: Makes the media restart from the beginning automatically once it finishes.
muted: Starts the media with the volume set to zero. This is often required for autoplay to work.
poster (Video only): Specifies an image file that will be displayed while the video is downloading or until the user hits the play button.

Fallback Content: Text content placed between the tags will only be displayed in browsers that do not support the media elements.
Browser Compatibility: Because different browsers support different file formats, it is best practice to provide multiple <source> tags.