4.1 Basics of <video> Tag
Embedding video into a webpage using the <video> element allows you to play media directly in the browser.
This element offers a wide range of playback settings, including support for different formats,
control through attributes, and methods in JavaScript. Let's dive into this element.
Simple Example
The <video> tag is used with the src attribute to specify the video file path. You can also add
the controls attribute to display standard playback controls, like play, pause, and volume adjustment buttons.
<video src="videofile.mp4" controls></video>
Example with Multiple Sources
To ensure compatibility across different browsers, you can specify multiple video sources using the <source> tag.
This allows the browser to choose a supported video format.
<video controls>
<source src="videofile.mp4" type="video/mp4">
<source src="videofile.webm" type="video/webm">
<source src="videofile.ogv" type="video/ogg">
Your browser does not support the video element.
</video>
<video> Tag Attributes
src: specifies the path to the video filecontrols: displays playback controlsautoplay: automatically plays the video on page loadloop: replays the video after it endsmuted: mutes the video on loadpreload: specifies how the browser should load the video. Values: none, metadata, autowidthandheight: set the width and height of the video playerposter: specifies a placeholder image displayed before the video starts
4.2 Key Attributes
1. Autoplay
The autoplay attribute makes the video start playing immediately after the page is loaded.
As with audio, use this attribute with caution to avoid annoying users.
<video src="videofile.mp4" autoplay></video>
2. Loop
The loop attribute specifies that the video should play in an infinite loop.
This is useful for background videos or animations.
<video src="videofile.mp4" loop></video>
3. Muting
The muted attribute mutes the video file when it loads. This can be useful if you want the video
to play without sound by default and let the user enable sound as needed.
<video src="videofile.mp4" muted></video>
4. Preload
The preload attribute tells the browser how to load the video file when the page loads.
It can take one of three values:
none: the browser should not preload the videometadata: the browser should load only the metadata (duration, dimensions, etc.)auto: the browser should fully load the video when loading the page
<video src="videofile.mp4" preload="auto"></video>
5. Poster
The poster attribute specifies a placeholder image displayed before the video starts playing.
This can be helpful to provide users with visual information about the video's content.
<video src="videofile.mp4" poster="posterimage.jpg"></video>
4.3 Supported Video Formats
To ensure cross-browser compatibility, it's recommended to use multiple video formats. The most common formats include MP4, WebM, and OGG.
MP4 Format
MP4 (MPEG-4 Part 14) is one of the most popular video formats. It's supported by most browsers and devices. MP4 uses lossy compression and offers good video quality with a relatively small file size.
Example:
<video src="videofile.mp4" type="video/mp4"></video>
WebM Format
WebM is an open video compression format designed for web use. It's supported by most modern browsers and offers good video quality.
Example:
<video src="videofile.webm" type="video/webm"></video>
OGG Format
OGG (Ogg Theora) is an open video format supported by many browsers. This format offers good video quality and is often used as an alternative to MP4 and WebM.
Example:
<video src="videofile.ogv" type="video/ogg"></video>
Example Using Multiple Formats for Compatibility
To ensure cross-browser compatibility, it's advisable to specify multiple video sources in different formats. The browser will select the first supported format.
<video width="600" controls autoplay muted>
<source src="videofile.mp4" type="video/mp4">
<source src="videofile.webm" type="video/webm">
<source src="videofile.ogv" type="video/ogg">
Your browser does not support the video element.
</video>
GO TO FULL VERSION