Embedding Video (<video>)

The <video> element enables native video playback in web browsers. It's the standard for including videos on your site, offering greater control and accessibility.

Example 1: Basic Video Embed

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

Explanation This example demonstrates the simplest way to embed a video. The src attribute specifies the video file's path, and controls adds browser-provided play/pause, volume, and full-screen options.

Example 2: Video with Poster Image

<video src="my-video.mp4" controls poster="poster-image.jpg"></video>

Explanation The poster attribute displays an image before the video starts playing. This is useful for providing a visual preview or thumbnail for your video content.

Example 3: Autoplay and Muted Video

<video src="my-video.mp4" autoplay muted></video>

Explanation The autoplay attribute makes the video start playing as soon as it's loaded, and muted ensures the audio is off by default, which is often recommended for autoplaying media.

Example 4: Looping Video

<video src="my-video.mp4" controls loop></video>

Explanation Adding the loop attribute will make the video restart automatically once it reaches its end, creating a continuous playback experience.

Example 5: Multiple Video Formats for Compatibility

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

Explanation Using the <source> element within <video> allows you to offer different video formats (e.g., MP4, WebM). The browser will automatically select the first format it supports, ensuring your video plays across various browsers and devices. This improves user experience and reach.

Providing multiple video formats with the <source> element

The <source> element is crucial for cross-browser compatibility, allowing you to specify multiple video files in different formats. The browser will then choose the best supported format.

Example 1: MP4 and WebM Sources

```html <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser does not support HTML5 video. </video>

**Explanation**
This setup ensures that browsers supporting MP4 will play that version, while those preferring WebM will use the WebM source, offering robust cross-browser video delivery.

-----

**Example 2: Adding an Ogg Source**

```html
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
  Please update your browser to view this video.
</video>

Explanation Including an Ogg video source alongside MP4 and WebM maximizes your video's accessibility, catering to a wider range of older or less common browsers that might support the Ogg format.

Example 3: Specifying Dimensions with Sources

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

Explanation Setting width and height attributes on the &lt;video> tag, even with multiple sources, helps reserve space on the page and prevents layout shifts as the video loads.

Example 4: Text Tracks with Multiple Sources

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

Explanation This illustrates how to include a &lt;track> element for subtitles or captions, making your video content more accessible, even when using multiple video formats.

Example 5: Autoplay with Multiple Sources (Muted)

<video autoplay muted>
  <source src="intro.mp4" type="video/mp4">
  <source src="intro.webm" type="video/webm">
</video>

Explanation Combining autoplay and muted with multiple sources ensures a smooth, non-intrusive initial video experience that works across various browsers, as autoplaying unmuted videos can be disruptive.