I am trying to create Video gallery playlist using HTML CSS and JavaScript. I have created html and css and two js files

one to include all videos as shown here:

let allVideos = [
    {
       name: "Button Hover Effect",
       src: "https://youtu.be/ykuD2QOZkhc",
       id: "vid_1"
    },
    {
       name: "Button Hover Effect",
       src: "https://youtu.be/ykuD2QOZkhc",
       id: "vid_2"
    },
    {
       name: "Confirm Password using Html CSS & js",
       src: "https://youtu.be/ykuD2QOZkhc",
       id: "vid_3"
    },
    {
       name: "Creative Card Hover Effect",
       src: "https://youtu.be/ykuD2QOZkhc ",
       id: "vid_4"
    },
    {
       name: "Creative Digital Clock Ui Design",
       src: "https://youtu.be/ykuD2QOZkhc",
       id: "vid_5"
    },
    {
       name: "Creative Our Team Section",
       src: "https://youtu.be/ykuD2QOZkhc",
       id: "vid_6"
    },
    {
       name: "Filter Text Animation Using Html and CSS",
       src: "https://youtu.be/ykuD2QOZkhc",
       id: "vid_7"
    },
    {
       name: "Glassmorphism Calculater New Design",
       src: "https://youtu.be/ykuD2QOZkhc"
    },
    {
       name: "How To  Make Cheatsheet",
       src: "https://youtu.be/ykuD2QOZkhc",
       id: "vid_9"
    },
    {
       name: "How to create Login Form",
       src: "https://youtu.be/ykuD2QOZkhc",
       id: "vid_10"
    },
    {
       name: "How To Make Animated Menu Icon",
       src: "https://youtu.be/ykuD2QOZkhc",
       id: "vid_11"
    },
    {
       name: "How to make Read More Function",
       src: "https://youtu.be/ykuD2QOZkhc",
       id: "vid_12"
    },
    {
       name: "Vertical Navigation Bar",
       src: "https://youtu.be/ykuD2QOZkhc",
       id: "vid_13"
    }
 ]

and one for the playlist script here

const mainVideo = document.querySelector('#main-Video');
const musicList = document.querySelector('.music-list');
const playlist = document.getElementById('playlist');
const AllLessons = document.querySelector('.AllLessons');
const videoTitle = document.querySelector('.title');


const ulTag = document.querySelector("ul");
AllLessons.innerHTML = `${allVideos.length} Lessons`


let musicIndex = 1;
window.addEventListener('load',()=>{
   loadMusic(musicIndex);
   playingNow();
})
function playMusic(){
   mainVideo.play();
   playlist.classList.add('active')
}
function loadMusic(indexNumb){
   mainVideo.src = `${allVideos[indexNumb - 1].src}.mp4`;
   videoTitle.innerHTML = `${indexNumb}. ${allVideos[indexNumb - 1].name}`
   
}

for(let i = 0; i < allVideos.length; i  ){
   let liTag = `<li li-index="${i   1}">
      <div >
         <span>${i   1}. ${allVideos[i].name}</span>
      </div>
      <video  src="${allVideos[i].src}.mp4" style="display: none;" title="${allVideos[i].name}"></video>
      <span id="${allVideos[i].id}" ></span>
   </li>`;
   playlist.insertAdjacentHTML('beforeend',liTag); 

   let liVideoDuration = ulTag.querySelector(`#${allVideos[i].id}`)
   let liVideoTag = ulTag.querySelector(`.${allVideos[i].id}`);
   

   liVideoTag.addEventListener("loadeddata", ()=>{
      let videoDuration = liVideoTag.duration;
      let totalMin = Math.floor(videoDuration / 60);
      let totalSec = Math.floor(videoDuration % 60);
      
      totalSec < 10 ? totalSec = "0"  totalSec : totalSec
      liVideoDuration.innerText = `${totalMin}:${totalSec}`;
      
      liVideoDuration.setAttribute("t-duration", `${totalMin}:${totalSec}`);
   })  
}

const allLiTags = playlist.querySelectorAll('li');
function playingNow(){
   for(let j = 0; j<allVideos.length; j  ){
      if(allLiTags[j].classList.contains('playing')){
         allLiTags[j].classList.remove("playing")
      }
      if(allLiTags[j].getAttribute('li-index')==musicIndex){
         allLiTags[j].classList.add('playing')
      }
      
      allLiTags[j].setAttribute("onclick", "clicked(this)")
   }
}

function clicked(element){
   
   let getIndex = element.getAttribute("li-index");
   musicIndex = getIndex;
   loadMusic(musicIndex);
   playMusic();
   playingNow();
}

everything working fine except the scr video in js "all Videos" file. it is not working. can you please help to fix it?

CodePudding user response：

Probably because of this line:

mainVideo.src = `${allVideos[indexNumb - 1].src}.mp4`;

The src property of the "video" object in allVideos returns a string, and you're concatenating that with '.mp4', not getting the source of the video.