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 >w3wiki</ 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 = "myBeginner()" > Get Media </ button > < p id = "demo" ></ p > < script > function myBeginner() { var x = document.getElementById("mySource").media; document.getElementById("demo").innerHTML = x; } </ script > </ body > </ html > |
Output :
Supported Browsers:
- Google Chrome
- Opera
- Safari
- Firefox
- Internet Explorer
Contact Us