I am trying to change audio track using HTMLVideoElement.audioTracks
. I got 2 tracks (as should be) and changed audioTrack.enabled
: first track - false
, second track - true
. These values have changed, but video element continues to play the first track.
Tested in browser on UE65NU7400 (Tizen 4) and LT27H390 (Tizen 3).
<html>
<head>
<style>
video {
width: 50%;
height: 50%;
}
#error {
color: red;
}
</style>
<script>
window.addEventListener('load', function () {
var audioIndex = 0;
var mediaElement = document.querySelector('video');
var output = document.querySelector('#output');
var outputError = document.querySelector('#error');
var btnToggle = document.querySelector('#toggleTrack');
mediaElement.addEventListener('error', function () {
var err = mediaElement.error || {};
outputError.innerHTML = err.code;
});
btnToggle.addEventListener('click', function () {
output.innerHTML = '';
audioIndex = (audioIndex + 1) % 2;
var audioTracks = mediaElement.audioTracks || [];
output.innerHTML += 'audioTracks: ' + audioTracks.length + '\n';
for (var i = 0; i < audioTracks.length; i++) {
var audioTrack = audioTracks[i];
audioTrack.enabled = i === audioIndex;
output.innerHTML += 'audioTracks[' + i + ']: ' + audioTrack.enabled + '\n';
}
});
});
</script>
</head>
<body>
<video src="1.mp4" controls></video>
<pre id="output"></pre>
<pre id="error"></pre>
<button id="toggleTrack">Toggle track</button>
</body>
</html>