document.addEventListener('DOMContentLoaded', function() {
var video = document.getElementById('videoPlayer');
var playPauseBtn = document.getElementById('playPauseBtn');
var muteUnmuteBtn = document.getElementById('muteUnmuteBtn');
var subtitleBtn = document.getElementById('subtitleBtn');
var restartBtn = document.getElementById('restartBtn');
var languageSelect = document.getElementById('languageSelect');
var fullscreenBtn = document.getElementById('fullscreenBtn');
var videoContainer = document.getElementById('videoContainer');
let selectedLanguage = 'default';
var subtitlesEnabled = false;
const videoDirectory = {
default: {
videoName:'./assets/videos/Daikins Commitment English.mp4',
subtitlesEncoded:'WEBVTT%0A%0A00%3A00%3A02.000%20--%3E%2000%3A00%3A06.404%0AToday%',
srclang:'en'
},
japanese: {
videoName:'./assets/videos/Daikins Commitment Japanese.mp4',
subtitlesEncoded:'WEBVTT%0A%0A00%3A00%3A00.971%20--%3E%2000%3A00%3A05.844%081%E8%A6%8B%E9%81%8E%E3%81%94%E3%81%97%E3%82%84%E3%81%99%E3%81%84%E3%81%A7%E3%81%99%E3%81%8C%E3%80%81%0A%E9%81%A9%E5%88%87%E3%81%AA%E6%89%8B%E6%AE%B5%E3%82%92%E6%B4%BB%E7%94%A8%E3%81%99%E3%82%8C%E3%81%B0%E5%A4%A7%E4%B8%88%E5%A4%AB%E3%81%A7%E3%81%99%E3%80%82',
srclang:'ja'
},
spanish: {
videoName:'./assets/videos/Daikins Commitment Spanish.mp4',
subtitlesEncoded:'WEBVTT%0A%0A00%3A00%3A02.000%20--',
srclang:'es'
},
french: {
videoName:'./assets/videos/Daikins Commitment French.mp4',
subtitlesEncoded:'WEBVTT%0A%0A00%3A00%3A02.',
srclang:'fr'
},
};

video.muted = false;
selectedLanguage = languageSelect.value; // Set initial language based on select value
updateSubtitles();

video.play().catch(function(err) {
console.log('Autoplay was prevented:', err);
});

// Play/Pause Button
playPauseBtn.addEventListener('click', function() {
playPauseBtn.src = video.paused ? "./assets/icons/pause.png" : "./assets/icons/play.png";
if (video.paused) {
video.play();
} else {
video.pause();
}
});

// Mute/Unmute Button
muteUnmuteBtn.addEventListener('click', function() {
video.muted = !video.muted;
muteUnmuteBtn.src = video.muted ? "./assets/icons/mute.png" : "./assets/icons/unmute.png";
});

// Restart Video
restartBtn.addEventListener('click', function() {
video.currentTime = 0;
video.play();
});

// Subtitle Button
subtitleBtn.addEventListener('click', function() {
subtitlesEnabled = !subtitlesEnabled;
updateSubtitleButtonIcon(); // Optional: Update the button icon or text
// Toggle subtitles
var tracks = video.textTracks;
for (var i = 0; i < tracks.length; i++) {
tracks[i].mode = subtitlesEnabled ? 'showing' : 'hidden';
}
});

// Language Selection
languageSelect.addEventListener('change', function() {
selectedLanguage = languageSelect.value;
console.log("Selected Language is", selectedLanguage);
video.src = videoDirectory[selectedLanguage].videoName;
updateSubtitles();
video.load();
video.play();
});

// Update Subtitles Function
function updateSubtitles() {
// Remove existing tracks
var existingTracks = video.querySelectorAll('track');
existingTracks.forEach(function(track) {
if (track.src) {
URL.revokeObjectURL(track.src);
}
track.remove();
});


  // Create a new track element
  let newTrack = document.createElement('track');
  newTrack.kind = 'subtitles';
  newTrack.src = `data:text/vtt;charset=utf-8,${videoDirectory[selectedLanguage].subtitlesEncoded}`;
  newTrack.label = selectedLanguage;
  newTrack.srclang = videoDirectory[selectedLanguage].srclang;

  // Add the track to the video
  video.appendChild(newTrack);

  // Set the track's mode based on whether subtitles are enabled
  newTrack.track.mode = subtitlesEnabled ? 'showing' : 'hidden';
}

// Update Subtitle Button Icon (Optional)
function updateSubtitleButtonIcon() {
// Change the icon or text based on subtitlesEnabled
subtitleBtn.src = subtitlesEnabled ? "./assets/icons/subtitle_on.png" : "./assets/icons/subtitle_off.png";
}

// Fullscreen functionality
fullscreenBtn.addEventListener('click', function() {
if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
enterFullscreen(videoContainer);
} else {
exitFullscreen();
}
});

// Enter fullscreen
function enterFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { /* Safari /
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { / IE11 */
element.msRequestFullscreen();
}
fullscreenBtn.textContent = 'Exit Fullscreen';
}

// Exit fullscreen
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari /
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { / IE11 */
document.msExitFullscreen();
}
fullscreenBtn.textContent = 'Fullscreen';
}

// Update fullscreen button text on fullscreen change
function onFullscreenChange() {
if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
fullscreenBtn.textContent = 'Fullscreen';
} else {
fullscreenBtn.textContent = 'Exit Fullscreen';
}
}

// Add event listeners for fullscreen change
document.addEventListener('fullscreenchange', onFullscreenChange);
document.addEventListener('webkitfullscreenchange', onFullscreenChange);
document.addEventListener('msfullscreenchange', onFullscreenChange);

}); this is my js code and this

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Climate Change</title>
<link rel="stylesheet" href="style.css">

</head>
<body>
  <!-- Video Container -->
  <div id="videoContainer">
    <!-- Video Player -->
    <video id="videoPlayer" loop playsinline webkit-playsinline>
      <source src="assets/videos/Daikins Commitment English.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    <div id="controls">
      <img src="assets/icons/pause.png" id="playPauseBtn" alt="playpause">
      <img src="assets/icons/unmute.png" id="muteUnmuteBtn" alt="muteunmute">
      <img src="assets/icons/restart.png" id="restartBtn" alt="restart">
      <img src="assets/icons/subtitle.png" id="subtitleBtn" alt="subtitle">
      <select id="languageSelect">
        <option value="default"> 🇬🇧 English</option>
        <option value="japanese"> 🇯🇵 Japanese</option>
        <option value="spanish"> 🇪🇸 Spanish</option>
        <option value="french"> 🇫🇷 French</option>
      </select>
      <button id="fullscreenBtn">Fullscreen</button>
    </div>
  </div>
<script src="script.js"></script>
</body>
</html>
is my html code initially everything works well but if the subtitle is showing and the language of the video is changed then it appends the new subtitle track on top of the old subtitle track I want to completely remove the old subtitle track