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