HTML Audio and Video

By /

Websites can contain more than just text and images. You can also add audio and videos to a webpage. HTML gives us simple tags for this:

  • <audio> for sound
  • <video> for videos

Let’s see how they work in this HTML Audio and Video tutorial.

Adding Audio to a Webpage

The <audio> element is used to add an audio file. Here is a simple example:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Audio</title>
</head>
<body>

    <h1>My Audio</h1>

    <audio controls>
        <source src="music.mp3" type="audio/mpeg">
    </audio>

</body>
</html>

Output

My Audio

[▶ ━━━━━━━━━ 🔊]

The browser shows audio controls such as play, pause, volume, and progress. Make sure music.mp3 is in the same folder as your HTML file.

Understanding the Code

<audio controls>

<audio> adds an audio player and controls tells the browser to show the audio controls.

Then:

<source src="music.mp3" type="audio/mpeg">
  • src tells the browser where the audio file is.
  • type tells the browser what kind of audio file it is.

Adding Video to a Webpage

The <video> element is used to add a video.

<!DOCTYPE html>
<html>
<head>
    <title>HTML Video</title>
</head>
<body>

    <h1>My Video</h1>

    <video width="500" controls>
        <source src="video.mp4" type="video/mp4">
    </video>

</body>
</html>

Output

My Video

[▶ ━━━━━━━━━━━━━ 🔊 ⛶]

The video player appears on the webpage. Again, video.mp4 should be available at the location given in src.

Adding width and height

You can set the size of a video using width and height.

<!DOCTYPE html>
<html>
<head>
    <title>Video Size</title>
</head>
<body>

    <h1>My Video</h1>

    <video width="400" height="250" controls>
        <source src="video.mp4" type="video/mp4">
    </video>

</body>
</html>

Output

My Video

[Video player displayed at about 400 × 250 pixels]

Autoplay, Loop and Muted

HTML also provides a few useful attributes for media.

autoplay

Starts the media automatically.

<audio controls autoplay>

loop

Starts the media again when it finishes.

<video controls loop>

muted

Starts the media without sound.

<video controls autoplay muted>

These attributes can also be used together.

<!DOCTYPE html>
<html>
<head>
    <title>Video Attributes</title>
</head>
<body>

    <h1>My Video</h1>

    <video width="400" controls autoplay muted loop>
        <source src="video.mp4" type="video/mp4">
    </video>

</body>
</html>

Output

My Video

[Video player]

The video is set to:

  • start automatically
  • play without sound
  • repeat after finishing

Keep in mind that browsers may restrict autoplay, especially when sound is enabled.

Audio and Video Files

Your files can be kept in the same folder as the HTML file:

my-website/
│
├── index.html
├── music.mp3
└── video.mp4

Then you can use:

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
</audio>

and:

<video controls>
    <source src="video.mp4" type="video/mp4">
</video>

If your files are inside another folder, the path in src needs to match that location.

Quick Recap

  • <audio> adds audio to a webpage.
  • <video> adds video to a webpage.
  • controls gives the user playback controls.
  • src tells HTML where the media file is located.
  • autoplay, loop, and muted control how media behaves.
  • The media file must be available at the path used in src.

Frequently Asked Questions (FAQs)

Q1. What is the HTML audio tag?

The HTML <audio> tag is used to add an audio file or sound player to a webpage.

Q2. What is the HTML video tag?

The HTML <video> tag is used to add a video file to a webpage.

Q3. How do you add audio in HTML?

You can use the <audio> element with the controls attribute and a <source> element containing the audio file.

Q4. How do you add video in HTML?

You can use the <video> element with controls and provide the video file using the <source> element.

Q5. What does the controls attribute do in HTML audio and video?

The controls attribute displays playback controls such as play, pause, volume, and the progress bar.

Q6. Where should audio and video files be stored for HTML?

They can be stored in the same folder as your HTML file or in another folder, as long as the path in the src attribute correctly points to the media file.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top