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';
    const videoDirectory = {
        default: {
          videoName:'./assets/videos/Daikins Commitment English.mp4',
          subtitlesEncoded:'WEBVTT%0A%0A00%3A00%3A02.000%20--%3E%200',
          srclang:'en'
        },
        japanese: {
          videoName:'./assets/videos/Daikins Commitment Japanese.mp4',
          subtitlesEncoded:'WEBVTT%0A%0A00%3A00%3A02.000%20--%3E%2000%3A00%3A0',
          srclang:'ja'
        },
        spanish: {
          videoName:'./assets/videos/Daikins Commitment Spanish.mp4',
          subtitlesEncoded:'WEBVTT%0A%0A00%3A00%3A02.000%20--%3E',
          srclang:'es'
        },
        french: {
          videoName:'./assets/videos/Daikins Commitment French.mp4',
          subtitlesEncoded:'WEBVTT%0A%0A00%3A00%3A02',
          srclang:'fr'
        },
      };
    video.muted = false;

    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 from the beginning
    restartBtn.addEventListener('click', function() {
      video.currentTime = 0;
      video.play();
    });

    // Handle Subtitles
    subtitleBtn.addEventListener('click', function() {
      //show or hide subtitle
    });

    //Handle Video Switch Based on language
    languageSelect.addEventListener('change', function() {
        selectedLanguage = languageSelect.value;
        console.log("Selected Language is", selectedLanguage);
        video.src = videoDirectory[selectedLanguage].videoName;
        video.load();
        video.play();
      });


    // 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">
      <track id="track" label="English" kind="subtitles" src="">
      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 so now when user chooses any of the language it plays video in that language I want to implement subtitles into this from videoDirectory on click of subtitleBtn it should show or hide the subtitle and on change of language the old subtitle track should be deleted and new one should be added with respective subtitle from videoDirectory how can I achieve this