Home Tutorials Videos Q&A MCQ Shortcuts Exercises Appointment Login
Lesson 22 of 22 – HTML Audio & Video
100%

HTML Audio and Video

HTML provides built-in elements to play audio and video directly inside a web page without using external plugins. The <audio> and <video> elements are supported by all modern web browsers.

Note: HTML5 introduced the <audio> and <video> elements to easily embed multimedia on web pages.
What is HTML Audio?
  • HTML Audio is used to play sound files.
  • No external plugin is required.
  • Supports music, voice recordings and sound effects.
  • Works in all modern browsers.
  • Supports multiple audio formats.
The HTML Audio Element

The <audio> element is used to add audio files to a webpage. 

<audio controls>

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

Your browser does not
support the audio tag.

</audio>

The controls attribute displays Play, Pause, Volume and Download controls.

Audio Example 
<audio controls>

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

</audio>

Output:

Audio Attributes
Attribute Description
controls Displays audio controls.
autoplay Starts audio automatically.
loop Repeats the audio continuously.
muted Starts audio in muted mode.
preload Loads the audio before playing.
Autoplay, Loop and Muted 
<audio controls
autoplay
loop
muted>

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

</audio>

This example automatically starts the audio, keeps repeating it and starts in muted mode.

Supported Audio Formats
Format MIME Type Browser Support
MP3 audio/mpeg ✅ All Modern Browsers
WAV audio/wav ✅ Most Browsers
OGG audio/ogg ✅ Chrome, Firefox, Edge
What is HTML Video?
  • HTML Video is used to display videos on web pages.
  • No external plugin is required.
  • Supports movies, tutorials and presentations.
  • Works on desktops, tablets and mobile devices.
  • Supports multiple video formats.
The HTML Video Element

The <video> element is used to display videos. 

<video width="400"
controls>

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

Your browser does not
support the video tag.

</video>
Video Example 
<video
width="400"
controls>

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

</video>

Output:

Video Attributes
Attribute Description
controls Displays video controls.
autoplay Starts the video automatically.
loop Repeats the video.
muted Starts the video without sound.
poster Displays an image before the video starts.
width Sets the video width.
height Sets the video height.
Multiple Video Sources

You can provide multiple video formats so the browser can choose the supported one. 

<video controls>

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

<source
src="movie.ogg"
type="video/ogg">

Your browser does not
support HTML video.

</video>
Poster Attribute Example 
<video
width="500"
controls
poster="poster.jpg">

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

</video>

The poster attribute displays an image before the user plays the video.

Embedding a YouTube Video

You can embed a YouTube video using the <iframe> element. 

<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
allowfullscreen>
</iframe>
Supported Video Formats
Format MIME Type Browser Support
MP4 video/mp4 ✅ All Modern Browsers
WebM video/webm ✅ Chrome, Firefox, Edge
Ogg video/ogg ✅ Firefox, Opera
Audio vs Video
Audio Video
Plays only sound. Plays sound and visuals.
Uses <audio> tag. Uses <video> tag.
Smaller file size. Larger file size.
Suitable for music and podcasts. Suitable for tutorials, movies and presentations.
Best Practices
  • Use MP3 for audio whenever possible.
  • Use MP4 (H.264) for maximum video compatibility.
  • Always include the controls attribute.
  • Provide multiple source formats if possible.
  • Compress large media files to improve loading speed.
  • Use the poster attribute for videos.
  • Avoid autoplay unless it is necessary.
  • Add fallback text for unsupported browsers.
Key Points
  • HTML5 introduced the <audio> and <video> elements.
  • No plugins are required.
  • Audio supports MP3, WAV and OGG formats.
  • Video supports MP4, WebM and OGG formats.
  • The controls attribute displays playback controls.
  • The autoplay attribute starts media automatically.
  • The loop attribute repeats playback.
  • The muted attribute starts media without sound.
  • The poster attribute displays an image before playing a video.
  • YouTube videos can be embedded using an <iframe>.

🧠 Quiz

Which HTML element is used to display a video?



← Previous Course Completed 🎉