HTML DOM Source media Property
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
Last Updated :
02 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...