Video & Audio Tags
Learn how to embed video and audio content in your web pages.
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
- none: The audio will not be preloaded.
- metadata: Only metadata (like duration) will be preloaded.
- 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.
How is this guide?
Sign in to share your feedback
Help us improve by sharing your thoughts on this guide.
Last updated on
SVG in HTML
Scalable Vector Graphics (SVG) has become an indispensable part of modern web development. SVG enables developers to create high-quality, scalable graphics that look crisp at any size or resolution. In this blog post, we'll explore the basics of using SVG in HTML, its benefits, and some practical examples.
HTML Canvas
The `<canvas>` element in HTML is a powerful feature for rendering graphics and shapes directly within web pages. Though it's often paired with JavaScript for dynamic rendering, the canvas itself is an HTML element. In this blog, we'll explore what you can do with the `<canvas>` element alone.