如何给HTML+CSS+JS视频播放列表添加动态描述容器？

核心思路 #

通过为每个视频列表项添加自定义数据属性存储描述和链接信息，点击时从当前选中项提取数据，同步更新主视频区域的描述容器内容，彻底解决仅能生效一次的问题。

1. 为列表项添加数据属性 #

在每个.list元素上添加data-desc（存储描述文本）和data-link（存储跳转链接）属性，示例如下：

<div class="list active" data-desc="这是视频1的详细介绍，涵盖核心内容与制作背景。" data-link="https://example.com/video1">
  <video src="video1.mp4" poster="" class="list-video"></video>
  <h3 class="list-title">VIDEO 1</h3>
</div>

<div class="list" data-desc="视频2聚焦实操演示，适合新手快速上手。" data-link="https://example.com/video2">
  <video src="video2.mp4" class="list-video"></video>
  <h3 class="list-title">VIDEO 2</h3>
</div>
<!-- 其余列表项按相同格式添加对应数据 -->

2. 添加主视频描述容器 #

在.main-video-container内的标题下方新增描述与链接展示容器：

<div class="main-video-container">
  <video src="video1.mp4" loop controls controlsList="nodownload" class="main-video"></video>
  <h3 class="main-vid-title">VIDEO 1</h3>
  <!-- 新增描述容器 -->
  <div class="video-description">
    <p class="desc-text">这是视频1的详细介绍，涵盖核心内容与制作背景。</p>
    <a href="https://example.com/video1" class="desc-link" target="_blank">查看更多</a>
  </div>
</div>

3. 更新JavaScript逻辑 #

修改原有JS代码，添加提取数据属性并更新描述容器的逻辑：

let videoList = document.querySelectorAll('.video-list-container .list');
// 提前获取描述容器元素，避免重复DOM查询
const descText = document.querySelector('.video-description .desc-text');
const descLink = document.querySelector('.video-description .desc-link');

videoList.forEach(vid => {
  vid.onclick = () => {
    // 移除所有列表项的active类
    videoList.forEach(item => item.classList.remove('active'));
    vid.classList.add('active');
    
    // 获取当前视频的核心数据
    const videoSrc = vid.querySelector('.list-video').src;
    const videoTitle = vid.querySelector('.list-title').textContent;
    const videoDesc = vid.dataset.desc;
    const videoLink = vid.dataset.link;
    
    // 更新主视频区域内容
    document.querySelector('.main-video').src = videoSrc;
    document.querySelector('.main-vid-title').textContent = videoTitle;
    descText.textContent = videoDesc;
    descLink.href = videoLink;
  };
});

4. （可选）美化描述容器样式 #

添加以下CSS让展示效果更协调：

.container .main-video-container .video-description {
  margin-top: 15px;
  padding: 12px 15px;
  background-color: #f5f5f5;
  border-radius: 5px;
  text-align: left;
}

.container .main-video-container .desc-text {
  color: #444;
  line-height: 1.6;
  margin: 0 0 10px;
}

.container .main-video-container .desc-link {
  color: #528bc6;
  font-weight: 600;
  text-decoration: none;
}

.container .main-video-container .desc-link:hover {
  text-decoration: underline;
}

问题根源说明 #

之前仅能生效一次的原因通常是：

• 未正确绑定元素，或DOM查询出错导致后续更新失效
• 未将描述与链接数据和对应列表项绑定，而是使用固定变量存储，无法动态获取新数据

通过数据属性绑定+每次点击实时提取数据的方式，可确保每次切换都能获取当前视频的最新信息，彻底解决问题。

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