Source media Property

Example

Return what media/device a specific file is optimized for:

var x = document.getElementById("mySource").media;

Description

The media property sets or returns the value of the media attribute in a <source> element.

The media attribute specifies the type of media resource (what media/device the file is optimized for).

The browser can use the media attribute to determine whether it can play the file or not. If it cannot, it can choose not to download it.

Browser Support

Property
media	Yes	Yes	Yes	Yes	Yes

Note: The HTML media attribute however, is NOT supported in any of the major browsers.

Syntax

Return the media property:

sourceObject.media

Set the media property:

sourceObject.media = value

Note: This property can accept several values.

Possible Operators

Value	Description
and	Specifies an AND operator
not	Specifies a NOT operator
,	Specifies an OR operator

Devices

Value	Description
all	Suitable for all devices. This is default
aural	Speech synthesizers
braille	Braille feedback devices
handheld	Handheld devices (small screen, limited bandwidth)
projection	Projectors
print	Print preview mode/printed pages
screen	Computer screens
tty	Teletypes and similar media using a fixed-pitch character grid
tv	Television type devices (low resolution, limited scroll ability)

Values

Value	Description
width	Specifies the width of the targeted display area. "min-" and "max-" prefixes can be used. Example: media="screen and (min-width:500px)"
height	Specifies the height of the targeted display area. "min-" and "max-" prefixes can be used. Example: media="screen and (max-height:700px)"
device-width	Specifies the width of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="screen and (device-width:500px)"
device-height	Specifies the height of the target display/paper. "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 targeted display area. "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. "min-" and "max-" prefixes can be used. Example: media="screen and (aspect-ratio:16/9)"
color	Specifies the bits per color of target display. "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. "min-" and "max-" prefixes can be used. Example: media="screen and (min-color-index:256)"
monochrome	Specifies the bits per pixel in a monochrome frame buffer. "min-" and "max-" prefixes can be used. Example: media="screen and (monochrome:2)"
resolution	Specifies the pixel density (dpi or dpcm) of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="print and (resolution:300dpi)"
scan	Specifies scanning method of a tv display. Possible values are "progressive" and "interlace". Example: media="tv and (scan:interlace)"
grid	Specifies if the output device is grid or bitmap. Possible values are "1" for grid, and "0" otherwise. Example: media="handheld and (grid:1)"

Technical Details

Return Value:	A String, representing the indented type of the media resource

HTML reference: HTML <source> media attribute

❮ Source Object