Attributes of the video and audio elements

Attributes of the <video> element
Name Description
src Source of the video.
width and height Size of the video.

If unspecified, the default width and height of the video will be used. If you specify one dimension but not the other, the browser will adjust the size of the unspecified dimension to preserve the aspect ratio of the video.

controls If this boolean attribute is present, the browser displays its own controls for video playback and volume.
poster This attribute allows you to specify an image that the browser will use while video is being downloaded, or until the user starts playing the video.

If this attribute is not specified, the first frame of the video will be used instead.

autoplay This attribute asks the browser to start playing the video automatically as soon as the page is ready.
preload The preload attribute is used when autoplay is not used. It tells the browser what to do before a user plays a video. This attribute is a hint – the browser may ignore it. While autoplay and preload are mutually exclusive, if both are present, then preload is ignored.

Possible values:

  • none: do nothing. This saves bandwidth, no video will be downloaded in background before a user or a call to the play() method starts playing the video.
  • metadata: download metadata, such as length of the video or its format.
  • auto (default value): the browser will decide. This will depend on the implementation, and on the kind of connection: wifi, 3G, data roaming etc.
loop Another boolean attribute that indicates to play the video in loop mode (and it starts again when finished).

 

ATTRIBUTES OF THE <AUDIO> ELEMENT

The attributes you can use with the <audio> element are a subset of those available for the <video> element. Except for the poster attribute, they are all recognized and have the expected meanings:

    • src: source of an audio stream.
    • controls: if this attribute is present, the browser displays its own controls for audio playback and volume.
    • autoplay: tells the browser to start playing the audio stream automatically as soon as the page is ready – please read details in the above table.
    • preload: tells the browser what to do before a user plays a sound – please read details in the above table.
    • loop:  indicates to play the audio stream in loop mode (start again when finished).

As with the <video> element, the same best practice in regard to preload and autoplay attributes should be followed.

Best practice: do not use autoplay and add preload=”none” if you target mobile devices or if you have multiple audio/video on the same page. For example, this page  contains many audio elements and it does not make sense to have them preload or autoplay.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s