HTML5 introduced native <audio> and <video> elements, replacing reliance on Flash and other plugins for embedding media.
Video Element (<video>)
The <video> element supports multiple formats. MP4 has the broadest browser compatibility.
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | Yes | No | No |
| Chrome | Yes | Yes | Yes |
| Firefox | Yes (since 21; Linux since 30) | Yes | Yes |
| Safari | Yes | No | No |
| Opera | Yes (since 25) | Yes | Yes |
Key Attributes
| Attribute | Value | Description |
|---|---|---|
| autoplay | autoplay | Start playing as soon as ready. |
| controls | controls | Show playback controls. |
| height | pixels | Set player height. |
| loop | loop | Restart after completion. |
| muted | muted | Mute audio output. |
| poster | URL | Show placeholder image until play. |
| preload | auto / metadata / none | Load behavior; ignored if autoplay is set. |
| src | URL | Video file URL. |
| width | pixels | Set player width. |
<video controls autoplay muted loop poster="./media/pig.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video element.
</video>
Chrome blocks autoplay unless the muted attribute is present.
Audio Element (<audio>)
The <audio> element supports three main formats.
| Browser | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer | Yes | No | No |
| Chrome | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes |
| Safari | Yes | Yes | No |
| Opera | Yes | Yes | Yes |
Key Attributes
| Attribute | Value | Description |
|---|---|---|
| autoplay | autoplay | Start playing as soon as ready. |
| controls | controls | Show playback controls. |
| loop | loop | Restart after completion. |
| muted | muted | Mute audio output. |
| preload | auto / metadata / none | Load behavior. |
| src | URL | Audio file URL. |
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Chrome disables autoplay for audio; JavaScript is required to work around this.
Key Points
<audio>and<video>share similar attributes and usage patterns.- Browser support varies; always provide multiple source formats.
- Chrome blocks autoplay on both elements by default.
- For video autoplay, include
mutedand optionallyloop. - The
<video>element is commonly used without default controls, relying on custom scripts for playback management.