3.3.3 Adding a Video Clip in Website

This topic explains how to add a video clip to a website using the HTML `<video>` tag, including setting dimensions, controls, and video formats.

Definition

Adding a Video Clip in Website: To add a video clip in a website, the `<video>` tag is used where you can define the clip size and how the clip should be available at the time when the website loads up.

Core Concept

Adding a video to a webpage is like putting a TV screen in a room. Just as you can choose the size of the TV, whether it has a remote control (play/pause buttons), and whether it turns on automatically, the `<video>` tag lets you control the video's size, controls, and playback behavior. The `<video>` tag embeds the video directly into the webpage, and the `<source>` tag tells the browser where to find the video file and what format it is.

Detailed Explanation

The `<video>` Tag

To add a video clip in a website, the `<video>` tag is used where you can define the clip size and how the clip should be available at the time when the website loads up.

Syntax: ```html <video width="..." height="..." controls> <source src="video-file.mp4" type="video/mp4"> </video> ```

Example: Loading a Video Clip in a Website

Line 6 of the code uses a video tag and specifies width and height of the clip in terms of pixels to adjust the size of the video clip. Additionally, the `controls` parameter defines that play/pause and volume controls are enabled when the video loads up. In the next line, the source and type of the video are specified. Though HTML supports many formats, among different browsers the most commonly supported video type is MP4.

Sample Code:

```html <html> <body style="text-align: center"> <h2 style="color: green">Pakistan's First Ever Win in International Football</h2> <p>Congratulations !!!</p> <video width="500px" height="500px" controls> <source src="fifa-win.mp4" type="video/mp4" /> </video> </body> </html> ```

Explanation:

Key Attributes of the `<video>` Tag

The `<source>` Tag

The `<source>` tag specifies the video file and its type. You can include multiple `<source>` tags to provide the video in different formats for different browsers.

Syntax: ```html <source src="video-file.mp4" type="video/mp4"> ```

• `src` = path to the video file.
• `type` = MIME type of the video (e.g., `video/mp4`, `video/webm`, `video/ogg`).
• MP4 is the most commonly supported video type across browsers.

Supported Video Formats

Best Practice: Provide multiple formats using multiple `<source>` tags for maximum compatibility.

Example: ```html <video width="500" height="500" controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogg" type="video/ogg"> Your browser does not support the video tag. </video> ```

Adding a Video Clip with Autoplay

To make the video start playing automatically when the page loads, add the `autoplay` attribute.

Example: ```html <video width="500px" height="500px" controls autoplay> <source src="fifa-win.mp4" type="video/mp4" /> </video> ```

Note: Modern browsers often block autoplay with sound. To autoplay, you may need to add `muted`.

```html <video width="500px" height="500px" controls autoplay muted> <source src="fifa-win.mp4" type="video/mp4" /> </video> ```

Adding a Video Clip with Poster Image

The `poster` attribute shows an image before the video plays.

Example: ```html <video width="500px" height="500px" controls poster="thumbnail.jpg"> <source src="fifa-win.mp4" type="video/mp4" /> </video> ```

Intermediate Level

The `<video>` tag embeds a video player in a webpage. Key attributes include `width` and `height` (dimensions), `controls` (play/pause/volume), `autoplay` (starts automatically), `loop` (repeats), `muted` (no sound), and `poster` (image before playback). The `<source>` tag specifies the video file and format. MP4 is the most widely supported format. You can provide multiple `<source>` tags for different formats (MP4, WebM, Ogg) to ensure compatibility across browsers. The text between `<video>` and `</video>` is fallback content shown if the browser doesn't support the video tag.

Important Points

• - `<video>` tag embeds a video player.
• - `<source>` tag specifies the video file and format.
• - `width` and `height` set dimensions.
• - `controls` adds play/pause/volume controls.
• - `autoplay` starts video automatically (often needs `muted`).
• - `loop` replays the video.
• - `poster` shows an image before playback.
• - MP4 is the most widely supported format.
• - Multiple `<source>` tags provide format fallback.

Remember

• - Video Tag: `<video>`.
• - Source Tag: `<source>`.
• - Controls: `controls`.
• - Autoplay: `autoplay` (use with `muted`).
• - Loop: `loop`.
• - Poster: `poster="image.jpg"`.
• - MP4: Most supported format.
• - Dimensions: `width="500px" height="500px"`.

Common Mistakes

• - Forgetting `controls`: Without it, the user cannot play or pause the video.
• - Using only one format: Provide multiple formats (MP4, WebM, Ogg) for compatibility.
• - Autoplay not working: Modern browsers require `muted` for autoplay.
• - Wrong file path: Ensure the `src` path is correct.
• - Forgetting fallback text: Text between `<video>` tags is shown if the browser doesn't support video.

Quick Revision

The `<video>` tag embeds a video player in a webpage. Use `width` and `height` for dimensions, `controls` for play/pause, `autoplay` for automatic playback (often needs `muted`), `loop` for repetition, and `poster` for a preview image. The `<source>` tag specifies the video file and format; MP4 is the most widely supported. Multiple `<source>` tags provide format fallback for different browsers.

60-Second Revision

• Tag: `<video>`.
• Source: `<source src="..." type="video/mp4">`.
• Controls: `controls`.
• Autoplay: `autoplay` + `muted`.
• Loop: `loop`.
• Poster: `poster="image.jpg"`.
• Formats: MP4 (most supported), WebM, Ogg.
• Dimensions: `width`, `height`.