⬅ Previous Next ➡

18. Audio & Video in HTML5

Audio & Video in HTML5
  • The <video> Tag: Used to embed video content directly into the page.
    • controls: Adds play, pause, and volume buttons (crucial, otherwise the video won't have a UI).
    • autoplay: Starts the video as soon as the page loads (use with muted to ensure it works).
    • poster: An image shown while the video is downloading.
  • The <audio> Tag: Similar to video, but used for sound files like music or podcasts.
    • loop: Makes the audio start over once it finishes.
    • muted: Starts the audio without sound.
  • The <source> Tag: Nested inside audio or video tags. It allows you to provide multiple file formats (like .mp4 and .ogg) so the browser can choose the one it supports.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5 Audio and Video</title>
</head>

<body>

<h2>HTML5 Multimedia (Audio &amp; Video)</h2>

<!-- Example 1: Basic Video Player (Single File) -->
<h3>Example 1: Watch our Tutorial</h3>
<video width="400" controls>
  <source src="lesson1.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<!-- Example 2: Video with Multiple Formats + Poster -->
<h3>Example 2: Video with Poster and Multiple Sources</h3>
<video width="400" controls poster="thumbnail.jpg">
  <source src="lesson1.mp4" type="video/mp4">
  <source src="lesson1.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<!-- Example 3: Autoplay Video (Muted + Loop) -->
<h3>Example 3: Auto Play Video (Muted)</h3>
<video width="400" autoplay muted loop>
  <source src="banner-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<!-- Example 4: Simple Audio Player -->
<h3>Example 4: Listen to Podcast</h3>
<audio controls>
  <source src="interview.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<!-- Example 5: Audio with Multiple Formats -->
<h3>Example 5: Audio with Multiple Sources</h3>
<audio controls>
  <source src="interview.mp3" type="audio/mpeg">
  <source src="interview.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

<!-- Example 6: Audio Auto Play (Muted is not for audio, use autoplay carefully) -->
<h3>Example 6: Autoplay Audio (Browser may block)</h3>
<audio controls autoplay>
  <source src="welcome.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<!-- Example 7: Video with Controls List (Disable Download in some browsers) -->
<h3>Example 7: Video ControlsList Example</h3>
<video width="400" controls controlslist="nodownload">
  <source src="lesson2.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

</body>
</html>
⬅ Previous Next ➡