5. Other Attributes

Several other attributes can be applied to the <video> to make it behave as intended.

100% Complete (success)

<video src="#" poster="#" width="..." height="..." preload controls ></video>

Multiple-Source

100% Complete (success)

<video poster="#" width="..." height="..." preload controls >
<source src="#" type="">
<source src="#" type="">
</video>

preload

The preload attribute takes one of three values and tells the browser how to load the video file if autoplay is absent.

  • preload="none" - tells the browser to do nothing until the user tells it to do so.
  • preload="auto" - tells the browser to download the media file when the page loads.
  • preload="metadata" - tells the browser only to collect metadata, such as size and length.

controls

The controls attribute is passed alone and does not require a trailing value. This attribute indicates whether the player should display controls. If you do not use this attribute, no controls will be shown by default.

loop

The loop attribute, when present, tells the browser to loop the file.

autoplay

Like the controls attribute, the autoplay attribute is included as a single word or not at all. When present, this attribute tells the browser to start playing the file on load.

Note: This is considered poor practice, and in most cases, it is better to let the user choose whether to start the video or not.