Foundations of a Healthy Building

IEQ Video

Air Quality

Thermal Health

Ventilation

Moisture

Noise

Dust & Pests

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