html tutorial - onvolumechange Attribute in HTML - html5 - html code - html form



Onvolumechange attribute in html

Learn html - html tutorial - Onvolumechange attribute in html - html examples - html programs

  • The onvolumechange attribute specifies a script to run every time the volume of a video/audio has been changed.
  • This event is invoked by:
    • Muting or unmuting the media player
    • Increasing or decreasing the volume
  • The onvolumechange attribute is a section of the Event Attributes.

Syntax for onvolumechange attribute in HTML:

<element onvolumechange="script">

Applies To:

Element Attribute
<audio> onvolumechange
<video> onvolumechange

onvolumechange Attribute Values:

Value Description
script Script to be run on onvolumechange

Sample Coding for onvolumechange Attribute in HTML:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy onvolumechange attribute</title>
    </head>
    <body>
        <video width="300" height="300" controls onvolumechange="OnVolumeChange()">
            <source src="hibiscus.mp4" type="video/mp4">
        </video>
        <p id="para">Change the video volume :</p>
        <script>
          function OnVolumeChange() 
          {
           document.getElementById("para").innerHTML = "Volume has been changed";
          }
        </script>
    </body>
</html>

Code Explanation for onvolumechange Attribute in HTML:

onvolumechange Attribute Code Explanation

  1. <video> tag is used to defines that video controls should be visible.
  2. id attribute returns the id of an element (the value of an element's id attribute is wikitechy).
  3. onvolumechange attribute defines to run each time the volume of a audio has changed.
  4. <source> tag defines several video resources.
  5. src is an attribute, which describes the URL of the video file.
  6. function Wikitechy () is a JavaScript function (block of code), which is created to perform the particular task.
  7. document.getElementById gives the element which has the ID attribute with the defined value(Here Id value is wikitechy).innerHTML returns the content of an element.

Output for onvolumechange Attribute in HTML:

onvolumechange Attribute Output

  1. The video file has been displayed here.
onvolumechange Attribute Output
  1. The output shows the volume of the video has been changed.
  2. After changing the volume, the message Volume has been changed is displayed.

Browser Support for onvolumechange Attribute in HTML:

Yes Yes Yes Yes Yes

Tips and Notes

  • The volume property is used for the Audio/Video Object to set the audio volume of an audio/video.

Related Searches to onvolumechange Attribute in html