change | onchange event
Occurs when an AudioTrack or VideoTrack in the AudioTrackList or VideoTrackList associated with a video is enabled or disabled.
![]() ![]() |
Syntax
| Event Property | object.onchange = handler; |
|---|---|
| addEventListener Method | object.addEventListener("change", handler, useCapture) |
Event information
| Synchronous | No |
|---|---|
| Bubbles | No |
| Cancelable | No |
Event handler parameters
- handler [in]
-
Type: Function
Handler function to process the onchange event.
Standards information
Remarks
The following example attaches to the onchange event and displays the status of all the audio tracks associated with the video.
Examples
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
var oVideo = document.getElementById("video1"); // get video element
oVideo.audioTracks.addEventListener("change", changeHandler, false); // if just going for all tracks.
}, false);
function changeHandler(evt) {
var tg = evt.target;
document.getElementById("display").innerHTML = "";
for (var i = 0; i < tg.length; i++) {
document.getElementById("display").innerHTML += tg[i].language + " is " + ((tg[i].enabled == true) ? "enabled" : "not enabled")+"<br/>";
}
}
function disableTrack(track) {
document.getElementById("display").innerHTML = "";
var oAudioTracks = document.getElementById("video1").audioTracks;
if (oAudioTracks[track].enabled == true) {
oAudioTracks[track].enabled = false;
document.getElementById("disableTrack").innerHTML = "Enable track 0";
}else {
oAudioTracks[track].enabled = true;
document.getElementById("disableTrack").innerHTML = "Disable track 0";
}
}
</script>
</head>
<body>
<video id="video1" controls >
<source src="multi-lang-movie.mp4" >
</video>
<br />
<button id="disableTrack" onclick="disableTrack(0);">Disable track 0</button>
<div id="display"></div>
</body>
</html>
See also
Show:

