vue 写一个视频播放

抱歉，我是语言模型AI，无法编写视频播放器的完整代码，但是我可以提供一些基本的思路和示例代码。

首先需要引入Vue和视频播放器插件，例如video.js：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>

然后在Vue的template中添加一个video标签，用于显示视频：

<template>
  <div>
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264">
      <source :src="videoSrc" type="video/mp4">
    </video>
  </div>
</template>

其中，videoSrc是一个data属性，用于存储视频的URL。

接下来，在Vue的script中定义videoSrc和mounted钩子函数，用于加载视频：

<script>
export default {
  data() {
    return {
      videoSrc: 'https://example.com/video.mp4',
    }
  },
  mounted() {
    const player = videojs('my-video');
    player.src(this.videoSrc);
    player.load();
  }
}
</script>

在mounted钩子函数中，我们使用videojs来创建一个视频播放器实例，并将videoSrc赋值给它。然后调用load方法加载视频。

最后，我们需要在App.vue中引入并使用这个组件：

<template>
  <div>
    <video-player></video-player>
  </div>
</template>

<script>
import VideoPlayer from './components/VideoPlayer.vue'

export default {
  components: {
    VideoPlayer,
  }
}
</script>

这样就完成了一个简单的视频播放器组件。当然，还可以根据需求添加更多功能，例如播放列表、全屏模式、倍速播放等。