基于VideoJS构建多视频页面：方案难易对比与入门方向咨询

嘿，这个问题我刚好有不少实践经验，咱们来掰扯清楚～

实现难度对比 #

毫无疑问，**方案一（单播放器+链接切换视频）**的实现难度更低，理由很简单：

• 只需要初始化1个VideoJS播放器实例，不用重复处理多播放器的配置、事件监听
• 完全避免了多视频同时播放的问题（因为只有一个播放器在工作）
• 代码量更少，逻辑更集中，后期维护也更省心

方案二虽然看起来直接，但要解决多视频同时播放的问题，就得给每个播放器加事件监听（比如播放时暂停其他所有播放器），额外增加了不少代码逻辑，反而更麻烦。

入门实施方向 #

方案一的快速上手步骤 #

1. 基础HTML结构搭建
   先写一个链接列表和一个空的VideoJS容器：

   <!-- 视频选择列表 -->
   <div class="video-links">
     <a href="#" data-video-url="video1.mp4">视频1：XX主题</a>
     <a href="#" data-video-url="video2.mp4">视频2：XX主题</a>
     <!-- 最多加到10个 -->
   </div>
   
   <!-- VideoJS播放器容器 -->
   <video id="my-player" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="264" data-setup='{}'>
     <p class="vjs-no-js">请启用JavaScript以播放视频</p>
   </video>
   

2. 引入VideoJS资源
   在页面头部加VideoJS的CSS和JS：

   <link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet" />
   <script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
   

3. 编写切换逻辑的JS代码
   获取播放器实例，然后给每个链接加点击事件，切换视频源：

   // 初始化播放器
   const player = videojs('my-player');
   
   // 获取所有视频链接
   const videoLinks = document.querySelectorAll('.video-links a');
   
   // 给每个链接绑定点击事件
   videoLinks.forEach(link => {
     link.addEventListener('click', (e) => {
       e.preventDefault(); // 阻止默认跳转行为
       const videoUrl = link.getAttribute('data-video-url');
       
       // 切换视频源
       player.src({
         type: 'video/mp4',
         src: videoUrl
       });
       
       // 自动播放（可选，根据需求调整）
       player.play();
     });
   });
   

4. 优化细节（可选）
   • 给当前选中的链接加高亮样式，方便用户识别
   • 支持多种视频格式（比如添加webm源），兼容更多浏览器
   • 加载新视频时显示加载提示

方案二的入门注意点（如果非要选这个） #

如果因为某些需求必须用多播放器，核心要解决同时播放的问题，关键代码逻辑：

// 获取所有VideoJS播放器实例
const players = Array.from(videojs.getPlayers().values());

// 给每个播放器加播放事件监听
players.forEach(currentPlayer => {
  currentPlayer.on('play', () => {
    // 暂停其他所有播放器
    players.forEach(player => {
      if (player !== currentPlayer && player.paused() === false) {
        player.pause();
      }
    });
  });
});

但这个方案需要给每个视频都写独立的<video>标签，初始化多个播放器，代码冗余度更高，新手容易出问题。

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