单击特定的 h3 标签后如何更改视频的来源？

Question

所以我目前正在尝试制作一个视频流媒体网站，但我有点卡住了。

我试图让剧集选择器改变视频的来源，但我对如何让它改变播放器的来源有点困惑。我还尝试根据选择的视频更改播放器下方的文本。

    <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>

这是我的页面代码（不包括导航栏和 plyr 代码）目前的样子。我事先道歉，因为我的问题可能有点复杂（我缺乏脑细胞哈哈）但任何帮助表示赞赏:)

Answer 1

我认为 mainVideo.setAttribute('src', YOURSOURCELINK); 应该更改视频源。要更改标题文本，您可以使用 title.innerHTML = "NEWTEXT"

例如：

“索引”参数是列表中的索引（请记住，js 的第一个索引以 0 开头），因此要获取第一集，您可以使用 changeVideo(0)，对于第二集，您可以使用 changeVideo(1)等等

var list = [{
    title: "Episode 1",
    src: "some source link"
},{
    title: "Episode 2",
    src: "seconde source link"
}];


function changeVideo(index){
    let mainVideo = document.querySelector('.main-video video');
    let title = document.querySelector('.main-video .title')

    mainVideo.setAttribute("src", list[index].src)
    title.innerHTML = list[index].title

}

那么您需要在您的视频中添加一个点击事件 select，例如在您的 <div class="episode">

中添加 onclick="changeVideo(1)"

Answer 2

const btn = document.getElementById('change-url');
const video = document.getElementById('video');


btn.addEventListener('click',()=>{
   console.log(video)
   video.setAttribute('src','http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4');
})

<button id="change-url">change url</button>
<br/><br/>

<video id="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" width="300px" controls autoplay></video>

单击特定的 h3 标签后如何更改视频的来源？

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

html

javascript

css

video-streaming

web