Multimedia Elements

In last section we looked at add images to the page. In this page, we will go through how to add video and audio into the site.

Video (<video>)

The <video> element is used to embed video content in HTML.

You can add predefined attributes that give you more control over the video that is embedded.

To embed a video file, you use the <video> tag and specify the source of the video using the <source> tag or the src attribute.

using src attribute

<video src="path/to/video.mp4" controls>
  Your browser does not support the video tag.
</video>

using source element

You can provide multiple sources for the video in different formats to ensure compatibility with different browsers.

<video controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

Attributes for video playback

1. controls attribute adds video controls such as play, pause, and volume. Browser itself adds these functionalities by its own, no need to add extra code to have the control functionality other than the control attribute.
2. autoplay if you add autoplay attribute onto the video element, the element will start playing the added video automatically when the page loads (which may come across a bit annoying for some users so use it carefully)
3. loop what happens when the video has completed playing ? it stopes. But if you want it play on a loop, add the loop attribute on to the element, browser will replay the video automatically when it ends.
4. muted attribute helps to mute the video. When a user clicks play, video will get started on mute, user will have to unmute to hear the audio.
5. poster Lets say you want to have a thumbnail on the video, like the ones you see on youtube videos ? poster helps to specify an image to be shown while the video is downloading or until the user hits the play button.

The following code snippet shows how to use these attributes

<video controls autoplay loop muted 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>

Audio (<audio>)

The <audio> element is used to embed audio content in HTML. Like the <video> element, it supports various attributes to control playback.

To embed an audio file, use the <audio> tag and specify the source of the audio using the <source> tag or the src attribute.

using src attribute

<audio src="path/to/audio.mp3" controls>
  Your browser does not support the audio element.
</audio>

using source element

You can provide multiple sources for the audio in different formats to ensure compatibility with different browsers.

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

Controls and Attributes for Audio Playback:

1. controls attribute adds audio controls such as play, pause, and volume. Browser itself adds these functionalities by its own, no need to add extra code to have the control functionality other than the control attribute.
2. autoplay If you add autoplay attribute onto the audio element, the element will start playing the added audio automatically when the page loads (which may come across a bit annoying for some users so use it carefully)
3. loop What happens when the audio has completed playing ? it stopes. But if you want it play on a loop, add the loop attribute on to the element; browser will replay the audio automatically when it ends.
4. muted attribute helps to mute the audio. When a user clicks on play, audio will start playing on mute, user will have to unmute to hear the audio.

The following code snippet shows how to use these attributes

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