vue2 后台视频列表 播放展示

Vue2中展示后台视频列表并播放通常涉及几个关键步骤：

1. **数据绑定**：首先，你需要从服务器获取视频数据，通常通过API调用。在`data()`函数中定义一个数组来存储视频对象，每个对象包含视频ID、URL、标题等信息。

data() {
  return {
    videos: [],
  };
},
created() {
  axios.get('/api/videos') // 替换为实际的API请求
    .then(response => (this.videos = response.data));
}

2. **模板渲染**：在HTML模板中，可以使用`v-for`指令遍历`videos`数组，并创建一个`video-item`组件来显示每个视频的信息。例如：

<template>
  <div class="video-list">
    <video-item v-for="video in videos" :key="video.id" :url="video.url" :title="video.title"></video-item>
  </div>
</template>

3. **视频组件** (`video-item.vue`):
创建一个自定义组件如`VideoItem.vue`，包含一个`iframe`或`video`元素，用于播放视频。需要提供一个事件监听器（如`@click`）来触发播放操作。

<template>
  <div>
    <a @click="play(video.url)">
      <img :src="thumbnailUrl" alt="视频缩略图" />
    </a>
    <video v-if="isPlaying(video.url)" controls>
      <source :src="video.url" type="video/mp4" />
    </video>
  </div>
</template>

<script>
export default {
  props: ['url', 'title'],
  computed: {
    thumbnailUrl() {
      // 计算缩略图 URL
    },
    isPlaying(url) {
      // 根据当前页面的播放状态判断是否正在播放该视频
    },
  },
  methods: {
    play(url) {
      this.$emit('play', url); // 触发父组件播放事件
    },
  },
};
</script>

4. **父组件处理播放**：
在父组件中监听来自子组件的`play`事件，然后在内部管理全局播放状态。

methods: {
  handlePlay(url) {
    // 播放逻辑，比如更新一个全局播放状态变量或调用播放API
  }
},
events: {
  'play'(url) {
    this.handlePlay(url);
  },
}