How can I change the source of a video after clicking a specific h3 tag?

So I'm currently trying to make a video streaming site but I'm a bit stuck.

I'm trying to make the episode selector change the source of the video but I am a little confused as to how I can make it change the source of the player. I'm also trying to make the text below the player change depending on which video is selected.

    <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>
    </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 what my code for the page (excluding the nav bar and plyr code) currently looks like. I do apologies beforehand as my question might be a bit complicated (I lack braincells lol) but any help is appreciated :)