如何实现点击E01/E02按钮在Video.js播放器内切换视频？

这个需求非常容易实现，只需要调整HTML结构并添加少量JavaScript逻辑即可，以下是具体修改方案：

核心修改点 #

• 将剧集链接从<video>标签内部移出（Video.js的<video>标签内仅应放置<source>等播放器专属元素）
• 给每个剧集链接添加自定义属性存储对应视频地址，绑定点击事件阻止默认跳转行为
• 利用Video.js的API更新视频源并触发播放

完整修改代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
</head>

<body>
  <!-- 剧集控制区 -->
  <div class="episode-controls">
    <b>Season 1</b>
    <a href="#" data-video-url="https://vjs.zencdn.net/v/oceans.mp4">E01</a>
    <a href="#" data-video-url="https://vjs.zencdn.net/v/oceans.mp4">E02</a>
    <!-- 可继续添加更多剧集 -->
  </div>

  <!-- Video.js播放器 -->
  <video id="videoPlayer" class="video-js vjs-big-play-centered" controls preload="auto" width="593" height="364" poster="" data-setup="{}">
    <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
  </video>

  <!-- 先引入Video.js脚本，再初始化播放器 -->
  <script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
  <script>
    // 初始化播放器
    const player = videojs('videoPlayer', {});

    // 绑定剧集点击事件
    document.querySelectorAll('.episode-controls a').forEach(link => {
      link.addEventListener('click', function(e) {
        // 阻止默认页面跳转
        e.preventDefault();
        // 获取当前剧集对应的视频地址
        const videoUrl = this.getAttribute('data-video-url');
        // 更新播放器视频源
        player.src({
          src: videoUrl,
          type: 'video/mp4'
        });
        // 切换后自动播放（不需要可删除此行）
        player.play();
      });
    });
  </script>
</body>

</html>

关键代码说明 #

• data-video-url：自定义属性，专门存储剧集对应的视频地址，替代原href的跳转逻辑
• e.preventDefault()：拦截<a>标签的默认跳转行为，确保在当前页面处理
• player.src()：Video.js官方提供的API，用于更新播放器的视频源
• player.play()：切换视频源后自动触发播放，可根据需求选择保留或移除

额外优化建议 #

• 可以给当前播放的剧集添加高亮样式，方便用户识别正在播放的内容
• 若存在多种视频格式，可在player.src()中传入包含多格式的数组，提升兼容性

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