The HTML <video> tag is used to embed videos in a web page. Here's an example of the basic syntax and some common attributes:
Basic Syntax:
<video src="video.mp4" controls></video>
Attributes:
src: Specifies the source URL or file path of the video.
controls: Adds playback controls (play/pause, volume, seek bar, etc.) to the video player.
width: Sets the width of the video player in pixels or as a percentage of the parent container's width.
height: Sets the height of the video player in pixels or as a percentage of the parent container's height.
autoplay: Specifies that the video should automatically start playing when the page loads.
loop: Enables continuous looping of the video.
muted: Sets the video to be initially muted.
poster: Defines an image to be shown as a placeholder before the video loads or if the video cannot be played.
Example Usage
<video src="video.mp4" controls width="640" height="360"></video>
Multiple Video Sources: To provide multiple video formats for different browser compatibility, you can include multiple <source> tags within the <video> tag. The browser will select and play the first compatible video format it finds.
<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
Responsive Videos: To make videos responsive and adapt to different screen sizes, you can use CSS techniques similar to those used for images. Set the maximum width of the video player to 100% and adjust the height accordingly.
<style>
.responsive-video {
max-width: 100%;
height: auto;
}
</style>
<video src="video.mp4" controls class="responsive-video"></video>
These are the key aspects of using the <video> tag in HTML. Remember to provide video formats in multiple sources for broader browser compatibility, and consider adding accessible text or captions for better user experience and inclusivity.