HTML Video Tutorial

HTML5 introduced a new element called <video> which allows you to embed videos directly into your web pages. This element supports multiple video formats like MP4, WebM, and Ogg.

How to Embed a Video in HTML

To embed a video in your HTML document, you need to use the <video> element with the src attribute to specify the path to the video file:

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

The controls attribute adds a set of playback controls to the video player, allowing the user to play, pause, and adjust the volume of the video.

Video Formats

It's important to provide your video in multiple formats to ensure compatibility across different browsers:

Format	Description
MP4	The most commonly used video format supported by most browsers.
WebM	An open-source video format developed by Google.
Ogg	A free and open container format maintained by Xiph.Org Foundation.

Video Attributes

The <video> element supports several attributes to customize the video player:

1. controls: Adds playback controls to the video player
2. autoplay: Automatically starts playing the video
3. loop: Repeats the video indefinitely
4. preload: Specifies if and how the video should be loaded when the page loads
5. poster: Displays an image as the video thumbnail

Example

Here's an example of embedding a video with various attributes:

<video src="example.mp4" controls autoplay loop preload="auto" poster="thumbnail.jpg">
  Your browser does not support the video tag.
</video>

In this example, the video will have playback controls, autoplay, loop indefinitely, preload automatically, and display a thumbnail image before playing.

That's all you need to know to embed videos in your HTML documents using the <video> element. Happy coding!