HTML Media Tags <video> & <audio>

HTML5 has made it easy to put video and audio content directly into a web page, no third party plug ins needed.

<video> tag – Embedding video in HTML

The <video> tag is the preferred way to include video files in an HTML web page. When a person chooses to watch video content, the video is sent to their browser without needing a plug in like Flash.

Basic Syntax


      <video width="width" height="height" controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.webm" type="video/webm">
        Your browser doesn’t support the HTML5 video element.
      </video>

Explanation of Attributes

  • controls: Displays play, break, volume, and fullscreen options.
  • autoplay: Starts playing the video as soon as it's ready.
  • loop: Repeats the video when it ends.
  • muted: Mutes the video by browser.
  • poster: Shows an image before the video starts playing.
  • width and height: Set the dimensions of the video player.
  • <source>: Specifies different video files the browser can choose from.
  • src: The path to the video file.
  • type: The type of the video file.

Example with Bill and Controls


      <video width="640" height="360" controls poster="movie_poster.jpg">
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.webm" type="video/webm">
        Your browser doesn’t support the <video> tag.
      </video>

Preview :

(These Video here showing a video player with controls and a poster image displayed before playback.)

<audio> tag – Embedding Audio in HTML

The <audio> tag is used to play audio files like music or sound goods right from the browser.

Basic Syntax


      <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        <source src="audio.ogg" type="audio/ogg">
        Your browser doesn’t support the audio element.
      </audio>

Preview :

(These Audio here showing a simple audio player with play/pause and volume controls.)

Common Attributes

  • controls: Adds play/pause and volume control.
  • autoplay: Plays audio automatically when the web page loads.
  • loop: repete audio indefinitely.
  • muted: Starts the audio in muted mode.
  • <source>, src, type: Similar to the <video> tag, used to provide different audio formats.

Example


      <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        <source src="audio.ogg" type="audio/ogg">
        Your browser doesn’t support the audio element.
      </audio>

Crucial Points to Flash back

  • Always include multiple <source> elements for better browser support.
  • Keep fallback text for aged browsers that do n’t support the tags.
  • Use correct formats:
    • Video: .mp4, .webm, .ogg
    • Audio: .mp3, .ogg, .wav

"Media is n't just happy, it’s an experience. And with HTML5, you’re the director!"

Try it Yourself