HTML Video

The HTML <video> element is used to embed and play video content directly within a web page. It provides a native way to display videos without the need for external plugins. Here’s an example of how to use the <video> element:

<video src="video-file.mp4" controls></video>

Let’s break down the code:

• <video>: This is the opening tag of the <video> element.
• src="video-file.mp4": The src attribute specifies the URL or file path of the video file you want to play. Replace "video-file.mp4" with the actual path to your video file. It’s recommended to provide the video in multiple formats (e.g., MP4, WebM, Ogg) to ensure cross-browser compatibility.
• controls: The controls attribute adds a set of playback controls to the video player, including play/pause, volume control, progress bar, and fullscreen button.

You can further customize the video player by adding additional attributes and elements:

<video src="video-file.mp4" controls autoplay loop>
  Your browser does not support the video element.
</video>

In this example, we’ve added the following attributes:

• autoplay: The autoplay attribute automatically starts playing the video as soon as the page loads.
• loop: The loop attribute causes the video to repeat indefinitely.

You can also provide multiple video sources using the <source> element within the <video> element to support different video formats:

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

By including multiple <source> elements with different video formats, the browser will automatically choose the appropriate source based on its compatibility.

Remember to include fallback content between the opening and closing <video> tags for browsers that do not support the <video> element. This content will be displayed if the browser does not support video playback:

<video controls>
  <source src="video-file.mp4" type="video/mp4">
  <p>Your browser does not support the video element.</p>
</video>

By using the <video> element and its associated attributes, you can easily embed and control video content in your HTML web pages.