The video element is used to embed video content in web pages. It allows you to include video files directly into your HTML documents and provides several attributes to control video playback.
The video element comes with several attributes to help you control the playback and appearance of your video content:
Attribute | Description | Example |
---|---|---|
src | Specifies the URL of the video file. |
Try yourself
|
controls | Specifies that video controls should be displayed (such as a play/pause button). |
Try yourself
|
autoplay | Specifies that the video will start playing as soon as it is ready. |
Try yourself
|
loop | Specifies that the video will start over again, every time it is finished. |
Try yourself
|
poster | Specifies an image to be shown while the video is downloading, or until the user hits the play button. |
Try yourself
|
Below are examples of how you can use the video element in your HTML documents:
Example: Basic Video
<video controls>
<source src="/media/video/sample_video_720x480_2mb.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
This example shows a video element with basic controls for play, pause, and volume adjustment.
<video src="/media/video/sample_video_720x480_2mb.mp4" poster="/images/common/background.jpeg" controls></video>
This example shows a video element with a poster image that is displayed before the video starts playing.
<video src="/media/video/sample_video_720x480_2mb.mp4" autoplay></video>
This example shows a video element that starts playing automatically when the page loads.
Here are some important notes and best practices for using the video element: