How to embed Video element in HTML? Why we need multiple source elements? 041

 How to embed Video element in HTML? Why we need multiple source elements?

You can embed a video in HTML using the <video> element. This element provides a standardized way to display video content on web pages. Here's how it works:

Basic structure:

HTML

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Explanation:

• The <video> element defines the video container.

• width and height attributes specify the desired display size.

• The controls attribute adds playback controls like play, pause, volume, etc.

• Inside the <video> element, one or more <source> elements are required.

• Each <source> element specifies a different video source file.

• The src attribute defines the path to the video file.

• The type attribute specifies the MIME type of the video format (e.g., video/mp4, video/ogg).

Why multiple source elements?

There are two main reasons to use multiple <source> elements:

1. Browser compatibility: Different browsers support different video formats. By providing multiple sources with different formats (e.g., MP4, WebM, Ogg), you ensure that the video can be played by the widest range of users, regardless of their browser.

2. Adaptive bitrate streaming: Modern browsers can adapt the video quality based on the user's internet connection speed. By providing multiple sources with different bitrates (e.g., high, medium, low), the browser can choose the version that best suits the available bandwidth, providing a smooth playback experience.

Additional points:

• You can use the poster attribute on the <video> element to specify an image to display before the video starts playing.

• The <video> element also supports features like captions, subtitles, and full-screen mode.

• Consider using a video hosting platform like YouTube or Vimeo for easier embedding and wider reach.

By understanding how the <video> element works and effectively using multiple <source> elements, you can ensure your videos are accessible to a wider audience and provide a seamless playback experience for your users.

Sources

1. https://github.com/yasmeen/snapnews