Audio and Video Tag

Audio and Video Tag

Audio Tag:

The HTML audio tag is helpful to add audio files to the browser or for embedding audio files it supports 3 types of files MP3, WAV, and OGG.

Syntax:

<audio src=""></audio>

<audio src="" controls autoplay loop muted></audio>

<audio controls autoplay muted>
    <source src="">
</audio>

until and unless we write the attribute called controls our audio file will not be available in the browser same with the Video Tag also which we will talk later on about Video Tag, now let's talk about various attributes we can use in the AudioTag

  1. Controls: This attribute allows us to control our audio for example we can pause the audio, we can increase and decrease the volume.

  2. autoplay: This is used to play the audio automatically which is not a good user experience.

  3. loop: The audio will play again and again by itself if we are using the loop attribute.

  4. mute: Mute will eventually silence the audio

  5. src: This attribute provides us with the path where our file is present

Video Tag:

The Video tag is used to add video files, and render the video to the webpage The video tag is a little bit different from the audio tag because in an audio tag if we are not using the controls attribute then we cannot see the audio file in the browser but in the case of a video tag if we are not using controls the video file is available in the form of an image we can just see an image ( we cannot perform any operation like playing and pausing the video )but in the audio tag the audio is itself is not available.

Attributes Used In Video Tag:

  1. Controls: Controls attribute will allow you to play the video, pause the video, and increase and decrease the volume.

  2. Loop: The audio will play again and again by itself if we are using the loop attribute.

  3. autoplay: This is used to play the video automatically which is not a good user experience.

  4. mute: Mute will eventually silence the audio

  5. src**:** This attribute provides us with the path where our file is present

  6. Height & Width: We can define our height and width

Syntax:

 <video src="" controls autoplay controls width="500" height="300" muted></video>

<video controls autoplay muted>
    <source src="">
  </video>

Note: In the Audio and Video tag the one which plays a major role is the controls attribute because the audio and video tag is being displayed on the browser because of the controls attribute, if we are not using it in the syntax then it will get loaded on the browser but it will not display on the browser but yes it is being loaded into the browser