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
<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.