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>