Audio and Video in HTML
HTML5 introduced native audio and video support directly in the browser — no plugins needed. Before HTML5, websites needed Adobe Flash which was slow, insecure, and not mobile-friendly. Flash died December 31, 2020.
Video Element
Example — Video Player
<video width="640" height="360" controls poster="thumbnail.jpg"> <source src="video.mp4" type="video/mp4"/> <source src="video.webm" type="video/webm"/> Your browser does not support video. </video>
▶video.mp4
Browser shows a native video player with play, pause, volume, and fullscreen controls.
Multiple source tags let the browser pick the format it supports. Always offer mp4 as the first option.
Autoplay Background Video
Example — Autoplay (must be muted)
<video autoplay muted loop playsinline width="640"> <source src="bg.mp4" type="video/mp4"/> </video>
All modern browsers block autoplay unless muted is also present. playsinline is required for iOS Safari to play inline instead of fullscreen.
Audio Element
Example — Audio Player
<audio controls preload="metadata"> <source src="audio.mp3" type="audio/mpeg"/> <source src="audio.ogg" type="audio/ogg"/> Your browser does not support audio. </audio>
▶
0:00 / 3:24
🔊
preload="metadata" loads only duration and track info — not the full file. Saves bandwidth on page load.
Video AttributesReference
controlsShows play, pause, volume controls. Always include for accessibility
autoplayPlays automatically. Requires muted to work in modern browsers
mutedStarts muted. Required for autoplay. User can unmute
loopLoops the video continuously
posterThumbnail image shown before video plays. Always set this
playsinlinePlays inline on iOS instead of entering fullscreen mode
preloadauto loads full file, metadata loads info only, none does not preload
Always Add Fallback Text
Put fallback text between video and audio tags. It shows only on very old browsers that do not support HTML5 media — very rare today but still good practice.
The Death of Flash
Adobe Flash was the dominant video technology from 1996 to 2015. Steve Jobs refused Flash on the iPhone in 2007 forcing the industry toward HTML5 video. Adobe officially ended Flash on December 31, 2020.