vue视频卡片案例代码

Vue.js 中的视频卡片通常是一个组件化的结构，用于展示视频信息并提供播放功能。下面是一个简单的 Vue 单文件组件 (Single File Component, SFC) 的例子，展示了如何创建一个视频卡片：

<template>
  <div class="video-card">
    <img :src="video.thumbnail" alt="Video Preview">
    <h3>{{ video.title }}</h3>
    <p>{{ video.description }}</p>
    <button @click="playVideo(video)" :disabled="!isPlaying">播放</button>
    <video v-if="isPlaying" controls>
      <source :src="video.src" type="video/mp4">
      您的浏览器不支持播放此视频。
    </video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      video: {
        title: '视频标题',
        description: '视频描述',
        thumbnail: 'path/to/video/thumbnail.jpg',
        src: 'path/to/video.mp4',
        isPlaying: false,
      },
    };
  },
  methods: {
    playVideo(video) {
      this.isPlaying = true;
      // 如果需要实际播放视频，你可以在这里添加一个视频播放函数，例如使用Vue的axios请求服务
    },
  },
};
</script>

<style scoped>
.video-card {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 15px;
}
</style>

在这个例子中，我们定义了一个名为 `video-card` 的组件，它有图片、标题、描述以及播放按钮。当用户点击播放按钮时，`playVideo` 方法会被触发，这里仅设置了一个标志 `isPlaying` 来模拟播放状态。在实际应用中，你可能需要连接到一个视频流源，并使用如VPlayer之类的库来处理视频播放。