Audio and Video tag

Audio and Video tag

·

2 min read

The <audio> and <video> tags make it simple to add media to a website. You need to set the "src" attribute to identify the media source and include a controls attribute so the user can play and pause the media.

Video Attribute:

The video tag can have several attributes to control the look and feel and various functionalities of the control. Those are ib below −

controls

If this attribute is present, it will allow the user to control video playback, including volume, seeking, and pause/resume playback.

autoplay

This Boolean attribute if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.

height

This attribute specifies the height of the video's display area, in CSS pixels.

width

This attribute specifies the width of the video's display area, in CSS pixels.

loop

This Boolean attribute if specified will allow the video automatically seek back to the start after reaching the end.

preload

This attribute specifies that the video will be loaded at page load, and ready to run. Ignored if autoplay is present.

src

The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed.

poster

This is a URL of an image to show until the user plays or seeks.

Syntax:

<video src = "foo.mp4"  width = "300" height = "200" controls>
   Your browser does not support the <video> element.   
</video>

Audio Attribute :

The audio tag can have several attributes to control the look and feel and various functionalities of the control. Those are below −

autoplay

This Boolean attribute if specified, the audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data.

controls

If this attribute is present, it will allow the user to control audio playback, including volume, seeking, and pause/resume playback.

loop

This Boolean attribute if specified will allow audio automatically seek back to the start after reaching the end.

preload

This attribute specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.

src

The URL of the audio to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed.

Syntax:

<audio src = "foo.wav" controls autoplay>
   Your browser does not support the <audio> element.   
</audio>