I'm trying to build a video player that works everywhere.
<div class="container">
<div class="main-video">
<div class="video">
<video src="gal/video1.mp4" controls muted autoplay></video>
<h3 class="title">01. video 1</h3>
</div>
</div>
<div class="video-list">
<div class="vid active">
<video src="gal/video1.mp4" muted></video>
<h3 class="title">01. video 1</h3>
</div>
<div class="vid">
<video src="gal/video2.mp4" muted></video>
<h3 class="title">02. Title for video 2</h3>
</div>
</div>
</div>But now I also want some kind of playlist/menu along with the video player, from which I can select other videos. Those should be opened within my player right away. So I will have to "dynamically change the source of the video" But the problem is the videos don't change on clicking it just goes blank and I have to reload the page. This is the js code
<script>
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 = () =>{
listVideo.forEach(vid => vid.classList.remove('active'));
video.classList.add('active');
if(video.classList.contains('active')){
let src = video.children[0].getAttribute('src');
mainVideo.src = src;
let text = video.children[1].innerHTML;
title.innerHTML = text;
};
};
});
</script>