Audio and Video in HTML5
HTML5 introduced native <audio> and <video> elements — no more Flash plugins needed. They work in every modern browser and support multiple formats for compatibility.
Video Element
Example 1 — Complete Video Player
<video width="800" height="450" controls poster="thumbnail.jpg" preload="metadata" > <!-- Multiple formats for browser compatibility --> <source src="lesson.webm" type="video/webm"/> <source src="lesson.mp4" type="video/mp4"/> <!-- Fallback for old browsers --> <p>Your browser does not support video. <a href="lesson.mp4">Download video</a> </p> </video> <!-- Subtitles/captions --> <video controls> <source src="video.mp4" type="video/mp4"/> <track kind="subtitles" src="subtitles-en.vtt" srclang="en" label="English" /> </video>
controls shows the default browser player. poster shows a thumbnail before play. preload="metadata" loads only duration info, not the full video.
Audio Element
Example 2 — Audio Player
<audio controls preload="metadata"> <source src="lesson.ogg" type="audio/ogg"/> <source src="lesson.mp3" type="audio/mpeg"/> <p>Browser does not support audio. <a href="lesson.mp3">Download MP3</a> </p> </audio> <!-- Autoplay (muted required on most browsers) --> <video autoplay muted loop playsinline> <source src="background.mp4" type="video/mp4"/> </video>
0:00 / 3:45
🔉
autoplay + muted is the correct combo for background videos. Browsers block autoplay with sound to protect users from unexpected noise.
Video/Audio Attributes
controlsShow default browser play/pause controls. Always include for user-controlled media.
autoplay mutedRequired together for background videos. Browsers block autoplay with sound.
loopRepeat the media when it ends. Good for background videos and ambient audio.
posterImage shown before video plays. Use a high-quality thumbnail: 16:9 ratio, 1280x720px.
preloadnone: don't preload. metadata: load only duration/dimensions. auto: load the file.
playsinlineRequired on iOS Safari to play video inline instead of fullscreen.
Always Provide Multiple Formats
No single video format works in 100% of browsers. Always provide WebM (Chrome/Firefox) + MP4 (Safari/Edge). The browser tries sources in order and uses the first one it supports. Without this, your video breaks on Safari (40% of iPhone users).
Why Flash is Gone
Before HTML5 (2014), video required Adobe Flash Player — a plugin that needed separate installation, was not available on mobile, and had constant security vulnerabilities. HTML5 audio and video replaced it entirely. Today Flash is dead and blocked by all browsers.