<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multiple Alternative Audio Tracks - Example</title>
<link href="/node_modules/video.js/dist/video-js.css" rel="stylesheet">
</head>
<body>
<h1>Multiple Alternative Audio Tracks</h1>
<p>Check the source of this page and the console for detailed information on this example</p>
<video id="maat-player" class="video-js vjs-default-skin" controls>
<source src="https://s3.amazonaws.com/_bc_dml/example-content/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">
</video>
<div id="audioTrackChoice">
<select id="enabled-audio-track" name="enabled-audio-track">
</select>
</div>
<script src="/node_modules/video.js/dist/video.js"></script>
<script src="/dist/videojs-contrib-hls.js"></script>
<script>
(function(window, videojs) {
var player = window.player = videojs('maat-player');
var audioTrackList = player.audioTracks();
var audioTrackSelect = document.getElementById("enabled-audio-track");
// watch for a change on the select element
// then change the enabled audio track
// only one can be enabled at a time, but video.js will
// handle that for us, all we need to do is enable the new
// track
audioTrackSelect.addEventListener('change', function() {
var track = audioTrackList[this.selectedIndex];
console.log('User switched to track ' + track.label);
track.enabled = true;
});
// watch for changes that will be triggered by any change
// to enabled on any audio track. Manually or through the
// select element
audioTrackList.on('change', function() {
for (var i = 0; i < audioTrackList.length; i++) {
var track = audioTrackList[i];
if (track.enabled) {
console.log('A new ' + track.label + ' has been enabled!');
}
}
});
// will be fired twice in this example
audioTrackList.on('addtrack', function() {
console.log('a track has been added to the audio track list');
});
// will not be fired at all unless you call
// audioTrackList.removeTrack(trackObj)
// we typically will not need to do this unless we have to load
// another video for some reason
audioTrackList.on('removetrack', function() {
console.log('a track has been removed from the audio track list');
});
// getting all the possible audio tracks from the track list
// get all of thier properties
// add each track to the select on the page
// this is all filled out by HLS when it parses the m3u8
player.on('loadeddata', function() {
console.log('There are ' + audioTrackList.length + ' audio tracks');
for (var i = 0; i < audioTrackList.length; i++) {
var track = audioTrackList[i];
var option = document.createElement("option");
option.text = track.label;
if (track.enabled) {
option.selected = true;
}
audioTrackSelect.add(option, i);
console.log('Track ' + (i + 1));
['label', 'enabled', 'language', 'id', 'kind'].forEach(function(prop) {
console.log(" " + prop + ": " + track[prop]);
});
}
});
}(window, window.videojs));
</script>
</body>
</html>