How to use the <video> and <audio> tags in HTML: a complete guide with practical examples

Incorporating multimedia content is no longer optional: users expect to see classes, demos, podcasts, and audio clips directly on the web without external players. That's where the <video> and <audio> tags come in.

Both tags are part of the HTML5 standard and allow video and audio files to be played without relying on Flash or additional plugins. They are lightweight, compatible, and very easy to integrate. In my case, I use <video> to show my courses inside an academy app and <audio> for some podcasts that I complement with the classes.

Previously you learned how to use the HTML datalist tag

What are video and audio used for?

They are used to natively embed multimedia content in any modern browser.
You don't need extra libraries, just configure them correctly.

Real advantages of using native players

• They don't require third parties (YouTube, Vimeo, Spotify...).
• You have complete control over the experience.
• You can customize attributes, styles, and functionality.
• Better performance in apps and private panels.

The <video> and <audio> tags in HTML are tags that allow multimedia content to be displayed on our website through videos and audios of different formats:

• MP4
• WebM
• Ogg
• MP3
• Ogg
• Wav

The latter is what really makes them special, and this is because each browser supports some of the listed formats.

One of the great features that HTML5 brings is the inclusion of multimedia content such as audio and video.

First we will talk about the <video> tag; as we will see in this entry, both tags (<video> and <audio>) have similar behaviors, definitions, and attributes, which is why a single entry is written for both tags.

1.0 The video tag: syntax, attributes, and examples

To be able to use the <video> tag, it must be accompanied by some attributes and other child tags as we will see below.

<video src="clase1.mp4" controls></video>

1.1 Attributes for loading a video

The width and height attributes are used to specify the width and height we want the video to have.

We can also specify the controls attribute to indicate that it should display controls such as pause, play, volume...:

And the src attribute to indicate the source URL (video).

<video width="320" height="240" controls> 
<source src="video.mp4" type="video/mp4"> 
<source src="video.ogg" type="video/ogg"> 
Your browser does not support the video tag. 
</video>

In the HTML code above we specify the same video in two different formats so that it can be viewed in browsers with MP4 and OGG video support; it is also specified that the video's viewing space will be 320x240 pixels and that it should present controls.

The ideal is to add the greatest number of formats to guarantee playback in browsers.

In the case of an old browser like Internet Explorer 8, the following message would be displayed:

"Your browser does not support the video tag."

In the following link you will see a table with the video formats supported by browser: HTML <video> Tag.

Essential attributes:

• controls → displays the player controls.
• autoplay → automatically plays (often requires muted).
• muted → starts without sound.
• loop → repeats the video when finished.
• poster → preview image of the video.
• preload → can be none, metadata, or auto.
• width/height → player size.

1.2 Other attributes of the video tag

You can see the rest of the attributes in the following link: HTML <video> Tag.

1.3 Multiple sources with source and compatibility

You can define different formats for a video:

<video controls poster="portada-curso.jpg"> 
<source src="clase1.mp4" type="video/mp4"> 
<source src="clase1.webm" type="video/webm"> 
Your browser does not support the video element. 
</video>

This ensures that if one format doesn't work, the other one will.

1.4 Best practices

• Video size was a critical factor. If the file is too large, the experience worsens on mobile.
• The preload="metadata" attribute is ideal: it allows duration and poster to be displayed without loading the entire file.
• You can define a custom poster to make the videos look much more professional.

2.0 The audio tag

Now that the functionality of the previous element is understood, let's move on to the <audio> tag, which has similar specifications to the <video> tag (apart from loading audio instead of video); it also has multiple audio supports depending on the browser, which you can see in the following link: HTML Tag

<audio src="episodio1.mp3" controls></audio>

The <audio> tag also has the same attributes seen previously and at least one audio must be specified:

<audio controls> 
<source src="audio.ogg" type="audio/ogg"> 
<source src="audio.mp3" type="audio/mpeg"> 
Your browser does not support the audio tag. 
</audio>

2.1 Key attributes

• controls
• loop
• autoplay
• preload (very important in podcasts)
• Recommended formats for podcasts
• MP3 → maximum support.
• OGG → good compression, wide support.
• WAV → very high quality, but heavy files (not recommended for production).

preload="none" is the best option: the app loads quickly and the user only downloads the audio when they actually want to listen to it.

2.2 Optimization for mobile apps and fast loading

• Maintain moderate bitrates (96–128 kbps) for podcasts.
• Avoid WAV files.
• Control sizes; a 40 MB episode can ruin the experience.
• Use accessible titles and descriptions for screen readers.

2.3 Subtitles, transcripts, and accessibility

How to use <track> for subtitles

<video controls> 
<source src="clase1.mp4" type="video/mp4"> 
<track src="subtítulos.vtt" kind="subtitles" srclang="es" label="Spanish"> 
</video>

Subtitles can be vital depending on the content and it is always a good idea to define them.

2.4 Accessibility recommendations for audio and video

• Include transcripts.
• Use correct colors and contrasts if you customize controls.
• Do not force autoplay without muted.

2.5 Performance and compatibility tips

• How to choose the right format
  • MP4 (H.264) → most compatible for video.
  • WebM (VP8/VP9) → excellent on Chrome/Android.
  • Ogg → free alternative.
  • MP3 → absolute standard for audio.
• Fallback for old browsers
  • Always leave internal text inside <video> or <audio>.
    Old browsers will display that message.
• Hosting, file sizes, and mobile loading
  • Optimize videos with HandBrake or FFmpeg.
  • Keep videos between 720p and 1080p depending on the course type.
  • Avoid uploading files larger than 200–300 MB.
  • Use CDNs when possible.

Complete examples ready to copy

Optimized video example

<video controls preload="metadata" poster="clase-intro.jpg" width="800"> 
<source src="clase-intro.mp4" type="video/mp4"> 
<source src="clase-intro.webm" type="video/webm"> 
Your browser cannot play this video. 
</video>

Podcast player example

<audio controls preload="none"> 
<source src="podcast-episodio1.mp3" type="audio/mpeg"> 
Your browser cannot play this audio. 
</audio>

Applying Media Queries in Videos with HTML5

Heavy resources like videos lead us toward one of the biggest messes we can encounter when optimizing our website size.

On one hand, we have increasingly larger monitors with high resolutions to play anything, and on the other hand, we want our site to load as quickly as possible so the user can have a good experience with our web (at least regarding the site loading itself); these two scenarios seem impossible to coexist, but we can achieve a middle ground between the two with the help of Media Queries.

CSS Media Queries in HTML for Videos

Hand in hand with the Media Queries that we apply in CSS to adapt sections of our website for different screen sizes come the Media Queries applicable through the media attribute in the source of our videos to load videos according to the specifications of each device:

<video controls> <source src="video-1024.mp4" media="(min-device-width: 1200px)"> <source src="video-640.mp4"> </video>

As we can see, the same syntax as in CSS is applied; in this way, we can specify that for devices with higher resolution we load higher resolution (larger) videos, and instead for lower resolution devices, we specify lower resolution (smaller) videos.

Let's review the available operators we have to use in this attribute:

Media Query Operators

Remembering that we can specify different videos depending on the device the user is using; among the main ones we have:

Media Query Devices

Additionally, we can apply some values; among the most used we have:

Media Query Values

You can see the full documentation at the following link: HTML media Attribute.

Responsive Videos on Screens

Now we bring you a solution so that when inserting videos into our blog or website they look correctly; when we want to insert a video, for example from YouTube:

<iframe width="560" height="315" src="https://www.youtube.com/embed/KfcI5pNJEbM?autoplay=1" frameborder="0" allow="autoplay"></iframe>

We have a tag like the one shown above; an iframe in short with fixed measurements, which brings us several problems, since with these measurements our video does not adapt to the size of our website and our website goes one way and the video goes another, and therefore, our video is distorted on some screens.

Responsive Design on our Website: Adapt Images and Videos

In this section, as we talk about the structure of a Responsive site, which consists of our images and videos looking correctly on any screen; for that, in many cases, we need to apply media_queries and also use percentages on these key resources on our website.

Adapting Images to Screens

Now let's see how to adapt images on our web page; we have several factors that we can take into account for this purpose as we will see in the following classification.

Image width equal to the web width: This is the simplest configuration we can establish; we are indicating that the maximum size of our image will correspond to that of its parent element, which would be the web; for that, we must indicate the following rule in CSS:

img { width:100%; }

With this configuration, we can extend our image progressively according to what the container occupies up to a limit; this is a small trick, where we establish the maximum size our image will have, in this way we can avoid undesirable behaviors like when the maximum size of our image is exceeded, for example 500px as we see below:

img { width:100%; max-width:500px; }

As we can see with simple rules we can adapt our images to be responsive with the rest of the HTML body of our web page; we can apply these images as backgrounds, where practically we wouldn't have any other parent container behind them, or we can apply them in some key section of our content, such as the container in Bootstrap to adjust images to our container and thus make them self-adjusting.

Also remember that if what you want is to adjust an image both in height and width of a container and that it does not distort, remember there is the object-fit property as we showed in a previous post; an interesting way that when you expand your image you can cover the entire parent container, that is, the container that holds it.

Frequently Asked Questions (FAQ)

• What video format is most compatible?
  • MP4 with H.264 is the current standard.
• Which attribute prevents the browser from downloading the entire audio too early?
  • preload="none".
• Can I put subtitles in HTML without external platforms?
  • Yes, using <track> with .vtt files.
• How do I make the video show a preview image?
  • With the poster attribute.

Conclusion

The <video> and <audio> tags are two of the most powerful elements in HTML5. They allow you to create complete, fast, and accessible multimedia experiences without external dependencies. And if you also integrate them into environments such as a course app or a podcast system, you will see that with a few configurations you can greatly improve your users' experience.

Now learn how to use the tag abbreviation with the <base> and <abbr> tags