<!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">
      <!-- Subtitle tracks -->
      <!-- <track default id="track" kind="subtitles" src="" srclang="en" label="Subtitle" src="assets/subtitles/english_subtitles.vtt"> -->
      <track id="track" label="English" kind="subtitles" src="./assets/subtitles/english_subtitles.vtt">
      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 file and 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;
        window.location.reload();
        video.load();
        video.play();
      });

    //   const removeSubtitleTracks=()=> {
    //     const subtitleTracks = video.getElementsByTagName('track');
    //     Object.keys(video.textTracks).map((e, i) => {
    //       video.textTracks[e].mode = 'disabled'
    //     })
    //     while (subtitleTracks.length > 0) {
    //       video.removeChild(subtitleTracks[0]);
    //     }
    //   }

    // Handle captions language selection
    // languageSelect.addEventListener('change', function() {
    //   var selectedLanguage = languageSelect.value;
    //   // Hide all tracks
    //   for (var i = 0; i < video.textTracks.length; i++) {
    //     video.textTracks[i].mode = 'hidden';
    //   }
    //   // Show the selected track
    //   if (selectedLanguage !== 'off') {
    //     for (var i = 0; i < video.textTracks.length; i++) {
    //       if (video.textTracks[i].language === selectedLanguage) {
    //         video.textTracks[i].mode = 'showing';
    //       }
    //     }
    //   }
    // });

    // Initialize captions display
    // function initializeCaptions() {
    //   var selectedLanguage = languageSelect.value;
    //   for (var i = 0; i < video.textTracks.length; i++) {
    //     if (video.textTracks[i].language === selectedLanguage) {
    //       video.textTracks[i].mode = 'showing';
    //     } else {
    //       video.textTracks[i].mode = 'hidden';
    //     }
    //   }
    // }

    // Call initialize on page load
    // initializeCaptions();

    // 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 script.js file and the error is : index.html:1 Unsafe attempt to load URL file:///Users/abhishek/Documents/showrooms/globePPTPlayer_test/assets/subtitles/english_subtitles.vtt from frame with URL file:///Users/abhishek/Documents/showrooms/globePPTPlayer_test/index.html. 'file:' URLs are treated as unique security origins. how to fix this