How to Display Video and Audio in HTML Without Plugins

Adding Video

The basic structure looks like this:

1<video controls width="640">
2  <source src="video.mp4" type="video/mp4" />
3  <source src="video.webm" type="video/webm" />
4  Your browser does not support the video tag.
5</video>

• <video> → the main container
• <source> → lets you provide different formats for better browser support
• The text at the bottom appears only if the browser can’t play the video

Important Video Attributes

Example with more attributes:

1<video controls autoplay muted loop poster="thumbnail.jpg" width="640">
2  <source src="video.mp4" type="video/mp4" />
3  <source src="video.webm" type="video/webm" />
4  Your browser does not support the video tag.
5</video>

Note: Most browsers block autoplay with sound, so you usually need to add muted if you want it to start automatically.

Adding Audio

The audio tag works in a similar way:

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

Common attributes for audio:

• controls → shows the player controls
• autoplay → starts playing automatically
• loop → repeats the audio
• muted → starts with sound off

Quick Tips

• Always include more than one <source> format when possible (MP4 + WebM is a good combo).
• Use controls so users can play and pause the media.
• Add a poster image for videos so the area doesn’t look empty before playing.
• Be careful with autoplay, many users find it annoying.
• Compress your video and audio files to keep the page loading fast.

With the <video> and <audio> tags, you can add media to your pages easily without relying on any external plugins.