VUE+SPRINGBOOT从0-1打造前后端-前后台系统-视频列表与视频播放
在现代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;"><videocontrolsautoplay: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存储当前正在播放的视频，初始为nullplayVideo方法处理视频点击逻辑：如果点击的是当前播放的视频，则关闭播放器（设置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视频标签的使用
这个组件结构清晰，功能完善，可以作为视频网站的基础组件使用。开发者可以根据实际需求进行扩展和优化。
希望这篇文章对您有所帮助！如果您有任何问题或建议，欢迎在评论区留言讨论。