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"
>

该实现包含视频列表展示、播放控制等基础功能，可根据实际需求进一步扩展如分页加载、分类筛选等功能。