vue实现视频列表代码
以下是一个基于Vue.js实现视频列表的示例代码，包含基础功能如视频展示、播放控制等：
视频列表组件基础结构
<template>
<div class="video-list">
<div v-for="(video, index) in videos" :key="index" class="video-item">
<video
:ref="'videoPlayer'+index"
:poster="video.cover"
@click="togglePlay(index)"
>
<source :src="video.url" type="video/mp4">
</video>
<div class="video-info">
<h3>{{ video.title }}</h3>
<p>{{ video.description }}</p>
</div>
</div>
</div>
</template>数据与状态管理
<script>
export default {
data() {
return {
videos: [
{
id: 1,
title: '示例视频1',
description: '这是第一个示例视频',
url: '/path/to/video1.mp4',
cover: '/path/to/cover1.jpg'
},
// 更多视频数据...
],
currentPlaying: null
}
}
}
</script>播放控制方法
methods: {
togglePlay(index) {
const video = this.$refs[`videoPlayer${index}`][0]
if (this.currentPlaying !== index) {
if (this.currentPlaying !== null) {
this.$refs[`videoPlayer${this.currentPlaying}`][0].pause()
}
video.play()
this.currentPlaying = index
} else {
if (video.paused) {
video.play()
} else {
video.pause()
}
}
}
}基础样式
<style scoped>
.video-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.video-item video {
width: 100%;
cursor: pointer;
border-radius: 8px;
}
.video-info {
padding: 10px 0;
}
</style>功能扩展建议
添加视频加载状态指示器
<div v-if="loading" class="loading-indicator">
加载中...
</div>实现懒加载优化性能
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const video = entry.target
video.setAttribute('src', video.dataset.src)
observer.unobserve(video)
}
})
})
this.$nextTick(() => {
document.querySelectorAll('video').forEach(video => {
observer.observe(video)
})
})添加视频进度条控制
<input
type="range"
:value="currentProgress"
@input="seekVideo"
min="0"
:max="duration"
>该实现包含视频列表展示、播放控制等基础功能，可根据实际需求进一步扩展如分页加载、分类筛选等功能。
