Multimedia Tags in HTML

HTML provides two key elements for embedding media: <audio> and <video>. These tags allow you to stream or play audio and video directly in your web pages.

1.The <audio> Tag

The <audio> element lets you embed audio content. It can stream audio (e.g., via getUserMedia() with a microphone) or play a file referenced with the src attribute.

Code Block Loading...

Default Behavior

  • Without attributes, the browser does not display controls.
  • Audio will only play if set to autoplay, and users cannot pause, adjust volume, or seek.

Adding Controls

Enable built-in controls with the controls attribute:

Code Block Loading...

Controls can be customized with skins.

MIME Type

Specify the file type with the type attribute:

Code Block Loading...

If omitted, the browser attempts to detect it automatically.

Autoplay

Audio does not play automatically unless you add autoplay:

Code Block Loading...

Note: Mobile browsers typically block autoplay.

Looping

Restart playback automatically with loop:

Code Block Loading...

Muted Playback

You can start audio muted:

Code Block Loading...

JavaScript Events

You can listen for events on the <audio> element:

  • play → when playback starts
  • pause → when playback is paused
  • playing → when playback resumes
  • ended → when the audio finishes

2. The <video> Tag

The <video> element embeds video content. It can stream (e.g., via webcam with getUserMedia() or WebRTC) or play a file referenced with src.

Code Block Loading...

Default Behavior

  • No controls are shown by default.
  • Video plays only if set to autoplay.
  • Users cannot pause, adjust volume, or seek without controls.

Adding Controls

Code Block Loading...

Controls can also be skinned.

MIME Type

Code Block Loading...

Autoplay

Code Block Loading...

Some browsers require muted for autoplay:

Code Block Loading...

Looping

Code Block Loading...

Poster Image

Set a placeholder image before playback begins:

Code Block Loading...

If not set, the first frame of the video is shown.

Dimensions

Reserve space with width and height attributes (in pixels):

Code Block Loading...

JavaScript Events

You can listen for events on the <video> element:

  • play → when playback starts
  • pause → when video is paused
  • playing → when playback resumes
  • ended → when the video finishes

With <audio> and <video>, you can embed rich multimedia directly into your pages, customize playback behavior, and enhance user interaction with JavaScript events.