Javascript Reference - HTML DOM Source media Property








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

Browser Support

media No No No No No

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 Set an AND operator
not Set a NOT operator
, Set an OR operator




Devices

Value Description
all Suitable for all devices. This is default
aural Speech synthesizers
braille Braille feedback devices
handheld Handheld devices
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




Values

Value Description
width Set the width of the display area.
'min-' and 'max-' prefixes can be used.
Example: media='screen and (min-width:500px)'
height Set the height of the display area.
'min-' and 'max-' prefixes can be used.
Example: media='screen and (max-height:700px)'
device-width Set the width of the display/paper.
'min-' and 'max-' prefixes can be used.
Example: media='screen and (device-width:500px)'
device-height Set the height of the display/paper.
'min-' and 'max-' prefixes can be used.
Example: media='screen and (device-height:500px)'
orientation Set the orientation of the display/paper.
Possible values: 'portrait' or 'landscape'
Example: media='all and (orientation: landscape)'
aspect-ratio Set the width/height ratio of the display area.
'min-' and 'max-' prefixes can be used.
Example: media='screen and (aspect-ratio:16/9)'
device-aspect-ratio Set the device-width/device-height ratio of the display/paper.
'min-' and 'max-' prefixes can be used.
Example: media='screen and (aspect-ratio:16/9)'
color Set the bits per color of display.
'min-' and 'max-' prefixes can be used.
Example: media='screen and (color:3)'
color-index Set the number of colors the display can handle.
'min-' and 'max-' prefixes can be used.
Example: media='screen and (min-color-index:256)'
monochrome Set the bits per pixel in a monochrome frame buffer.
'min-' and 'max-' prefixes can be used.
Example: media='screen and (monochrome:2)'
resolution Set the pixel density in dpi or dpcm of the display/paper.
'min-' and 'max-' prefixes can be used.
Example: media='print and (resolution:300dpi)'
scan Set scanning method of a tv display.
Possible values are 'progressive' and 'interlace'.
Example: media='tv and (scan:interlace)'
grid Set if the output device is grid or bitmap.
Possible values are '1' for grid, and '0' otherwise.
Example: media='handheld and (grid:1)'

Return Value

A String type value representing the indented type of the media resource.

Example

The following code shows how to return what media/device a specific file is optimized for.


<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
  <source id="mySource" src="NotExist.mp4" type="video/mp4" media="screen and (min-width:320px)">
  <source src="NotExist.ogg" type="video/ogg" media="screen and (min-width:320px)">
</video><!--from  w w  w  . j  a  va 2  s  .com-->
<p id="demo"></p>
<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    var x = document.getElementById("mySource").media;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows: