In this tutorial, I will show you what is the video tag in HTML.
The <video> tag in HTML is used to embed video content directly into web pages. This tag was added to HTML5 and offers a standard method of displaying video files instead of depending on third-party plugins like Flash, which was widely used before HTML5.
Web developers can incorporate controls, captions, and several video codes with the <video> tag to ensure cross-browser and cross-device compatibility.
Basic Structure of the <video> Tag
A typical usage of the <video> tag looks like this:
<video src="video.mp4" controls>
Your browser does not support the video tag.
</video>Explanation:
<video>: The main tag that defines the video element.
src="video.mp4": The src attribute specifies the path to the video file you want to play. This can be a relative or absolute URL.
controls: This attribute adds video controls like play, pause, and volume adjustment to the video player.
Fallback content: "Your browser does not support the video tag." This text is displayed if the browser does not support the <video> element.
Attributes of the <video> Tag
The <video> tag comes with several attributes that control how the video is displayed and functions:
src: Provides the video file's URL. If you want to supply multiple formats, it's usually advised to make the element inside the
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
controls: Gives the video player additional video controls (play, stop, volume, etc.). Without this, users won't be able to control the video unless you provide custom controls via JavaScript.
autoplay: Automatically start playing the video as soon as it's ready. Note that many browsers may block autoplay if the video has audio.
<video src="video.mp4" autoplay></video>loop: Causes the video to start over again every time it finishes playing.
<video src="video.mp4" loop></video>muted: Mutes the audio of the video. To stop annoying sounds, this is frequently used in conjunction with the autoplay attribute.
<video src="video.mp4" autoplay muted></video>preload: Specifies how the video should be loaded when the page loads. It can take the following values:
- auto: Load the entire video.
- metadata: Load only the metadata (e.g., length).
- none: Don’t load the video until the user hits play.
<video src="video.mp4" preload="auto"></video>poster: Specifies an image to be shown while the video is downloading or until the user hits the play button. This is particularly useful for providing a preview of the video.
<video src="video.mp4" poster="preview.jpg" controls></video>width and height: Define the dimensions of the video player. If these attributes are not set, the video will be displayed at its default size.
<video src="video.mp4" width="600" height="400" controls></video>Multiple Video Formats
Various video formats are supported by different browsers. It is advised to use the element to give several formats for your video so that it will play in all browsers:
<video controls>
<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>
Common Video Formats:
MP4: Widely supported format with good compression and quality balance. Use the MIME type video/mp4.
WebM: Designed for web streaming, supported by Chrome and Firefox. Use the MIME type video/webm.
Ogg/Theora: Open format supported by Firefox and older versions of Chrome. Use the MIME type video/ogg.
Accessibility and Subtitles
Videos should ideally have captions or subtitles for accessibility. The <track> element inside the <video> tag is used to accomplish this:
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
Your browser does not support the video tag.
</video>
Explanation:
<track>: Specifies text tracks for the video, such as subtitles or captions.
kind="subtitles": Defines the type of text track. Common values are subtitles, captions, descriptions, chapters, and metadata.
srclang="en": Specifies the language of the subtitles.
label="English": Provides a label for the track, often the name of the language.
Browser Compatibility
All current browsers, including Chrome, Firefox, Safari, Edge, and Opera, support the <video> tag. For complete backward compatibility, though, fallbacks like Flash or a link to download the video may be required as earlier iterations of Internet Explorer (IE9 onward) do not support it.
No comments:
Post a Comment