Audio and Video tags in Html- HTML BASICS

 Welcome to our blog-Techwalebnde, In today's blog we will learn about audio and video tags which are used in html So lets start....

What is Audio tag?

In simple words audio content can be easily embed into Webpage using <audio> tag in html, You don't need a separate media player to play audio files like music or sound effects thanks to it. It is simple to integrate and manage audio playback within your web pages by using attributes in the <audio> tag to identify the source of the audio file...

Syntax:

<audio src "xyz.mp3" controls </audio>

Attributes:

·     Src: This attribute specifies the URL or path to the audio file you want to embed.

•  Controls: When this attribute is present, it adds basic controls to the audio player, such as play, pause, and volume adjustment. Users can interact with these controls to manage playback.

·  Autoplay: If this attribute is included, the audio will start playing automatically when the webpage loads.

·   Loop: When set, this attribute causes the audio to repeat playing once it reaches the end.

·   Preload: Specifies if and how the audio should be loaded when the page loads..

Values of Preload attribute:

a.    preload="auto": This is the default behavior. It tells the browser to preload the entire audio file as much as possible.

b.   preload="metadata": This option tells the browser to preload only the metadata (information about the audio file, such as duration and track information) without loading the actual audio content.

c.   preload="none": This option instructs the browser not to preload the audio file at all.

 

·    Muted: When included, this attribute mutes the audio initially.

·   Volume: This attribute sets the initial volume level of the audio. It ranges from 0.0 (silence) to 1.0 (maximum volume).

·   Type: Specifies the MIME type of the audio file, such as audio/mpeg for MP3 files or audio/wav for WAV files. It helps the browser understand how to handle the audio content.

What is Video tag?

The <video> tag in HTML is used to embed videos directly into a web page. It lets you play a video file right in the browser, similar to how you watch videos on YouTube or other video platforms. The <video> tag can control aspects like play, pause, volume, and even add subtitles or captions to make the video more accessible....

Syntax:

<video src="xyz.mp4" controls </video>

Attributes:

• Src: Specifies the path of the video file.
• Controls: Adds video controls like play, pause and volume.
• Autoplay: Automatically starts playing the video when the page loads.
• Loop: Repeat the video once it ends.
• Muted: Mutes the video by default.
• Poster: Specifies the image to be displayed before the video starts playing.
• Width and height: Specifies the dimensions of the video..

So that's it for today guys, you can also check out my previous blogs on html basics for more understanding of the elements and tags of html...

1. Here are the link of html cheatsheet...
2. Here are the link for basic html guide...
3. Here are the link for basic html elements...

Practice Assignment

Today's task is that you have to make an album of video and audio tags b using above attributes that we have discussed in today's blog and you can share with me on my social handles in my next blog those who share their work with me I gave them a shoutout on my blog..

Here is the tutorial on how you can add video and audio files in your vs studio code

click on it if any issue arises...

Stay tuned with us as some wonderful content is arriving soon...