Open In App

HTML DOM Source media Property

Improve
Improve
Like Article
Like
Save
Share
Report

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 :

HTML DOM Source media Property

Supported Browsers:

  • Google Chrome
  • Opera
  • Safari
  • Firefox
  • Internet Explorer


Last Updated : 02 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads