The <video> tag is an HTML element that allows you to embed video files on your website. It lets users view videos without needing a separate media player or plugin. In this article, we will explore the different aspects of the <video> tag and how it can be used to enhance your web pages.
Code Example
Here is an example of how you can use the <video> tag:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
In this example, we have created a <video> element with a width and height of 320×240 pixels. The controls Attribute adds playback controls to the video player, such as play, pause, volume, and full-screen options. We have also included two <source> elements that specify different video file formats (MP4 and OGG). If a browser does not support the first source format, it will try to play the second one. Finally, we have added an error message for browsers that do not support the <video> tag at all.
Attributes
Here is a list of attributes applicable to the <video> tag:
src: Specifies the URL of the video file to be played.autoplay: Automatically plays the video when it loads on the page (not recommended due to accessibility concerns).loop: Makes the video start over again after it finishes playing.muted: Mutes the audio track of the video.poster: Specifies an image to display before the video starts playing or while it is downloading.preload: Determines how much of the video should be loaded when the page loads (none, metadata, auto).widthandheight: Set the dimensions of the video player in pixels.- controls: Adds playback controls such as play, pause, volume, and full-screen options to the video player.
playsinline: Forces the browser to play the video inline rather than in full-screen mode.
