A new element in HTML5 is the video element. The video element can be used to display a video in the browser, and it is intended to replace the object element.
Example Usage of the HTML5 Video Element
The following example code can be used to play a video on your webpage using the HTML5 video element:
<video src='https://domain.com/video.mp4' controls>
Your browser does not support the HTML5 Video Element.
</video>
For more information on getting the HTML5 video to work in all browsers, please see the previous tutorial on Using HTML5 to add videos.
Optional HTML5 Video Attributes
| Attribute | Description and Example Usage |
|---|---|
| autoplay |
Determines if the video will play automatically <video src='https://domain.com/video.mp4' controls autoplay>
|
| controls |
Determines if controls should be displayed (such as play/pause and volume) <video src='https://domain.com/video.mp4' controls>
|
| width / height |
Sets the width and height of the element <video src='https://domain.com/video.mp4' controls width='320' height='240'>
|
| loop |
Determines if the video should loop automatically when it is finished playing <video src='https://domain.com/video.mp4' controls loop>
|
| mute |
Determines if the video’s sound should be muted by default <video src='https://domain.com/video.mp4' controls muted>
|
| poster |
Allows you to set an image to load. This will show while the video is downloading and before the user presses play. <video src='https://domain.com/video.mp4' controls poster='/url/to/image.gif'>
|
| preload |
Specifies if the video should begin to download automatically when the page is loaded <video src='https://domain.com/video.mp4' controls preload="none">
|