HTML5 Game - Getting Information About the Media via HTMLMediaElement

  1. HOME
  2. HTML5 Game
  3. Audio
  4. HTMLMediaElement

Introduction

The HTMLMediaElement can get and modify information about the element and the media associated with it.

They are described in the following table.

Member
 Description
 Returns
autoplay
 Gets or sets the presence of the autoplay attribute
 boolean
canPlayType(<type>)

 Gets an indication of whether the browser can play a
particular MIME type
string

currentSrc
 Gets the current source
 string
controls
 Gets or sets the presence of the controls attribute
 boolean
defaultMuted
 Gets or sets the initial presence of the muted attribute
 boolean
loop
 Gets or sets the presence of the loop attribute
 boolean
muted
 Gets or sets the presence of the muted attribute
 boolean
preload
 Gets or sets the value of the preload attribute
 string
src
 Gets or sets the value of the src attribute
 string
volume
 Gets or sets the volume on a scale from 0.0 to 1.0
 number

The following code shows some of the HTMLMediaElement properties being used to get basic information about a media element.

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            table {border: thin solid black; border-collapse: collapse;}
            th, td {padding: 3px 4px;}
            body > * {float: left; margin: 2px;}
        </style>
    </head>
    <body>
        <video id="media" controls width="360" height="240" preload="metadata">
            <source src="http://java2s.com/style/demo/your.webm"/>
            <source src="http://java2s.com/style/demo/your.ogv"/>
            <source src="http://java2s.com/style/demo/your.mp4"/>
            Video cannot be displayed/*  ww  w .  j  ava 2  s.  com*/
        </video>
        <table id="info" border="1">
            <tr><th>Property</th><th>Value</th></tr>
        </table>
        <script>
            let mediaElem = document.getElementById("media");
            let tableElem = document.getElementById("info");
            
            let propertyNames = ["autoplay", "currentSrc", "controls", "loop", "muted",
                                 "preload", "src", "volume"];
            
            for (let i = 0; i < propertyNames.length; i++) {
                tableElem.innerHTML +=
                    "<tr><td>" + propertyNames[i] + "</td><td>" +
                    mediaElem[propertyNames[i]] + "</td></tr>";
            }
        </script>
    </body>
</html>

Related Topic