VUE+SPRINGBOOT从0-1打造前后端-前后台系统-视频列表与视频播放-CSDN博客

在现代Web开发中，视频播放功能已成为许多网站的基本需求。本文将基于Vue.js框架，详细讲解如何实现一个视频列表与播放器交互的功能模块。这个组件可以让用户点击列表中的视频项来播放对应的视频，并支持再次点击关闭播放器。

功能概述

我们实现的功能包括：

展示视频列表，包含视频名称和大小信息
点击视频名称可展开播放器播放对应视频
再次点击同一视频可关闭播放器
响应式设计，适配不同屏幕尺寸

代码解析

模板部分

<template>
  <div class="video-container" style="padding: 10px">
    <el-card>
      <!-- 视频列表 -->
      <div v-for="item in videoList" :key="item.id"
           style="margin: 10px 0;padding: 10px 0;color: #666666;border-bottom: 1px dashed #cccccc">
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <span style="font-size: 18px;cursor: pointer" class="item"
                @click="playVideo(item)">{{ item.name }}</span>
          <span style="font-size: 12px;">文件大小：{{ (item.size / 1000).toFixed(2) }}M</span>
        </div>

        <!-- 视频播放器 (只在当前选中视频时显示) -->
        <div v-if="currentVideo && currentVideo.id === item.id" style="margin-top: 15px;">
          <video
              controls
              autoplay
              :src="currentVideo.url"
              style="width: 100%; max-height: 500px; background: #000;">
            您的浏览器不支持 HTML5 video 标签。
          </video>
          <div style="margin-top: 10px; color: #999; font-size: 14px;">
            {{ currentVideo.description || '暂无描述' }}
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

关键点解析：

使用v-for指令循环渲染视频列表
每个视频项包含名称和大小信息
视频名称添加了点击事件@click="playVideo(item)"
使用v-if条件渲染，只在当前选中视频时显示播放器
播放器使用HTML5的<video>标签，并添加了controls和autoplay属性

脚本部分

<script>
export default {
  name: "VideoPlayer",
  data() {
    return {
      videoList: [
        {
          id: 1,
          name: "心愿",
          url: "https://chelaike.oss-cn-beijing.aliyuncs.com/wx_clue_pic/20250713105505_4d803e6f.mp4",
          size: 1024000,
          description: "心愿"
        },
        // 其他视频项...
      ],
      currentVideo: null
    }
  },
  methods: {
    playVideo(video) {
      if (this.currentVideo && this.currentVideo.id === video.id) {
        // 如果点击的是当前正在播放的视频，则关闭播放器
        this.currentVideo = null;
      } else {
        // 否则播放选中的视频
        this.currentVideo = {...video};
      }
    }
  }
}
</script>

关键点解析：

videoList数组存储所有视频数据，每个视频对象包含id、name、url、size和description属性
currentVideo存储当前正在播放的视频，初始为null
playVideo方法处理视频点击逻辑：
- 如果点击的是当前播放的视频，则关闭播放器（设置currentVideo为null）
- 否则，设置currentVideo为选中的视频对象

样式部分

<style scoped>
.video-container {
  max-width: 1200px;
  margin: 0 auto;
}

.item:hover {
  color: #409EFF;
}
</style>

关键点解析：

scoped属性确保样式只作用于当前组件
限制容器最大宽度为1200px并居中显示
鼠标悬停时视频名称变色，提升用户体验

功能扩展建议

视频分类：可以添加分类标签，实现按分类筛选视频
分页加载：对于大量视频，可以实现分页或无限滚动加载
播放历史：记录用户观看历史，方便回看
全屏播放：添加全屏播放按钮，提升观看体验
播放进度保存：使用localStorage保存视频播放进度

性能优化建议

懒加载：只有当视频进入可视区域时才加载视频资源
预加载：可以预加载下一个视频的部分内容，减少等待时间
缩略图：为每个视频添加缩略图，提升用户体验
视频格式检测：检测浏览器支持的视频格式，提供最佳兼容性

兼容性考虑

使用<video>标签的fallback内容处理不支持HTML5 video的浏览器
考虑提供多种视频格式（如MP4、WebM）以确保跨浏览器兼容
对于移动设备，可能需要特别处理自动播放策略

总结

本文详细讲解了一个基于Vue.js的视频列表与播放器交互组件的实现。通过这个示例，我们学习了：

Vue的列表渲染(v-for)
条件渲染(v-if)
事件处理(@click)
响应式数据管理
HTML5视频标签的使用

这个组件结构清晰，功能完善，可以作为视频网站的基础组件使用。开发者可以根据实际需求进行扩展和优化。

希望这篇文章对您有所帮助！如果您有任何问题或建议，欢迎在评论区留言讨论。