In HTML tags we have commonly used <audio> and <video> tags. We have other tags also like iframe where we can embed the link from the other website for the audio or video.
So the <audio> tag is used to embed sound in the web page. It has an src attribute which is used to pass the file path of it.
In <video> tag is used to embed a media player on the web page. It also uses src attribute.
Depending on the requirement we show audio and video controls - to control the audio or video by pausing, resuming volume controls, etc, muted - to keep mute when the page loads or autoplay - it will start playing the audio/video when the page loads as shown in the below example. There are some other attributes also but these are the most commonly used
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio and video</title>
</head>
<body>
<!-- audio -->
<figure>
<figcaption>Listen to the Pasoori</figcaption>
<audio src="./Pasoori.mp3" controls autoplay muted>Music Time</audio>
<br>
<br>
<!-- video -->
<p>Let's watch scenery </p>
<video src="./video.mp4" controls muted>Hey Video for FSJS 2.0</video>
<br>
<!-- Semantic -->
<nav></nav>
<header></header>
<footer></footer>
<!-- to keep in seperate section -->
<section aria-label="HEROSECTION"></section>
<section aria-label="MAINSECTION"></section>
</body>
</html>
Above we have used the <figcaption> tag which is enclosed in <figure> tag to give an optional caption to the content.
Output
