Media formats overview in HTML - Browser Rendering Trace

Render Flow - Media formats overview

Read <video>

→Create VIDEO node

↓

Read <audio>

→Create AUDIO node

The browser reads media tags, creates nodes, loads the media file, decodes the format, then renders video frames or plays audio.

Render Steps - 3 Steps

Code Added:<video controls width="320"> with one <source> element

Before

[Empty page]

→

After

[Video player box 320px wide]
[Play button] [Progress bar]
[Black screen area for video]

Adding the video tag creates a video player box with controls and a black area where video will play.

🔧 Browser Action:Creates VIDEO element, allocates space, prepares controls UI

Code Sample

This code shows a video player with two format options and an audio player with two format options, letting the browser pick the supported format.

HTML

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

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

Render Quiz - 3 Questions

After adding the second <source> inside the <video> tag (render_step 2), what happens visually?

A Two video players appear side by side.

B The video player stays the same but can now choose the best format to play.

C The video player disappears.

D The video player shows both videos playing at once.

Common Confusions - 2 Topics

Why does my video not play in some browsers even though I provided a source?

The browser may not support the video format you provided. Using multiple <source> tags with different formats helps the browser pick one it can play (see render_steps 2).

💡 Always provide multiple source formats inside <video> or <audio> for best compatibility.

Why does the audio player show but no sound plays?

The audio format might not be supported by the browser or the file path could be wrong. Check the source types and file URLs (see render_steps 3).

💡 Use developer tools to check if media files load correctly.

Property Reference

Media Format	Type	Common Use	Browser Support	Notes
MP4 (H.264)	Video	Most devices and browsers	Very high	Widely supported, good quality/compression
WebM	Video	Open web format	High	Good for modern browsers, open source
OGG	Audio	Open audio format	High	Used for audio, open and royalty-free
MP3	Audio	Audio playback	Very high	Most devices support it, lossy compression

Concept Snapshot

Media tags like <video> and <audio> let browsers play media files. Use multiple <source> elements with different formats for best browser support. Common video formats: MP4 (H.264), WebM. Common audio formats: MP3, OGG. Controls attribute adds play/pause UI. Browsers pick the first supported format automatically.