Source mediaProperty
Source ObjectExamples
Returns what media/device the specified file is optimized for:
var x = document.getElementById("mySource").media;
xThe output result is:
screen and (min-width:320px)
Try it yourself »
Definition and Usage
The media property sets or returns the value of the media attribute in <source>.
The media attribute specifies the type of media resource (what media/device the file is optimized for).
The browser uses the media attribute to determine whether it can play the file. If it cannot, it may choose not to download the file.
Note:The <source> element is new in HTML5.
Browser Support
All major browsers support the media property.
Note:Almost all major browsers do not support the media attribute.
Syntax
Return the media property:
sourceObject.media
Set the media property:
sourceObject.media=value
Note:This property can accept multiple values.
Possible Operators
| Value | Description |
|---|---|
| and | Specifies an AND operator. |
| not | Specifies a NOT operator. |
| , | Specifies 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 | Teletypewriters and similar media that use monospaced character grids. |
| tv | Television-type devices (low resolution, limited scrolling capability). |
Value
| Value | Description |
|---|---|
| width | Specifies the width of the target display area. The "min-" and "max-" prefixes can be used. Example: media="screen and (min-width:500px)" |
| height | Specifies the height of the target display area. The "min-" and "max-" prefixes can be used. Example: media="screen and (max-height:700px)" |
| device-width | Specifies the width of the target display/paper. The "min-" and "max-" prefixes can be used. Example: media="screen and (device-width:500px)" |
| device-height | Specifies the height of the target display/paper. The "min-" and "max-" prefixes can be used. Example: media="screen and (device-height:500px)" |
| orientation | Specifies the orientation of the target display/paper. Possible values: "portrait" or "landscape". Example: media="all and (orientation: landscape)" |
| aspect-ratio | Specifies 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 | Specifies 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 | Specifies the bits/color of the target display. The "min-" and "max-" prefixes can be used. Example: media="screen and (color:3)" |
| color-index | Specifies 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 | Specifies the bits/pixel in a monochrome frame buffer. The "min-" and "max-" prefixes can be used. Example: media="screen and (monochrome:2)" |
| resolution | Specifies 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 | Specifies the scanning method of tv displays. Possible values: "progressive" and "interlace". Example: media="tv and (scan:interlace)" |
| grid | Specifies whether the output device is a grid or bitmap. Possible values: "1" for grid, otherwise "0". Example: media="handheld and (grid:1)" |
Technical Details
| Return value: | A string representing the type of media resource. |
|---|
Related Articles
HTML Reference Manual:HTML <source> media attribute
Other Extensions