HTML - Video

The HTML <video> element is used to embed video content in a web page. It supports various attributes that allow you to control the playback and appearance of the video player. Here's an example of using the <video> tag with some commonly used attributes:

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

In the example above, we have the following attributes:

  • src: Specifies the URL of the video file to be played. You can provide the file path or a URL to the video file.
  • controls: Enables the default video controls (play, pause, volume control, etc.) to be displayed in the browser. Users can interact with these controls to control playback.
  • autoplay: Starts playing the video automatically when the page loads. However, note that autoplay behavior is subject to browser restrictions and may require user interaction.
  • loop: Causes the video to repeat playback indefinitely.
  • preload: Specifies how the browser should load the video file. The value "auto" indicates that the browser should determine the best strategy for preloading the video.

The <video> element allows fallback content to be displayed in browsers that do not support the video element. In the example above, the text "Your browser does not support the video tag." will be shown in browsers that don't support <video>.

Additionally, you can include multiple <source> elements within the <video> tag to provide alternative video formats. This ensures compatibility across different browsers that support different video formats. Here's an example:

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

In this case, the <source> elements specify different video file formats (MP4 and WebM) with their corresponding MIME types. The browser will try to play the video in the first supported format.

Feel free to replace "video-file.mp4" and "video-file.webm" with the actual URLs or file paths to your video files.