基于HTML & CSS的带菜单视频播放器开发咨询

核心实现思路 #

要实现这个需求，核心是通过JavaScript监听菜单点击事件，动态修改<video>标签的src属性切换视频，同时同步播放状态。整体分三个核心部分：

• HTML搭建基础结构：视频容器+切换菜单
• CSS做轻量化样式适配（贴合作品集的简洁风格）
• JS实现切换逻辑与状态同步

完整代码示例 #

HTML结构

<div class="portfolio-player">
  <video id="videoPlayer" controls width="640" poster="默认封面图地址">
    <source src="初始视频地址.mp4" type="video/mp4">
    你的浏览器不支持视频播放
  </video>
  <ul class="video-menu">
    <li data-video="作品1.mp4" class="active">项目演示1</li>
    <li data-video="作品2.mp4">项目演示2</li>
    <li data-video="作品3.mp4">项目演示3</li>
  </ul>
</div>

CSS样式（适配作品集风格）

.portfolio-player {
  max-width: 640px;
  margin: 20px auto;
  font-family: sans-serif;
}

#videoPlayer {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.video-menu {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.video-menu li {
  padding: 8px 16px;
  background: #f0f0f0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.video-menu li.active {
  background: #2563eb;
  color: white;
}

.video-menu li:hover {
  background: #e0e0e0;
}

.video-menu li.active:hover {
  background: #1d4ed8;
}

JavaScript逻辑

const videoPlayer = document.getElementById('videoPlayer');
const menuItems = document.querySelectorAll('.video-menu li');

// 给每个菜单项绑定点击事件
menuItems.forEach(item => {
  item.addEventListener('click', () => {
    // 移除所有菜单项的active类
    menuItems.forEach(li => li.classList.remove('active'));
    // 标记当前选中菜单项
    item.classList.add('active');
    
    // 获取目标视频地址并切换
    const videoSrc = item.getAttribute('data-video');
    videoPlayer.src = videoSrc;
    
    // 自动播放（部分浏览器需用户交互后触发，可根据需求调整）
    videoPlayer.play().catch(err => {
      console.log('自动播放失败:', err);
    });
  });
});

扩展优化方向（适合作品集升级） #

• 封面同步：给菜单项添加data-poster属性，切换时同步修改video的poster
• 状态同步：记录当前播放状态，切换后保持播放/暂停状态
• 缩略图菜单：将文字选项替换为带缩略图的按钮，提升视觉质感
• 响应式适配：移动端将菜单改为垂直排列，适配小屏幕
• 加载提示：切换视频时添加加载动画，优化用户体验

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