html tutorial - onvolumechange Attribute in HTML - html5 - html code - html form
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:
- <video> tag is used to defines that video controls should be visible.
- id attribute returns the id of an element (the value of an element's id attribute is wikitechy).
- onvolumechange attribute defines to run each time the volume of a audio has changed.
- <source> tag defines several video resources.
- src is an attribute, which describes the URL of the video file.
- function Wikitechy () is a JavaScript function (block of code), which is created to perform the particular task.
- 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:
- The video file has been displayed here.
- The output shows the volume of the video has been changed.
- 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.