Anushka Bommakanty's Blog

HTML Audio and Video

HTML Audio and Video

Let's listen to some music and watch something.

Anushka Bommakanty's photo
Anushka Bommakanty
·

2 min read

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

iwritecode@hiteshchoudharylco@anuragtiwarimeHTML5