What is HTML5 Video? 🎥

• HTML5 introduced native support for embedding video content directly into web pages using the <video> element.

• Unlike previous versions of HTML, which required third-party plugins like Flash, HTML5 allows videos to be played directly in the browser without additional software.

The <video> Element

Basic Structure: 📹

• The <video> element is used to embed video files in a web page.

• It includes various attributes to control how the video is displayed and interacts with users.

Example:

<video controls>
  <source src="movie.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

Explanation: 🛠️

• <video controls>: The controls attribute adds play, pause, volume, and other controls to the video.

• <source src="movie.mp4" type="video/mp4">: Specifies the video file and its format.

• The text "Your browser does not support the video tag." is shown if the browser doesn't support the video element.

Key Attributes of the <video> Element

src (Source): 🌐

• Specifies the URL of the video file. It can be included directly in the <video> tag or within a <source> tag.

Example:

<video src="movie.mp4" controls></video>

controls: 🎛️

• Adds built-in controls like play, pause, and volume to the video player.

autoplay: ▶️

• Automatically starts playing the video as soon as it is loaded. Note that autoplay videos often start muted.

<video src="movie.mp4" autoplay muted></video>

loop: 🔄

• Causes the video to play repeatedly (loop).

<video src="movie.mp4" loop controls></video>

muted: 🔇

• Starts the video with the sound turned off.

poster: 🖼️

• Specifies an image to be shown while the video is downloading or until the user hits the play button.

Example:

<video src="movie.mp4" poster="thumbnail.jpg" controls></video>

Video Formats and Compatibility

Common Video Formats: 📂

• MP4: Most widely supported format, works in almost all modern browsers.

• WebM: Designed for the web, supported by most modern browsers.

• Ogg: Another open format, supported by many browsers.

Providing Multiple Formats: 📄

• To ensure your video plays across all browsers, it's a good practice to provide multiple video formats.

Example:

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

Accessibility Considerations

Text Tracks: 📝

• Use the <track> element to provide subtitles, captions, or other text-based information.

Example:

<video controls>
  <source src="movie.mp4" type="video/mp4" />
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" />
</video>

Styling the Video Element

Basic Styling with CSS: 🎨

• You can apply CSS to style the video element, just like any other HTML element.

//CSS
<style>
  video {
    width: 100%;
    max-width: 600px;
    border: 2px solid #ccc;
    border-radius: 8px;
  }
</style>
<video src="movie.mp4" controls></video>