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"> |