<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IEQ Education</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="container">
    <div class=" section left ">
      <div class="heading"> Foundations of a
        Healthy Building
      </div>
      <div class="buttons" id="left-buttons">
        <div class="vid-button " onclick="playVideo('./assets/videos/overview.mp4',true)">
          <div><img src="./assets/ieq assets/ieq.png">
            </img>
          </div>
          <div>IEQ Video</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/air.mp4',true)">
          <div><img src="./assets/ieq assets/air.png">
            </img>
          </div>
          <div>Air Quality</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/thermal.mp4',true)">
          <div><img src="./assets/ieq assets/thermal.png">
            </img>
          </div>
          <div> Thermal Health</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/ventilation.mp4',true)">
          <div><img src="./assets/ieq assets/ventilation.png">
            </img>
          </div>
          <div>Ventilation</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/moisture.mp4',true)">
          <div><img src="./assets/ieq assets/moisture.png">
            </img>
          </div>
          <div>Moisture</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/noise.mp4',true)">
          <div><img src="./assets/ieq assets/noise.png">
            </img>
          </div>
          <div> Noise</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/dust.mp4',true)">
          <div><img src="./assets/ieq assets/pestanddust.png">
            </img>
          </div>
          <div>Dust & Pests</div>
        </div>
      </div>

    </div>
    

    <div class="videobar">
      <div class="tool-tip" id="tooltip">
        <!-- <img src="./assets/Tooltiprl.png"> -->
        <p>Please select a video title from either side to play </p>
      </div>
      <div class="sub-container" id="subtitles">
        <div class="subtitle-buttons" style="flex-direction:row;">

          <p>SUBTITLES</p>
        </div>
        <div class="subtitle-buttons">
          <div class="sub-button" onclick="setSubtitles('fre')">FRENCH </div>
          <div class="sub-button" onclick="setSubtitles('jap')">JAPANESE
          </div>
          <div class="sub-button" onclick="setSubtitles('spa')">SPANISH
          </div>
        </div>
      </div>
    </div>
    <div class="logo">
      <img src="./assets/Daikin Logo 1080.png" style="width: 100%;">
    </div>
    <div class="video-container">
      <div class="video-heading"> <strong>I</strong>ndoor <strong>E</strong>nvironment <strong>Q</strong>uality</div>
      <style>
        video::cue {
          font-size: 35px;
          z-index: 1000;
          position: relative;
        }
      </style>

      <video src="" autoplay muted controls style="display: none; width: 100% ; height:75%" id="videoPlayer"
        class="videosection">
        <track default id="track" kind="subtitles" src="" srclang="en" label="Subtitle">
      </video>
      <!-- <img src="./assets/IEQ Background 1.gif" id="gifPlaceholder" style=" width: 100%; height: 75%;" /> -->
      <video id="loopingVideoPlayer" style="width: 100%; height: 75%;" autoplay muted></video>
     


    </div>
    <div class=" section right">
      <!-- <div class="heading-right"> IEQ in the
        DC Office</div> -->
      <div class="buttons" id="right-buttons">
       
      </div>

    </div>
  </div>
  <script src="./assets/videos/config.js"></script>

  <script src="script.js"></script>
</body>

</html> this is my index.html and const videoPlayer = document.getElementById('videoPlayer');
// const gifPlaceholder = document.getElementById("gifPlaceholder");
const subButton = document.querySelectorAll('.sub-button');
const vidButtons = document.querySelectorAll('.vid-button');
const subtitles = document.getElementById("subtitles");
const tooltip = document.getElementById("tooltip");
const loopingVideoPlayer = document.getElementById('loopingVideoPlayer');
let vidButtonsRight 

let selectedSubtitle = null, isSubtitle = true, isVideoPlaying=false
const looping_videos = [
  './assets/videos/WELL Cert Video - DSIC IEQ Station.mp4',
  './assets/videos/IAQ in DC Office - Video - DSIC IEQ Station.mp4'
];
let currentVideoIndex = 0;

createVideoButtons(videos)// to create right side video buttons  from [./assets/videos/config.js]
const showSubs=()=>{
  console.log(tooltip);
if(isVideoPlaying ){
  tooltip.style.display="none"
  subtitles.style.display=isSubtitle?"block":"none"

}else{
  tooltip.style.display="block"
  subtitles.style.display="none"
}
}
function createVideoButtons(videoArray) {
  const containerDiv = document.getElementById('right-buttons'); 
  for (const videoObj of videoArray) {
      const videoButton = document.createElement('div');
      videoButton.classList.add('vid-button-right');
      videoButton.textContent = videoObj.label;
      if(videoObj.disabled){
        videoButton.classList.add('disabled')
      }else{
        videoButton.onclick = () => playVideo(`./assets/videos/${videoObj.fileName}`, false)
      };
      containerDiv.appendChild(videoButton);
  }
  vidButtonsRight = document.querySelectorAll('.vid-button-right');
  vidButtonsRight.forEach(button => {
    button.addEventListener('click', function () {
      // Remove 'active' class from all buttons
      if (this.classList.contains("disabled")) return
      removeActiveButton()
  
      // Add 'active' class to the clicked button
      this.classList.add('right-active');
    });
  });
}


function playVideo(videoSrc, sub) {
  isSubtitle = sub
  isVideoPlaying=true
  videoPlayer.style.display = "block";
  // gifPlaceholder.style.display = "none";
  loopingVideoPlayer.style.display = "none";
  videoPlayer.src = videoSrc;
  videoPlayer.loop = true;
  removeSubActiveButton()
  selectedSubtitle = null
  removeSubtitleTracks();
  videoPlayer.play();
  showSubs()
}

function setSubtitles(language) {
  if (!isSubtitle|| !isVideoPlaying) return
  if (selectedSubtitle == language) {
    removeSubtitleTracks();
    removeSubActiveButton()
    selectedSubtitle=null
    return
  }
  selectedSubtitle = language;
  const videoSrc = videoPlayer.src;
  if (!videoSrc) {
    console.error("Video source is not set.");
    return;
  }
  const videoName = videoSrc.split('/').pop().slice(0, -4);
  // Create a new subtitle track
  const newSubtitleTrack = document.createElement('track');
  newSubtitleTrack.kind = 'subtitles';
  newSubtitleTrack.id = 'track';
  switch (selectedSubtitle) {
    case 'jap':
      // newSubtitleTrack.src = `assets/subtitles/${videoName}/${videoName}-jap.vtt`;
      newSubtitleTrack.src = `data:text/vtt;charset=utf-8,${subTitleDirectory[videoName].japanese}`;
      newSubtitleTrack.srclang = 'ja';
      newSubtitleTrack.label = 'Japanese';
      break;
    case 'spa':
      // newSubtitleTrack.src = `assets/subtitles/${videoName}/${videoName}-spa.vtt`;
      newSubtitleTrack.src = `data:text/vtt;charset=utf-8,${subTitleDirectory[videoName].spanish}`;
      newSubtitleTrack.srclang = 'es';
      newSubtitleTrack.label = 'Spanish';
      break;
    default:
      // newSubtitleTrack.src = `assets/subtitles/${videoName}/${videoName}-${selectedSubtitle}.vtt`;
      newSubtitleTrack.src = `data:text/vtt;charset=utf-8,${subTitleDirectory[videoName].french}`;
      newSubtitleTrack.srclang = 'fr';
      newSubtitleTrack.label = 'French';
  }

  newSubtitleTrack.default = true;

  videoPlayer.appendChild(newSubtitleTrack);

  // Update track mode
  const tracks = videoPlayer.textTracks;
  for (let i = 0; i < tracks.length; i++) {
    if (tracks[i] === newSubtitleTrack) {
      newSubtitleTrack.mode = 'showing';
    } else {
      tracks[i].mode = 'disabled';
    }
  }

}

//event listeners
videoPlayer.addEventListener('ended', function () {
  videoPlayer.style.display = "none";
  // gifPlaceholder.style.display = "block";
  loopingVideoPlayer.style.display = "block";
  removeActiveButton()
  removeSubActiveButton()
  selectedSubtitle = null
  isVideoPlaying=false
  showSubs()

});
subButton.forEach(button => {
  button.addEventListener('click', function (e) {
    if (!isSubtitle || selectedSubtitle==null || !isVideoPlaying) return
    removeSubActiveButton()
    this.classList.add('sub-active');
  });
});
vidButtons.forEach(button => {
  button.addEventListener('click', function () {
    removeActiveButton()
    this.classList.add('active');
  });
});


// helper functions
const removeSubActiveButton = () => {
  subButton.forEach(btn => {
    btn.classList.remove('sub-active');
  });
}
const removeActiveButton = () => {
  vidButtons.forEach(btn => {
    btn.classList.remove('active');
  });
  vidButtonsRight.forEach(btn => {
    btn.classList.remove('right-active');
  });
}
const removeSubtitleTracks=()=> {
  const videoPlayer = document.getElementById('videoPlayer');
  const subtitleTracks = videoPlayer.getElementsByTagName('track');
  Object.keys(videoPlayer.textTracks).map((e, i) => {
    videoPlayer.textTracks[e].mode = 'disabled'
  })
  while (subtitleTracks.length > 0) {
    videoPlayer.removeChild(subtitleTracks[0]);
  }
}

function loadVideo(index) {
  loopingVideoPlayer.src = looping_videos[index];
  loopingVideoPlayer.load();
  loopingVideoPlayer.play();
}

// Event listener that triggers when the current video ends
loopingVideoPlayer.addEventListener('ended', () => {
  // Update the index to the next video, looping back to the first video if necessary
  currentVideoIndex = currentVideoIndex===0?1:0;
  loadVideo(currentVideoIndex);
});

loadVideo(currentVideoIndex);
playVideo('./assets/videos/air.mp4',true)
setTimeout(() => {
  setSubtitles('jap');
}, 3000); this is my script.js now the subtitle shows when I run in my computer but when I run it in my brightsign player it does not show subtitles how can i fix this