HTML Media

HTML media allows you to add audio, video, and other multimedia content to web pages. Instead of displaying only text and images, you can make your website more interactive by including music, tutorials, presentations, and video demonstrations.

HTML provides built-in elements such as <audio> and <video> to display media directly in a browser without requiring additional plugins.

What Is HTML Media?

HTML media refers to audio, video, and other multimedia content embedded in a web page. It helps website owners present information in different formats, making content easier to understand and more engaging.

For example, an educational website can use audio to explain a topic, while a video tutorial can demonstrate how to write HTML code.

HTML supports several ways to add media, including:

Audio files using the <audio> element
Video files using the <video> element
Subtitles and captions using the <track> element
External videos embedded from platforms such as YouTube
Other embedded content using elements such as <iframe>

Adding Audio to an HTML Page

The <audio> element allows you to play sound files directly on a web page. You can use it for music, voice recordings, podcasts, and spoken tutorials.

Here is a simple example:

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

The controls attribute displays playback controls, allowing visitors to play, pause, and adjust the volume.

Learn more in our HTML Audio tutorial.

Adding Video to an HTML Page

The <video> element lets you display video files on a website. It is useful for tutorials, product demonstrations, educational lessons, and promotional content.

Example:

<video width="500" controls>
  <source src="tutorial.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

In this example, width="500" sets the video width to 500 pixels, while controls displays the built-in playback controls.

You can explore more options in our HTML Video tutorial.

Using Multiple Media Sources

Different browsers may support different media formats. You can provide multiple sources so the browser can select a format it supports.

<video controls width="500">
  <source src="lesson.mp4" type="video/mp4">
  <source src="lesson.webm" type="video/webm">
  Your browser does not support HTML video.
</video>

The browser checks the sources in order and uses the first format it can play. If none is supported, the fallback message is displayed.

Important HTML Media Attributes

HTML media elements support several useful attributes:

Attribute	Purpose
`controls`	Displays playback controls
`autoplay`	Requests automatic playback
`loop`	Repeats playback
`muted`	Starts media without sound
`width`	Sets the video width
`height`	Sets the video height
`preload`	Gives the browser a hint about loading media

For example, a video can repeat continuously using the loop attribute:

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

Autoplay behavior depends on browser policies, and browsers commonly block autoplay when audio is enabled. Use autoplay carefully to avoid disturbing visitors.

Best Practices for HTML Media

Follow these practices when adding media to your website:

Use appropriate media formats and provide alternative sources when necessary.
Compress large files to improve page loading speed.
Add captions or subtitles to make videos more accessible.
Provide controls so visitors can manage playback.
Avoid automatically playing audio without user interaction.
Use descriptive fallback text when media cannot be played.
Optimize media for mobile devices and different screen sizes.