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 of 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 supports similar attributes to the video tag.
Example usage:

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

Attributes of 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.
• volume: Specifies the volume of the audio (0.0 to 1.0).
• playbackRate: Specifies the speed at which the audio should be played.

Value of Preload Attribute

1. none: The audio will not be preloaded.
2. metadata: Only metadata (like duration) will be preloaded.
3. auto: The audio will be preloaded.

Supported Video & Audio Formats

The <video> and <audio> tags support different file formats based on the browser. Commonly supported formats are:

• MP4: Supported by most browsers.
• WebM: Supported by Chrome, Firefox, and Opera.
• Ogg: Supported by Firefox, Chrome, and Opera.
• MP3: Supported by most browsers.

Always provide multiple formats to ensure compatibility across different browsers.

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.