Source media attribute

HTML DOM Source Object

Definition and usage

media Set or return the value of the media attribute in the <source> element.

<source> media attribute Define the type of media resource (for which media/devices the file is optimized).

Browsers can use the media attribute to determine if they can play the file. If not, they can choose not to download.

HTML Reference Manual:HTML <source> Tag

Example

Return which media/devices the specific file is optimized for:

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

Try it yourself

Syntax

Return the media attribute:

sourceObject.media

Set the media attribute:

sourceObject.media = value

Note:This property can accept multiple values.

Possible operators

Value Description
and Definition AND operator.
not Definition NOT operator.
, Definition OR operator.

Device

Value Description
all Applicable to all devices. Default.
aural Voice synthesizer.
braille Braille feedback device.
handheld Handheld devices (small screen, limited bandwidth).
projection Projector
print Print preview mode/print page.
screen Computer screen.
tty Teletype printers and similar media using a fixed pitch character grid.
tv Television-type devices (low resolution, limited scrolling capability).

Attribute value

Value Description
width

Specify the width of the target display area.

Prefixes "min-" and "max-" can be used.

Example: media="screen and (min-width:500px)"
height

Specify the height of the target display area.

Prefixes "min-" and "max-" can be used.

Example: media="screen and (max-height:700px)"
device-width

Specify the width of the target display/paper.

Prefixes "min-" and "max-" can be used.

Example: media="screen and (device-width:500px)"
device-height

Specify the height of the target display/paper.

Prefixes "min-" and "max-" can be used.

Example: media="screen and (device-height:500px)"
orientation

Specify the orientation of the target display/paper.

Possible values: "portrait" or "landscape".

Example: media="all and (orientation: landscape)"
aspect-ratio

Specify the aspect ratio of the target display area.

Prefixes "min-" and "max-" can be used.

Example: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

Specify the device width to device height ratio of the target display/paper.

Prefixes "min-" and "max-" can be used.

Example: media="screen and (aspect-ratio:16/9)"
color

Specify the number of bits for each color of the target display.

Prefixes "min-" and "max-" can be used.

Example: media="screen and (color:3)"
color-index

Specify the number of colors that the target display can handle.

Prefixes "min-" and "max-" can be used.

Example: media="screen and (min-color-index:256)"
monochrome

Specify the number of bits per pixel in the monochrome frame buffer.

Prefixes "min-" and "max-" can be used.

Example: media="screen and (monochrome:2)"
resolution

Specify the pixel density (dpi or dpcm) of the target display/paper.

Prefixes "min-" and "max-" can be used.

Example: media="print and (resolution:300dpi)"
scan

Specify the scanning method of the television display.

Possible values are "progressive" and "interlace".

Example: media="tv and (scan:interlace)"
grid

Specify whether the output device is a grid or bitmap.

The possible value for grid is "1", otherwise it is "0".

Example: media="handheld and (grid:1)"

Technical Details

Return Value: A string value that represents the type of the media resource.

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

Note:However, no major browser supports the HTML media attribute.

Related Pages

HTML Reference Manual:HTML <source> media attribute

HTML DOM Source Object