The HTML5 video player has most of the same options as the HTML5 audio player. The first attribute to consider, preload, is likely even more important when it comes to videos than with audio. As video files are often a combination of moving imagery and an audio track, their file size can bloat much faster. We need to remember that many website viewers today are browsing on their mobile devices. This can mean both slower connections and their data burning up to run a video.
The decision comes down to how important the video is to the page, and how efficiently you'd like the page to run. If a video's preload is set to auto, it will download most of the data, which may slow the page's loading time, yet the video will be ready once the user decides to start it. But on the other hand, a preloading setting of metadata or none will only dig into the user's data or loading time if they choose to watch the video.
| Preload Values | |
| auto | This is the default setting, and the behavior taken if no preload attribute is included. The browser will download part or all of a file to prepare it for use. |
| metadata | Only kilobytes-worth of the file will download just to give the user some basic information such as the file's time length. |
| none | The browser will not download any of the file. The user will need to click play to initiate the file download. |
The remaining attributes below determine other behaviors or features of the video player. They are also each Boolean values, meaning if they are applied, that feature is turned on. They do not need to be set equal to a value like normal attributes, because they're either there, or they're not—on or off.
|
<video width="320px" height="240px" controls> <source src="file.mp4" type="video/mpeg"> </video> |
| Boolean Attributes | |
| autoplay | The video player will start playing its file once enough of the data is loaded. This attribute automatically sets the preload attribute to auto. |
| controls | This is the most typically used player attribute. This attribute displays the player's video controls, which will usually include the play button, pause, a slider for the time position, and a volume adjuster. |
| loop | The video will start over again once it reaches the end. |
| muted | This indicates that the video will initially be set to mute. |
