HTML Video & Audio

HTML provides built-in support for embedding video and audio content into web pages using the <video> and <audio> elements. These elements allow for multimedia playback without requiring additional plugins like Flash.

HTML <video> Element

The <video> tag is used to embed videos in a webpage.

Syntax

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Attributes

1. controls: Displays play, pause, volume, and other controls.
2. autoplay: Starts the video automatically when the page loads.
3. loop: Repeats the video after it ends.
4. muted: Starts the video without sound.
5. poster: Specifies an image to display before the video starts playing.

Example with Multiple Sources

<video width="640" height="360" controls poster="poster.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

 

HTML <audio> Element

The <audio> tag is used to embed audio in a webpage.

Syntax

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

Attributes

1. controls: Displays playback controls.
2. autoplay: Starts the audio automatically when the page loads.
3. loop: Repeats the audio after it ends.
4. muted: Starts the audio without sound.

Example with Multiple Sources

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio tag.
</audio>

 

Advanced Features

Adding Subtitles (for Video)

Subtitles can be added using the <track> element.

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  Your browser does not support the video tag.
</video>

 

Customizing Playback with JavaScript

You can control video and audio using JavaScript.

Example: Play and Pause Video

<video id="myVideo" width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
</video>
<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>

<script>
  const video = document.getElementById("myVideo");

  function playVideo() {
    video.play();
  }

  function pauseVideo() {
    video.pause();
  }
</script>

 

Summary

• HTML <video>: Ideal for embedding videos with support for playback controls, multiple formats, and subtitles.
• HTML <audio>: Designed for embedding audio tracks with playback controls.
• Use attributes like controls, autoplay, and loop to enhance user experience.
• Both elements integrate seamlessly with JavaScript for custom behavior.