Audio and Video Tag in HTML

Audio and Video Tag in HTML

Table of contents

Video Tag -

The <video> tag is used to embed video content in an HTML document. It can be used to play a variety of video formats, including MP4, WebM, and Ogg.

Here is an example of how to use the <video> tag to embed a video in an HTML page:

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

The 'src' attribute specifies the location of the video file. The 'controls' attribute displays controls for the video, such as a play/pause button and volume control. The text between the <video> and </video> tags will be displayed if the browser does not support the video tag.

You can also specify the width and height of the video using the width and height attributes:

Copy code<video src="video.mp4" width="640" height="360" controls>
  Your browser does not support the video tag.
</video>

Additionally, you can use the <source> element to specify multiple sources for the video, in case the browser doesn't support a particular format:

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

The type attribute specifies the MIME type of the video file. The browser will use the first source that it supports.

Audio tag -

The <audio> element is used to embed audio content in an HTML document. It can be used to play a variety of audio formats, including MP3, Ogg, and WAV.

Here is an example of how to use the <audio> element to embed an audio file in an HTML page:

Copy code<audio src="audio.mp3" controls>
  Your browser does not support the audio tag.
</audio>

The src attribute specifies the location of the audio file. The controls attribute displays controls for the audio, such as a play/pause button and a volume control. The text between the <audio> and </audio> tags will be displayed if the browser does not support the <audio> element.

You can also use the <source> element to specify multiple sources for the audio, in case the browser doesn't support a particular format:

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

The type attribute specifies the MIME type of the audio file. The browser will use the first source that it supports.

You can also specify the autoplay, loop, and preload attributes for the <audio> element. The autoplay attribute will cause the audio to start playing as soon as the page loads, while the loop attribute will cause the audio to loop indefinitely. The preload attribute can be used to specify whether the audio should be loaded when the page loads, or whether it should be loaded only when the user clicks the play button.