The video tag is an HTML element that allows you to embed video content in your web page. It’s similar to the audio tag, but supports additional features such as video playback controls, subtitles, and multiple video sources for different resolutions and formats.
Here’s an example of how to use the video tag:
<video controls width="640" height="360"> <source src="video-file.mp4" type="video/mp4"> <source src="video-file.webm" type="video/webm"> Your browser does not support the video tag. </video>
In this example, we’re using the video tag to embed an MP4 video file in our web page. The controls attribute adds standard video controls, such as play/pause, volume, and progress bar. The width and height attributes specify the dimensions of the video player. The source elements specify the URLs of the video files and their MIME types. The text “Your browser does not support the video tag.” is displayed in browsers that don’t support the video tag.
You can also use the video tag to embed other video formats, such as WebM and Ogg Theora. Here’s an example:
<video controls width="640" height="360"> <source src="video-file.webm" type="video/webm"> <source src="video-file.ogv" type="video/ogg"> Your browser does not support the video tag. </video>
In this example, we’re specifying two sources for the video file: one in WebM format and one in Ogg Theora format. The browser will try to play the first source that it supports.
You can also add subtitles to your video using the track element:
<video controls width="640" height="360"> <source src="video-file.mp4" type="video/mp4"> <track kind="subtitles" src="video-file.vtt" srclang="en" label="English"> Your browser does not support the video tag. </video>
In this example, we’re adding a subtitle track in WebVTT format with the track element. The kind attribute specifies that it’s a subtitles track. The src attribute specifies the URL of the subtitle file. The srclang attribute specifies the language of the subtitles, and the label attribute specifies the label that will be displayed in the video controls.
You can also use the poster attribute to specify a preview image for your video:
<video controls width="640" height="360" poster="video-poster.jpg"> <source src="video-file.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
In this example, we’re specifying a preview image for our video with the poster attribute. The image will be displayed before the video starts playing.
