Javascript DOM HTML Source media Property get

Introduction

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

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

Click the button to return the value of the media attribute of the media resource.

View in separate window 

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
  <source id="mySource" src="movie.mp4" type="video/mp4" media="screen and (min-width:320px)">
  <source src="movie.ogg" type="video/ogg" media="screen and (min-width:320px)">
Your browser does not support the video tag.
</video>/*from   w w w  . ja  va2 s.  c  om*/

<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 media property sets or gets the media attribute in a <source> element.

The media attribute sets the type of media resource.

The HTML media attribute is NOT supported in any of the major browsers.

Possible Operators:

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

Devices

Value Description
allSuitable for all devices. Default
aural Speech synthesizers
brailleBraille feedback devices
handheld Handheld devices
projection Projectors
print Print preview mode/printed pages
screen Computer screens
ttyTeletypes and similar media using a fixed-pitch character grid
tv Television type devices

Values

Value
 Description
width


 width of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-width:500px)"
height


 height of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (max-height:700px)"
device-width


 width of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="screen and (device-width:500px)"
device-height


 height of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="screen and (device-height:500px)"
orientation


 orientation of the target display/paper.
Possible values: "portrait" or "landscape"
Example: media="all and (orientation: landscape)"
aspect-ratio


 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


 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


 bits per color of target display.
"min-" and "max-" prefixes can be used.
Example: media="screen and (color:3)"
color-index


 number of colors the target display can handle.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-color-index:256)"
monochrome


 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)"

The media property accepts and returns a String representing the indented type of the media resource.




PreviousNext

Related