5.3 Video (video)

Objectives

• Understand the basic structure and usage of the <video> element in HTML.
• Utilize various attributes to control video playback.
• Embed multiple video sources for better browser compatibility.
• Integrate video content effectively into your web projects.
• Apply practical knowledge through exercises to reinforce learning.

Introduction to the <video> Element

The <video> element in HTML is used to embed video content in a webpage. It supports various video formats and provides attributes and methods to control the playback of video files. Video elements can enhance the user experience by adding visual content, tutorials, or any other dynamic visual elements.

Example

<video controls>
  <source src="path/to/video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

In this example, the controls attribute adds playback controls like play, pause, and volume to the video element.

Attributes of <video>

The <video> element comes with several attributes that allow you to control its behavior:

• src: Specifies the URL of the video file.
• controls: Adds video playback controls (play, pause, volume).
• autoplay: Starts playing the video automatically when the page loads.
• loop: Loops the video playback when it reaches the end.
• muted: Mutes the video by default.
• preload: Specifies how the video file should be loaded when the page loads. It can have values like "auto", "metadata", or "none".
• poster: Specifies an image to be shown while the video is downloading or until the user hits the play button.
• width and height: Sets the width and height of the video player.

Example with Attributes

<video controls autoplay loop muted preload="auto" poster="path/to/poster.jpg" width="640" height="360">
  <source src="path/to/video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

In this example, the video starts playing automatically, loops continuously, is muted by default, preloads fully when the page loads, and displays a poster image before playback starts.

Multiple Video Sources

To provide better compatibility across different browsers, it is a good practice to include multiple video sources. This ensures that if one format is not supported, another format will be used.

Example:

<video controls>
  <source src="path/to/video.mp4" type="video/mp4">
  <source src="path/to/video.ogg" type="video/ogg">
  Your browser does not support the video element.
</video>

In this example, the browser will use the first supported video format it encounters.

Fun Fact

Why is the <video> element named <video>? The term "video" is derived from the Latin word "videre," which means "to see." This perfectly describes the element's function—to enable users to see visual content on a webpage.

Exercises

1. Create a basic video player using the <video> element with controls and a source file.

2. Modify your video player to start playing automatically when the page loads.

3. Add the loop attribute to your video player and test its functionality.

4. Provide multiple video sources to ensure compatibility across different browsers.

5. Add a poster image to your video player that displays before the video starts playing.

Summary

• The <video> element is used to embed video content in HTML.
• Various attributes like src, controls, autoplay, loop, muted, preload, poster, width, and height enhance the functionality of the <video> element.
• Providing multiple video sources ensures better compatibility across different browsers.
• Video elements can significantly enhance user experience by integrating visual content seamlessly into web projects.

By practicing these exercises and understanding the attributes, you'll be well-equipped to embed and manage video content on your website effectively. Happy coding!