HTML Tutorial
INTRODUCTION
HTML BASIC TAGS
INLINE & BLOCK ELEMENTS
HTML LISTS
HTML TABLES
HTML FORMS
HEAD ELEMENTS
HTML MEDIA
MISCELLANEOUS TAGS
Video & Audio Tags
HTML allows you to embed media content like video and audio directly into your web pages using the <video> and <audio> tags. These tags enhance user engagement and make your pages more interactive.
The <video> Tag
The <video> tag is used to display videos on a webpage. You can control playback, add a poster image, and define dimensions using attributes.
Basic Syntax
<video src="video.mp4" controls></video>
Useful Attributes:
src– path to the video file (can also use<source>tags).controls– Adds play, pause, and volume control.autoplay– start video automatically when the page loads.loop– repeat the video after it ends.- muted- starts the video without sound.
poster– displays an image before the video starts.width&height– defines the size of video player.
The <audio> Tag
The <audio> tag is used to embed audio tracks. Just like videos, if supports controls and other playback options.
Basic Syntax
<audio src="audio.mp3" controls></audio>
Useful Attributes:
src– path to the audio file.controls– display audio play back button.autoplay– play audio when the page loads.loop– repeat the audio once finished.muted– starts the audio with no sound.preload– control how audio is load.
Preload Values Explained:
none: Don’t load the audio until the user clicks play.metadata: load only details like duration.auto: load the full file if possible.
Using <source> for Multiple Formats
To ensure cross-browser support, you can use the <source> tag inside <video> or <audio>:
<video controls width="600">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
Conclusion
The <video> and <audio> tags allow you to easily embed multimedia in HTML. By using their attributes wisely, you can enhance user experience with accessible and controllable media playback.