why does JavaScript doesn't run correctly at refresh?

Question

I have a video playlist made with video.js and JavaScript. I added a js file duration.js to show the length of each video in the playlist and it works. but most of the time, if I refresh the page, the duration will disappear for some or all the videos, and it might appear randomly for different videos each time I refresh. I have a feeling it has to do with what script runs first or something like that. I am putting part of the relevant code below:

DEMO: https://cheerful-bienenstitch-239dd7.netlify.app/lessons.html

note: the page works as expected but the only problem is the duration disappearing at refresh. also, I noticed if the developers console is open, it loads correctly!

MAIN PAGE: the page that contains the playlist, I included only 3 videos

at the bottom of the page I'm calling duration.js, and vid.js (this is the file that contains video.js instance and other settings)


//Bootstrap library CDN


    



    
    



    
    

    Dark Mode

    
        
            
                
                01. heres the video title
            
        

        
        

            
                

                01. heres the video title

                



            
            
                
                02. heres the video title
                
            
            
                
                03. heres the video title

duration.js

vElements = document.querySelectorAll("video");
for (let i = 1; i < vElements.length; i++) {
    let video = document.getElementById(i).firstElementChild;
    video.addEventListener('loadedmetadata', function () {
        let vLength = video.duration;
        //   console.log(vLength + ' seconds 
');
        document.getElementById(i).lastElementChild.innerHTML = format(vLength);
    });
}

function format(s) {
    var m = Math.floor(s / 60);
    m = (m >= 10) ? m : "0" + m;
    s = Math.floor(s % 60);
    s = (s >= 10) ? s : "0" + s;
    return m + ":" + s;
}

vid.js

let currentVideo = 1;
var myPlayer;


// Initialize the VideoJs Player
myPlayer = videojs("#playedVideo", {
  preload: 'metadata',
  controls: true,
  fluid: true,
  aspectRatio: "16:9",
  playbackRates: [0.25, 0.5, 1, 1.5, 2],
  plugins: {
    hotkeys: {
      seekStep: 5
    }
  },
});

myPlayer.controlBar.addChild("QualitySelector");


// Handle Vide Click
let listVideo = document.querySelectorAll('.video-list .vid');
let mainVideo = document.querySelector('.main-video video');
let title = document.querySelector('.main-video .title');
listVideo.forEach(video => {
  video.onclick = () => {
    currentVideo = Number(video.id)
    listVideo.forEach(vid => vid.classList.remove('active'));
    video.classList.add('active');
    if (video.classList.contains('active')) {
      let src0 = video.children[0].children[0].getAttribute("src");
      let src1 = video.children[0].children[1].getAttribute("src");
      let src2 = video.children[0].children[2].getAttribute("src");
      document.querySelector('.video-list').scrollTo({ top: (video.getBoundingClientRect().top) - 150, behavior: 'smooth' });
      myPlayer.src([
        {
          src: src0,
          type: "video/mp4",
          label: "720P",
          selected: true
        },
        {
          src: src1,
          type: "video/mp4",
          label: "480P",
        },
        {
          src: src2,
          type: "video/mp4",
          label: "144P",
        },
      ]);
      myPlayer.play();
      let text = video.children[1].innerHTML;
      title.innerHTML = text;
    }
  }

});

// Handle Video PlayList
const video = document.querySelector("video");
video.addEventListener("ended", (event) => {
  let listVideo = document.querySelectorAll(".video-list .vid");
  let title = document.querySelector(".main-video .title");
  listVideo.forEach((video) => {
    if (video.id == currentVideo + 1) {
      listVideo.forEach((vid) => vid.classList.remove("active"));
      video.classList.add("active");
      if (video.classList.contains("active")) {

        let src0 = video.children[0].children[0].getAttribute("src");
        let src1 = video.children[0].children[1].getAttribute("src");
        let src2 = video.children[0].children[2].getAttribute("src");

        // Handle Scrolling
        document.querySelector('.video-list').scrollTo({ top: (video.getBoundingClientRect().y) - 120, behavior: 'smooth' });



        myPlayer.src([
          {
            src: src0,
            type: "video/mp4",
            label: "720P",
            selected: true
          },
          {
            src: src1,
            type: "video/mp4",
            label: "480P",
          },
          {
            src: src2,
            type: "video/mp4",
            label: "144P",
          },
        ]);
        myPlayer.ready(function () {
          myPlayer.play();
        });
        let text = video.children[1].innerHTML;
        title.innerHTML = text;
      }
    }
  });
  currentVideo++;
});


// Dark theme for lessons page, and save theme to local storage   
let dark = document.getElementById('dark');
dark.addEventListener('click', (e) => {
  e.preventDefault();
  document.body.classList.toggle('dark');
  if (dark.innerText == "Dark Mode") {
    dark.innerHTML = "Light Mode";
    localStorage.setItem('state', 'dark')
  }
  else {
    dark.innerHTML = "Dark Mode";
    localStorage.setItem('state', 'light')
  }
});

// get the theme state from localStorage
if (localStorage.getItem('state') == 'dark') {
  document.body.classList.toggle('dark');
  if (dark.innerText == "Dark Mode") {
    dark.innerHTML = "Light Mode";
  }
  else {
    dark.innerHTML = "Dark Mode";
  }
}

why does JavaScript doesn't run correctly at refresh?

0 Answers