Audio and Video in HTML

Audio and Video in HTML

Adding audio and video content to your website can make it more interesting and interactive for the user. HTML provides us with <audio> and <video> elements to make that happen. In this article, we'll get to know about these elements and how to use them in our HTML code.

So let's begin!!

<video></video> Element

This element embeds a media player which allows video to be played.

The most basic structure to include a video is this:

<video src="myVideo.wbm">

<p>
Your browser does not support the current video format, visit 
<a href="myVideo.mp4" >this link</a> to view the video instead.
</p>

</video>

In the example above the src attribute is used to enter the path of the video, just like the image <img> element. The text between the <video> tag is used as fallback content that means it gets loaded when the browser does not support the video element. It is used for the old browsers.

Now the problem in the example above is that if the video format you want to show is not supported by the browser then users wont be able to see the video. The preferred way is in the example below:

<video controls>
  <source src="myVideo.mp4" type="video/mp4" />
  <source src="myVideo.webm" type="video/webm" />
  <p>
    Your browser does not support the current video format, visit 
    <a href="myVideo.mp4" >this link</a> to view the video instead.
  </p>
</video>

In the example above instead of using src attribute in the video tag, we use <source> element in between the video tag and then use src inside that <source> element and enter the path of the video as the value to the src .

You can use multiple <source> elements each with a different video format as the value to src attribute so that if the video format in the first <source> element is not supported by the browser the browser will try to load the video in the next <source> element.

Including <source> elements for webM and mp4 should be enough as most browsers nowadays support these formats.

Now let's talk about some important attributes that we can use with <video> element.

  • controls

    This attribute is used when you want to give user the controls to control the video playback. If this attribute is present the browser will provide an interface which'll include controls to increase/decrese volume, start/stop video, etc.

    This attribute does not have a value (it is a Boolean attribute), you just have to include it in the <video> tag for it to work.

  • height and width

    As the names suggest, these attribute are used to give height and width to the video's display area. You can use any of these or both depending on what you want. Although the Video will always maintain it's aspect ratio so if the aspect ratio is not maintained by the sizes you set then the video will expand horizontaly and the remaining space will be given a solid background.

  • poster

    This attribute is used if you want to show an image before the video starts. The value of this attribute will be the path of the image you want to display. If this attribute is not specified then the first frame of the video is used as the poster.

  • muted

    This attribute if present mutes the audio contained in the video by default when the page loads. This is a Boolean attribute.

  • autoplay

    This attribute is also a Boolean attribute. If this attribute is present in the <video> tag then the video will start to play automatically as the page loads.

  • preload

    This attribute provides a hint to the browser about what content needs to be loaded before the page loads for best user experience.

    There are three values for this attribute out of which you can assign one.

    preload = "none" - This tells that the video should not be preloaded

    preload = "metadata" - This tells that only the metadata of the video should be loaded before the page loads.

    preload = "auto" - This tells that the whole video can be downloaded even if the user is not going to use it.

    The autoplay attribute has more precedence (importance) than the preload attribute so if autoplay is specified in the <video> tag then browser will have to load the video beforehand in order to autoplay it.

<audio></audio> Element

Audio element is used to embed audio files in your document. It works same as the <video> element. There are only few differences that you need to keep in mind, those are explained below.

As there is nothing to display, height and width attribute doesn't work on this. For this same reason poster attribute also doesn't work on this element.

Apart from these things , <audio> element supports the same attributes as <video>

<audio controls>
  <source src="myAudio.mp3" type="audio/mp3" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Your browser does not support this audio file, Go <a                                   href="viper.mp3">here</a> instead.
  </p>
</audio>

This was all about HTML <audio> and <video> element, and also the important attributes that you can use with them.

If you have any feedback regarding this article, do share it with me.

If you liked the article and it helped you in any way, Do give it a like :)

ENJOY LIFE and KEEP LEARNING!!