ADVERTISEMENT
Google AdSense Slot (headerLeaderboard)

Set your Publisher ID in src/config/ads.ts to display live ads.

HTML5 Tutorial• 5 min read

HTML Audio & Video

Embedding rich multimedia without external plugins

The HTML5 <video> and <audio> elements allow you to embed media players directly on your page natively with zero external plugins.

The <video> and <audio> Elements

Before HTML5, video files required proprietary plugins like Adobe Flash. Now, HTML5 specifies standard native media players.

The controls attribute adds the native browser play, pause, volume, and fullscreen interface.

Use multiple nested <source> tags specifying type="video/mp4" and type="video/webm" to ensure cross-browser compatibility.

poster: Displays a preview thumbnail image before the user presses play.

Native HTML5 Video with Fallbacks
<video width="640" height="360" controls poster="/images/poster.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  Your browser does not support the video tag.
</video>
ADVERTISEMENT
Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Which attribute must be added to a <video> element to show play, pause, and volume controls?