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>
|
Output :
Supported Browsers:
- Google Chrome
- Opera
- Safari
- Firefox
- Internet Explorer