Source media Property - Javascript DOM HTML Element

Javascript examples for DOM HTML Element:Source

  1. HOME
  2. Javascript
  3. DOM HTML Element
  4. Source

Description

The media property sets or gets the media attribute in a <source> element, which identifies the type of media resource.

Set the media property:

This property can accept several values.

Possible Operators

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

Devices

Value Description
allfor all devices. Default
aural Speech synthesizers
brailleBraille 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 PrefixExample
width width of the targeted display area. "min-" and "max-" prefixes can be used. media="screen and (min-width:500px)"
height height of the?targeted display area."min-" and "max-" prefixes can be used.media="screen and (max-height:700px)"
device-widthwidth of the target display/paper. "min-" and "max-" prefixes can be used. media="screen and (device-width:500px)"
device-height height of the target display/paper. "min-" and "max-" prefixes can be used. media="screen and (device-height:500px)"
orientation orientation of the target display/paper. Possible values: "portrait" or "landscape" media="all and (orientation: landscape)"
aspect-ratiowidth/height ratio of the targeted display area. "min-" and "max-" prefixes can be used.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. media="screen and (aspect-ratio:16/9)"
color bits per color of target display. "min-" and "max-" prefixes can be used. media="screen and (color:3)"
color-index number of colors the target display can handle."min-" and "max-" prefixes can be used. media="screen and (min-color-index:256)"
monochrome bits per pixel in a monochrome frame buffer. "min-" and "max-" prefixes can be used.media="screen and (monochrome:2)"
resolution pixel density (dpi or dpcm) of the target display/paper. "min-" and "max-" prefixes can be used. media="print and (resolution:300dpi)"
scanscanning method of a tv display. Possible values are "progressive" and "interlace".media="tv and (scan:interlace)"
gridif the output device is grid or bitmap. Possible values are "1" for grid, and "0" otherwise. media="handheld and (grid:1)"

Return Value

A String, representing the indented type of the media resource

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

Demo Code

ResultView the demo 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>//  www.  ja v a 2 s  . c  o m

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

Related Tutorials