https://i.sstatic.net/I2gIZ.jpgI'm currently working on building a video streaming site, but I've hit a roadblock.
My challenge right now is figuring out how to make the episode selector change the video player's source. I'm a bit confused about how to accomplish this and also how to dynamically change the text below the player based on the selected video.
<div class="container">
<div class="main-video">
<div class="video">
<video src="video link here"></video>
<h3 class="ep-title">00. Prologue</h3>
</div>
</div>
<div class="episode-list">
<div class="episode active">
<img src="image link here" alt="">
<h3 class="title">00. Prologue</h3>
</div>
<div class="episode">
<img src="image link here" alt="">
<h3 class="title">01. A Winter Day, A Fateful Night</h3>
</div>
</div>
</div>
<script>
let listVideo = document.querySelectorAll('.episode-list .episode');
let mainVideo = document.querySelector('.main-video video');
let title = document.querySelector('.main-video .title')
listVideo.forEach(video =>{
video.onclick = () =>{
listVideo.forEach(episode => episode.classList.remove('active'));
video.classList.add('active');
};
});
</script>
This is the current structure of my webpage code (excluding the navigation bar and plyr code). I know my question might seem a little complex, but any guidance or assistance would be greatly appreciated :)