Source object property media in Javascript

The source object property media used to set and retrieve the value of the media attribute in a source element. It specifies the type of media resource. It returns the indented type of the media resource.

Syntax

 1 <source>.media // to retrieve
 2 <source>.media = <value> // to set

source : A source element object to set and retrieve media property

value : It specifies the value of the source element

Possible values

1. width : It specifies the width of the targeted display area2. height : It specifies the height of the targeted display area and can be prefix with min or max3. device-width : It specifies the width of the target display/paper and can be prefix with min or max4. device-height : It pecifies the height of the target display/paper and can be prefix with min or max5. orientation : It specifies the orientation of the target display/paper and can be prefix with min or max6. aspect-ratio : It specifies the width/height ratio of the targeted display area and can be prefix with min or max7. device-aspect-ratio : It specifies the device-width/device-height ratio of the target display/paper and can be prefix with min or max 8. color : It specifies the bits per color of target display and can be prefix with min or max9. color-index : It specifies the number of colors the target display can handle and can be prefix with min or max10. monochrome : It specifies the bits per pixel in a monochrome frame buffer and can be prefix with min or max11. resolution : It specifies the pixel density (dpi or dpcm) of the target display/paper and can be prefix with min or max12. scan : It specifies scanning method of a tv display and it can be progressive and interlace 13. grid : It specifies if the output device is grid or bitmap and value can be 1 for grid or 0 for other

Source property media

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 	<h1>The Source Object</h1>
 5 	<h2>Example</h2>
 6 	
 7 	<div>
 8 	  <video width="320" height="240" controls>
 9 	    <source id="src" src="sample.mp4" type="video/mp4" 
 10 	    	media="screen - device-width:350px">
 11 	  </video>
 12 	</div>
 13 	<button onclick="access()">Access</button>
 14 	
 15 	<p id="result"></p>
 16 	<script>
 17 	function access() {
 18 	  const element = document.getElementById("src");	  
 19 	  const str = `The source media value is : <b>${element.media}</b>`;
 20 	  document.getElementById("result").innerHTML = str;
 21 	}
 22 	</script>
 23 </body>
 24 </html>

Source property media

Device

1. all : It suitable for all devices and it is default, if not specified2. aural : It specified speech synthesizers3. braille : It specified for braille feedback devices4. handheld : It specified for handheld devices (small screen, limited bandwidth)5. projection : It specified for projectors6. print : It specified for print preview mode or printed pages7. screen : It specified for computer screens8. tty : It specified for teletypes and similar media using a fixed-pitch character grid9. tv : It specified for television type devices (low resolution, limited scroll ability)