Skip to main content

HTML <video> Tag

The HTML <video> element is used to embed video content in an HTML document. It allows web developers to include video files directly on their websites, rather than linking to an external video hosting service like YouTube or Vimeo. This can be useful for self-hosting videos, or for creating a more seamless and integrated user experience.

To use the <video> element, you need to specify the source of the video file using the src attribute. You can also specify multiple sources using the <source> element, which can be useful for providing videos in different formats to ensure compatibility with different browsers.

Here is an example of how to use the <video> element to embed a video file on a webpage:

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

This will embed the video file myvideo.mp4 on the webpage, and include controls for the user to play, pause, and adjust the volume of the video.

You can also customize the appearance and behavior of the video player using various attributes and elements. For example, you can use the poster attribute to specify an image to be displayed before the video starts playing, and the height and width attributes to specify the size of the player.

Here is an example of a more advanced <video> element, with multiple sources and custom poster and player size:

<pre>
<video poster="myposter.jpg" controls width="640" height="360">
<source src="myvideo.mp4" type="video/mp4">
<source src="myvideo.webm" type="video/webm">
<p>Sorry, your browser doesn't support embedded videos.</p>
</video>
</pre>

In this example, the video player will display the image myposter.jpg before the video starts playing, and will be 640 pixels wide and 360 pixels tall. It will also provide controls for the user to interact with the video. The <source> elements allow the video to be provided in two different formats (MP4 and WebM), which can improve compatibility with different browsers. Finally, the <p> element provides a fallback message for browsers that don't support the <video> element.

There are many other attributes and elements available for customizing the <video> element, including options for autoplay, looping, and preloading.

The controls attribute adds the default video player controls to the web page, such as play, pause, and volume controls.

Here are some additional attributes that can be used with the <video> tag:

  • autoplay: Automatically starts playing the video file when the page loads.
  • loop: Loops the video file when it reaches the end.
  • muted: Mutes the video file by default.
  • preload: Specifies whether or not the video file should be preloaded.
  • poster: Specifies an image to be shown while the video is loading or when the video is paused.

Here's an example of a <video> tag with multiple attributes:

<video src="video.mp4" controls autoplay loop muted poster="poster.jpg">
	Your browser does not support the video element.
</video>

You can also use JavaScript to control the video player, such as playing, pausing, and setting the volume of the video file. Here's an example of using JavaScript to play the video file when a button is clicked:

<video id="myVideo" src="video.mp4"></video>
<button onclick="document.getElementById('myVideo').play()">Play</button>
<button onclick="document.getElementById('myVideo').pause()">Pause</button>

That's a brief overview of the HTML <video> tag and some of its attributes and uses. You can use it to add video files to your web pages and control them with JavaScript.