HTML <source> mediaAttribute
Examples
Use of the media attribute:
<source src="movie.ogg" type="video/ogg"
media="screen and (min-width:320px)">
Try it yourself »
Browser Support
Almost all mainstream browsers do not support the media attribute.
Definition and Usage
The media attribute specifies the type of media resource (what media/device the file is optimized for).
The browser uses this attribute to determine whether it can play the file. If it cannot, it 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
<source media="value">
Possible Operators
| Value | Description |
|---|---|
| and | Defines an AND operator. |
| not | Defines a NOT operator. |
| , | Defines an OR operator. |
Devices
| Value | Description |
|---|---|
| all | Default. Applies to all devices. |
| aural | Speech synthesizers. |
| braille | Braille feedback devices. |
| handheld | Handheld devices (small screens, limited bandwidth). |
| projection | Projectors. |
| Print preview mode / printed pages. | |
| screen | Computer screens. |
| tty | Teletypes and similar media using a grid of monospaced characters. |
| tv | Television-type devices (low resolution, limited scrolling capability). |
Value
| Value | Description |
|---|---|
| width | Defines the width of the target display area. The "min-" and "max-" prefixes can be used. Example: media="screen and (min-width:500px)" |
| height | Defines the height of the target display area. The "min-" and "max-" prefixes can be used. Example: media="screen and (max-height:700px)" |
| device-width | Defines the width of the target display/paper. The "min-" and "max-" prefixes can be used. Example: media="screen and (device-width:500px)" |
| device-height | Defines the height of the target display/paper. The "min-" and "max-" prefixes can be used. Example: media="screen and (device-height:500px)" |
| orientation | Defines the orientation of the target display/paper. Possible values: "portrait" or "landscape". Example: media="all and (orientation: landscape)" |
| aspect-ratio | Defines the width/height ratio of the target display area. The "min-" and "max-" prefixes can be used. Example: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | Defines the device-width/device-height ratio of the target display/paper. The "min-" and "max-" prefixes can be used. Example: media="screen and (aspect-ratio:16/9)" |
| color | Defines the bits/color of the target display. The "min-" and "max-" prefixes can be used. Example: media="screen and (color:3)" |
| color-index | Defines the number of colors the target display can handle. The "min-" and "max-" prefixes can be used. Example: media="screen and (min-color-index:256)" |
| monochrome | Defines the bits/pixel in a monochrome frame buffer. The "min-" and "max-" prefixes can be used. Example: media="screen and (monochrome:2)" |
| resolution | Defines the pixel density of the target display/paper (dpi or dpcm). The "min-" and "max-" prefixes can be used. Example: media="print and (resolution:300dpi)" |
| scan | Defines the scanning method of a tv display. Possible values: "progressive" and "interlace". Example: media="tv and (scan:interlace)" |
| grid | Defines whether the output device is a grid or a bitmap. Possible values: "1" for grid, otherwise "0". Example: media="handheld and (grid:1)" |
HTML <source> Tag Other Extensions