点击指定h3标签时如何切换视频播放器源及对应的展示标题？

实现步骤 #

1. 修改HTML结构，为每个剧集项存储对应视频地址
   给所有.episode节点添加data-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">
        <!-- 给每个episode加data-video属性存对应视频链接 -->
        <div class="episode active" data-video="这里填序章的视频地址">
            <img src="image link here" alt="">
            <h3 class="title">00. Prologue</h3>
        </div>
        <div class="episode" data-video="这里填第一集的视频地址">
            <img src="image link here" alt="">
            <h3 class="title">01. A Winter Day, A Fateful Night</h3>
        </div>
    </div>
</div>

2. 调整JS逻辑，实现点击切换资源和标题
   注意原代码中主视频的标题类是ep-title，要修正选择器，同时新增切换源、同步标题的逻辑：

let listVideo = document.querySelectorAll('.episode-list .episode');
let mainVideo = document.querySelector('.main-video video');
// 修正选择器，匹配主视频区的标题类
let epTitle = document.querySelector('.main-video .ep-title');

listVideo.forEach(videoItem => {
    videoItem.onclick = () => {
        // 切换激活状态
        listVideo.forEach(episode => episode.classList.remove('active'));
        videoItem.classList.add('active');
        // 读取当前剧集的视频地址和标题
        let videoSrc = videoItem.getAttribute('data-video');
        let currentTitle = videoItem.querySelector('.title').textContent;
        // 更新主播放器资源和标题
        mainVideo.src = videoSrc;
        epTitle.textContent = currentTitle;
        // 加载并播放新视频，不需要自动播放可以删掉play()
        mainVideo.load();
        mainVideo.play();
    };
});

兼容Plyr播放器的补充说明 #

如果你使用了Plyr封装播放器，不要直接修改原生video的src，改用Plyr提供的source方法更新资源即可，假设你初始化的Plyr实例名为player，替换上面更新资源的代码即可：

player.source = {
    type: 'video',
    sources: [
        {
            src: videoSrc,
            type: 'video/mp4' // 对应你视频的实际格式
        }
    ]
};

内容的提问来源于stack exchange，提问作者Aika Otsuka