HTML DOM Source media Property

Last Updated : 02 Feb, 2022

The HTML DOM Source media Property is used to set or return the value of the media attribute of the <source> element. The <source> media attribute is used to accept any valid media query that would normally be defined in a CSS. This attribute can accept several values.

Syntax:

It is used to return the media property.
```
SourceObject.media;
```
It is used to set the media property.
```
SourceObject.media="values";
```

Possible Operators

and: AND operator
not: NOT operator
or: OR operator

DEVICES

all: Suitable for all devices
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: Low resolution or limited scroll ability type devices like Television.

VALUES

width: It is used to target the display area’s width.
height: It is used to target display area’s height
device-width: It is used to Target display or paper’s width.
device-height: It is used to Target display or paper’s height.
orientation: Target display or paper’s orientation.
aspect-ratio Width/height: Ratio of the targeted display area.
device-aspect-ratio: Device-width/device-height ratio of the target display/paper.
color: Bits per color of the target display.
color-index: Number of colors the target display can handle.
monochrome: Bits per pixel in a monochrome frame buffer.
resolution Pixel: density (dpi or dpcm) of the target display/paper.
scan: Scanning method of a tv display.
grid: If the output device is grid or bitmap.

Return Value: It returns a String value, which represents the indented type of the media resource

Example: Below HTML code returns the source media property.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        body { 
            text-align: center; 
        } 
  
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h2>HTML DOM Source media property</h2> 
  
    <audio controls> 
        <source id="mySource" src="gameover.wav" 
                type="audio/mpeg" media="(min-width: 600px)"> 
  
        <source src="gameover.ogg" type="audio/ogg"> 
    </audio> 
    <p>Click the button to get the media of the source file.</p> 
  
    <button onclick="myGeeks()"> 
        Get Media 
    </button> 
  
    <p id="demo"></p> 
  
    <script> 
        function myGeeks() { 
            var x = document.getElementById("mySource").media; 
            document.getElementById("demo").innerHTML = x; 
        } 
    </script> 
</body> 
  
</html>