HTML Multimedia Explained - Adding Video and Audio in HTML5

Imagine watching YouTube in your browser. What makes that possible? In the past, browsers needed plugins (like Flash) to play video or audio. But since HTML5, media support is built directly into the browser. All you need are two simple tags: <video> and <audio>.

The <video> Tag

The <video> tag is used to embed a video directly in the page. No extra tools, no Flash, no JavaScript - just HTML.

<video width="640" height="360" controls>
    <source src="intro-video.mp4" type="video/mp4">
    Your browser does not support video playback. Please update it.
</video>

Let us explain each part:

• width and height: the size of the video player in pixels.
• controls: shows play/pause buttons and the timeline. Without it, users cannot control the video.
• <source src="...">: sets the video file path and type.
• The last text: shows only if the browser is very old and does not support the tag.

The <audio> Tag

<audio> works the same way, but it plays audio files only - music, podcasts, voice recordings, anything.

<audio controls>
    <source src="podcast-episode-1.mp3" type="audio/mpeg">
    Your browser does not support audio playback. Please update it.
</audio>

Notice we do not add width or height for audio - there is no visual content, just the audio controls.

Why Use <source> Instead of src Directly?

You can write the file path directly as a src on the video tag:

<!-- Short method -->
<video src="movie.mp4" controls></video>

But the professional approach is using <source> because you can provide multiple formats. If the browser does not support the first one, it automatically tries the next:

<video width="640" height="360" controls>
    <!-- The browser tries the first, then the second if needed -->
    <source src="movie.webm" type="video/webm">
    <source src="movie.mp4"  type="video/mp4">
    Your browser is very old and does not support HTML5 Video.
</video>

All Important Attributes

Practical Example: A Professional Video with All Attributes

<video
    width="800"
    height="450"
    controls
    poster="thumbnail.jpg"
    muted
    loop>
    <source src="promo-video.webm" type="video/webm">
    <source src="promo-video.mp4"  type="video/mp4">
    <p>Your browser does not support HTML5 Video. <a href="promo-video.mp4">Download the video here</a></p>
</video>

This video runs muted in a loop (great for a hero background), shows a thumbnail before playback, and provides a download link if everything fails.

Supported Formats - Which File Should I Use?

Not all browsers support the same formats. This table shows what to use:

Practical recommendation: Use .mp4 for video and .mp3 for audio as your default. If you want full professionalism, add .webm as a first alternative for video.

Frequently Asked Questions - FAQ

Can I embed a YouTube video directly with <video>?

No. The <video> tag works only with files hosted on your server. To embed a YouTube video, use <iframe>, which we will learn in the next lesson.

Does autoplay always work?

No. Most modern browsers block autoplay with sound to protect users from annoying sites. The fix: add muted along with autoplay, and it will work. Users can then turn sound on manually.

Do I need to host the video on my own server?

Yes if you want to use <video>. But video files are heavy. A professional alternative is to upload the video to YouTube or Vimeo and embed it with <iframe>. This saves server bandwidth and provides better streaming quality.