🎬 HTML Audio & Video

Learn how to embed multimedia content directly into your web pages

📚 Media Tags Overview

📌 Key Concept

The <video> and <audio> tags allow you to embed media players natively in HTML5 without requiring third-party plugins like Flash. They support multiple file formats via the <source> tag.

Basic Syntax

<video controls> <source src="movie.mp4" type="video/mp4"> </video>

💻 Code Examples

📝 Example 1: Video with Controls

Standard video player with play/pause controls:

<video width="100%" controls> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> Your browser does not support the video tag. </video>

▶️ Output:

📝 Example 2: Autoplay and Muted

Video plays automatically (must be muted for modern browsers):

<video width="100%" autoplay muted loop> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video>

▶️ Output:

📝 Example 3: Audio Player

Simple audio player for music or podcasts:

<audio controls> <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>

▶️ Output:

🔧 Tag Attributes

Video Attributes

Attribute Description
controls Shows play, pause, volume controls
autoplay Starts playing automatically (often requires muted)
loop Replays the video when finished

✍️ Practice Assignments

🎯 Assignment 1: Background Video

Easy

Create a video that plays automatically in the background.

  • Use autoplay, muted, and loop attributes
  • Remove controls
  • Set width to 100%

🎯 Assignment 2: Podcast Player

Medium

Create an audio player for a podcast episode.

  • Use the <audio> tag with controls
  • Provide multiple source formats (mp3, ogg)
  • Add a fallback message for old browsers

🎓 Key Takeaways

  • Use <video> and <audio> for native media playback
  • Always include controls unless building a custom player or background video
  • Use <source> tags to provide multiple formats for better compatibility
  • Autoplaying video usually requires the muted attribute
  • Provide fallback text for older browsers