HTML <source>
media
Attribute
Example
Using the media
attribute:
<source src="movie.ogg" type="video/ogg" media="screen and (min-width:320px)">
Browser Support
Almost all major browsers do not support the media
attribute.
Definition and Usage
The media
attribute specifies the type of media resource (optimized for what kind of media/device).
Browsers use this attribute to determine if they can play the file. If they cannot, they may choose not to download the file.
Note: This attribute can accept multiple values.
Differences Between HTML 4.01 and HTML5
The <source>
tag is new in HTML5.
Syntax
Possible Operators
Value | Description |
---|---|
and | Specifies an AND operator. |
not | Specifies a NOT operator. |
, | Specifies an OR operator. |
Devices
Value | Description |
---|---|
all | Default. Suitable for all devices. |
aural | Speech synthesizers. |
braille | Braille feedback devices. |
handheld | Handheld devices (small screen, limited bandwidth). |
projection | Projectors. |
Print preview mode/print pages. | |
screen | Computer screens. |
tty | Teletypes and similar media using a fixed-pitch character grid. |
tv | Television-type devices (low resolution, limited scrollability). |
Values
Value | Description |
---|---|
width | Specifies the width of the target display area. <br>Prefixes "min-" and "max-" can be used. <br>Example: media="screen and (min-width:500px)" |
height | Specifies the height of the target display area. <br>Prefixes "min-" and "max-" can be used. <br>Example: media="screen and (max-height:700px)" |
device-width | Specifies the width of the target display/paper. <br>Prefixes "min-" and "max-" can be used. <br>Example: media="screen and (device-width:500px)" |
device-height | Specifies the height of the target display/paper. <br>Prefixes "min-" and "max-" can be used. <br>Example: media="screen and (device-height:500px)" |
orientation | Specifies the orientation of the target display/paper. <br>Possible values: "portrait" or "landscape". <br>Example: media="all and (orientation: landscape)" |
aspect-ratio | Specifies the width/height ratio of the target display area. <br>Prefixes "min-" and "max-" can be used. <br>Example: media="screen and (aspect-ratio:16/9)" |
device-aspect-ratio | Specifies the device-width/device-height ratio of the target display/paper. <br>Prefixes "min-" and "max-" can be used. <br>Example: media="screen and (aspect-ratio:16/9)" |
color | Specifies the bits/color of the target display. <br>Prefixes "min-" and "max-" can be used. <br>Example: media="screen and (color:3)" |
color-index | Specifies the number of colors the target display can handle. <br>Prefixes "min-" and "max-" can be used. <br>Example: media="screen and (min-color-index:256)" |
monochrome | Specifies the bits/pixel in a monochrome frame buffer. <br>Prefixes "min-" and "max-" can be used. <br>Example: media="screen and (monochrome:2)" |
resolution | Specifies the pixel density of the target display/paper (dpi or dpcm). <br>Prefixes "min-" and "max-" can be used. <br>Example: media="print and (resolution:300dpi)" |
scan | Specifies the scanning method for TV displays. <br>Possible values: "progressive" and "interlace". <br>Example: media="tv and (scan:interlace)" |
grid | Specifies whether the output device is a grid or bitmap. <br>Possible values: "1" for grid, otherwise "0". <br>Example: media="handheld and (grid:1)" |