Video & Audio Tags

The <video> Tag

The <video> tag is used to embed video files in an HTML document. It supports multiple attributes to control the video playback.

Example usage:

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

Attributes for <video> Tag

• src: Specifies the path to the video file.
• controls: Adds video controls, like play, pause, and volume.
• autoplay: Automatically starts playing the video when the page loads.
• loop: Repeats the video once it ends.
• muted: Mutes the video by default.
• poster: Specifies an image to be displayed before the video starts playing.
• width and height: Specifies the dimensions of the video.

The <audio> Tag

The <audio> tag is used to embed audio files in an HTML document. It also supports multiple attributes for control.

Example usage:

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

Attributes for <audio> Tag

• src: Specifies the path to the audio file.
• controls: Adds audio controls, like play, pause, and volume.
• autoplay: Automatically starts playing the audio when the page loads.
• loop: Repeats the audio once it ends.
• muted: Mutes the audio by default.
• preload: Specifies if and how the audio should be loaded when the page loads ('auto', 'metadata', 'none').

The "preload" attribute can have the following values:

• none: This is the default value. It indicates that the browser should not preload the audio file at all. The audio file will only start downloading when the user initiates playback.
• metadata: This value tells the browser to preload only the metadata of the audio file, such as its duration and basic information about the audio. This can be useful if you want to display the audio duration to the user without fully loading the audio data.
• auto: This value instructs the browser to preload the entire audio file as much as possible without delaying the loading of other important page content. The browser will try to load the audio file in the background so that it's ready to play when the user decides to start it.

Conclusion

The <video> and <audio> tags are powerful tools for embedding media content in HTML documents. Utilizing their attributes allows you to offer an interactive and dynamic user experience.