HTML5 Guidelines for Web Developers

72 Chapter 4—Video and Audio

Table 4.1 Attributes of the “video” element (Contd.)

Attribute Value Information

width in CSS pixels Width of video display

height in CSS pixels Height of video display

audio muted Causes the user agent to override the user’s prefer-

ences, if any, and always defaults the video to muted.

If the video element does not have a src attribute, the browser processes one or

more of the source elements contained within the video element. The attributes

src, type, and media are intended for this purpose (see Table 4.2). In turn, if there

is a source element, you must not specify a src attribute for video.

Table 4.2 Attributes of the ”source” element

Attribute Value Information

src url The URL for the video to be played

type mime-type MIME type of the video. You can add a specifi-

cation of the audio and video codec, for exam-

ple, type='video/webm; codecs="vorbis,vp8"'.

If there are several source elements, the brows-

er uses this attribute (among others) to decide

which video is displayed.

media CSS Media Query The output medium for which the video is

intended

The browser uses two criteria to decide which of the existing source elements will

be displayed: the video’s MIME type and, if present, the media attribute in which

you can specify additional limitations in the form of a CSS media query.

For CSS3, media queries were significantly expanded, so you can now have more

complex instructions in addition to familiar keywords like print, screen, hand-

held, or projection. Here is an example:

media="screen and (min-width: 800px)"

This is where it gets interesting for video output, because depending on the brows-

er size, the video can then be offered at different resolutions. Thanks to this trick,

even mobile devices with smaller display screens and slower Internet connections