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)" |