HTML Audio and Video tags
Audio and Video tags in HTML
Today we will learn about Audio and Video tags in HTML . You can watch our video to learn how to use these tags. Click Here
Audio tag
The <audio> tag is used to embed sound content in html page, such as music clip or any other audio streams. Within the <audio> tag you can put one or more <source> tags with different audio sources as different browsers support different formats. The browser will automatically pick up the first source it supports.
For e.g.
<audio>
<source src=”simple.mp3″ type=”audio/mpeg”>
< source ….>
<source …>
Your browser does not support the audio tag.
</audio>
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
Supporting audio formats in HTML
There are three formats that are supported
MP3 which is Audio format from MPEG (Moving/Motion Pictures Experts Group)
AAC which is Advanced Audio Coding
OGG which is An Open container and free audio format
Attributes of audio tag
<Video> Tag
Video tag is used to embed video content in html page, such as a movie, ad or any video clip.
The <video> tag contains one or more <source> tags with different video sources. As different browsers support different video formats, the browser will choose the first source it supports.
E.g.
<video>
<source src=”horse.mp4″ type=”video/mp4″>
< source ….>
<source …>
Your browser does not support the audio tag.
</video>
The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.
Supported file formats for video tag
There are three supported video formats in HTML: MP4, WebM, and OGG.
You can add them with type value as shown.
e.g.
<video>
<source src=”horse.mp4″ type=”video/mp4″>
<source src=”horse.ogg” type=”video/ogg”>
<source src=”horse.webm” type=”video/webm”>
Your browser does not support the audio tag.
</video>
Attributes of video tag
Now the attributes autoplay, controls, muted, loop and preload is same as that of audio tag. In addition, it has height and width by which you can set the height and width in pixels of the display area. In addition it has poster tag by which you can specify a url of an image to be shown while the video is downloading, or until the user hits the play button.
Questions
- In HTML what are the supported Audio formats?
Ans.MP3, AAC and OGG are the supported Audio formats.
2. Which of these are supported video formats?
- MP4
- WebM
- OGG
- Avi
- mov
Ans.The right answer is MP4, WebM, and OGG are the supported video formats.
- Which audio or video attribute specifies that the video will start over again, every time it is finished?
Ans .loop. When we use this attribute, video will restart itself
- Which audio or video attribute specifies that the video will start playing as soon as it is ready?
Ans.autoplay. When you specify this video will start playing as soon as its ready.
- What is muted attribute used for?
Ans. Muted attribute specifies that the audio output of the video should be muted
- Which of these are valid attributes for audio tag?
- Poster
- Width
- Height
- Autoplay
- Src
- muted
Ans.autoplay, src and muted.Remaining such as Poster, width, height are video attributes not audio attributes.
- What are the values for attribute preload?
Ans. auto, metadata and none are three values for preload attribute.
Programs
