如何用Vue.js开发一个视频播放网站

vue create video-player-site
cd video-player-site
npm install vue-router vuex axios

<template>
  <div class="video-player">
    <video ref="videoPlayer" :src="videoSource" controls></video>
    <div class="controls">
      <button @click="play">Play</button>
      <button @click="pause">Pause</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VideoPlayer',
  props: {
    videoSource: String
  },
  methods: {
    play() {
      this.$refs.videoPlayer.play();
    },
    pause() {
      this.$refs.videoPlayer.pause();
    }
  }
}
</script>

<style scoped>
.video-player {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.controls {
  margin-top: 10px;
}
</style>

<template>
  <div class="video-list">
    <div v-for="video in visibleVideos" :key="video.id" class="video-item">
      <img :src="video.thumbnail" alt="Video Thumbnail">
      <h3>{{ video.title }}</h3>
      <p>{{ video.description }}</p>
      <button @click="playVideo(video)">Play</button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'VideoList',
  computed: {
    ...mapState(['videos']),
    visibleVideos() {
      // 这里可以实现虚拟滚动逻辑
      return this.videos.slice(0, 20) // 仅展示前20个视频作为示例
    }
  },
  methods: {
    playVideo(video) {
      this.$router.push({ name: 'VideoPlayer', params: { id: video.id } })
    }
  }
}
</script>

<style scoped>
.video-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.video-item {
  width: 30%;
  margin-bottom: 20px;
}
</style>