5. Other Attributes

There are several other attributes that 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 not present.

  • preload="none" - tells the browser to do nothing until told to do so by the user.
  • preload="auto" - tells the browser to download the media file when the page loads.
  • preload="metadata" - tells the browser to only 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.