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');
    const track = video.textTracks[0];
    const videoDirectory = {
        default: {
          videoName:'/assets/videos/Daikins Commitment English.mp4'
        },
        japanese: {
          videoName:'/assets/videos/Daikins Commitment Japanese.mp4'
        },
        spanish: {
          videoName:'/assets/videos/Daikins Commitment Spanish.mp4'
        },
        french: {
          videoName:'/assets/videos/Daikins Commitment French.mp4'
        },
      };
    video.muted = false;
    track.mode = 'hidden';

    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() {
        if (track.mode === 'hidden') {
            track.mode = 'showing';
            subtitleBtn.style.opacity = 1;
          } else {
            track.mode = 'hidden';
            subtitleBtn.style.opacity = 0.5;
          }
        subtitleBtn.src = track.mode === 'hidden' ? "/assets/icons/subtitle.png" : "/assets/icons/subtitles_selected.png";
    });

    //Handle Video Switch Based on language
    languageSelect.addEventListener('change', function() {
        var 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 code whenever user changes the language the videos has to change and also the old subtitles should be removed and new one should be added how can i do this