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 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;

    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() {
        //handle subtitle hide and show here
    });

    //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 js code and <!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> this is my html code now on click of subtitleBtn assign the subtitle based on the languageSelect dropdown and if the language sleect changes remove the previousl subtitle and assign new subtitles on button click