在現代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視頻標簽的使用
這個組件結構清晰，功能完善，可以作為視頻網站的基礎組件使用。開發者可以根據實際需求進行擴展和優化。
希望這篇文章對您有所幫助！如果您有任何問題或建議，歡迎在評論區留言討論。
——策略模式)
