HTML5 Video Player Elements
Written by Brad MarkleA 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:
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='http://domain.com/video.mp4' controls autoplay> |
| controls |
Determines if controls should be displayed (such as play/pause and volume) <video src='http://domain.com/video.mp4' controls> |
| width / height |
Sets the width and height of the element <video src='http://domain.com/video.mp4' controls width='320' height='240'> |
| loop |
Determines if the video should loop automatically when it is finished playing <video src='http://domain.com/video.mp4' controls loop> |
| mute |
Determines if the video's sound should be muted by default <video src='http://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='http://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='http://domain.com/video.mp4' controls preload="none"> |
HTML 5 Basic syntax
| 1. | What is HTML5? |
| 2. | Can I use HTML5 with my Hosting Account? |
| 3. | Using HTML5 to add videos |
| 4. | HTML5 Video Player Elements |
Latest Questions
Need more Help?
Search
Ask the Community!
Current Customers
| Chat: | Click to Chat Now | E-mail: | support@InMotionHosting.com |
|---|---|---|---|
| Call: | 888-321-HOST (4678) | Ticket: | Submit a Support Ticket |