Audio and video tag

Ankit DixitAnkit Dixit
2 min read

Table of contents

Audio Tag:

    • The <audio> tag is used to embed audio content, such as music or sound effects, into web pages.

      • The src attribute specifies the URL or file path of the audio file you want to embed.

      • Example: <audio src="audiofile.mp3"></audio>

      • You can specify the MIME type of the audio file using the type attribute to assist browsers in understanding the file format.

      • Example: <audio src="audiofile.mp3" type="audio/mpeg"></audio>

      • The <audio> tag supports various audio formats like MP3, WAV, and OGG.

      • To provide compatibility across different browsers, you can include multiple <source> tags within the <audio> tag, each specifying a different audio format.

      • Example:

         <audio>
           <source src="audiofile.mp3" type="audio/mpeg">
           <source src="audiofile.ogg" type="audio/ogg">
           Your browser does not support the audio tag.
         </audio>
        
      • The controls attribute adds playback controls (play, pause, volume) to the audio player.

      • Example: <audio src="audiofile.mp3" controls></audio>

Video Tag:

    • The <video> tag is used to embed video content, such as movies or video clips, into web pages.

      • The src attribute specifies the URL or file path of the video file you want to embed.

      • Example: <video src="videofile.mp4"></video>

      • Just like with the audio tag, you can specify the MIME type of the video file using the type attribute.

      • Multiple video formats can be supported by including <source> tags within the <video> tag, each specifying a different video format.

      • Example:

         <video>
           <source src="videofile.mp4" type="video/mp4">
           <source src="videofile.webm" type="video/webm">
           Your browser does not support the video tag.
         </video>
        
      • The controls attribute adds playback controls (play, pause, volume, progress) to the video player.

      • Example: <video src="videofile.mp4" controls></video>

      • The autoplay attribute automatically starts playing the video as soon as the page loads.

      • Example: <video src="videofile.mp4" autoplay></video>

      • The loop the attribute causes the video to loop and play again from the beginning after it finishes.

      • Example: <video src="videofile.mp4" loop></video>

      • The poster attribute specifies an image to be displayed as a placeholder before the video loads or is played.

      • Example: <video src="videofile.mp4" poster="thumbnail.jpg"></video>

It's important to ensure compatibility across browsers by providing alternative formats using the <source> tag and using appropriate attributes to control the behavior and appearance of the audio and video players.

I hope this comprehensive explanation helps clarify the usage and features of the audio and video tags in HTML.

0
Subscribe to my newsletter

Read articles from Ankit Dixit directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Ankit Dixit
Ankit Dixit

student |web developer |UI/UX designer |logo designer