vue-video-player播放本地视频

Vue-Video-Player 是一个基于 Vue.js 的视频播放组件，支持多种视频格式和流媒体协议。

要在 Vue-Video-Player 中播放本地视频，可以将视频文件放在 public 目录下，然后使用相对路径引用。例如，如果将视频文件放在 public/videos 目录下，可以在 Vue 组件中这样引用：

<template>
  <div>
    <video-player :options="playerOptions" :playlist="playlist"></video-player>
  </div>
</template>

<script>
import videoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'

export default {
  components: {
    videoPlayer
  },
  data() {
    return {
      playerOptions: {
        // 设置视频源
        sources: [
          {
            src: '/videos/my-video.mp4',
            type: 'video/mp4'
          }
        ]
      },
      playlist: [] // 这里可以为空数组，不会影响播放
    }
  }
}
</script>

在上面的示例中，我们将视频文件 my-video.mp4 放在 public/videos 目录下，然后使用相对路径 /videos/my-video.mp4 进行引用。注意，不需要在路径前面添加 baseUrl，Vue-Video-Player 会自动将相对路径转换为绝对路径。

当然，如果视频文件很大，不适合放在 public 目录下，也可以通过其他方式将视频文件加载到 Vue 组件中进行播放，比如使用 Vue-Resource 或者 axios 进行请求，然后将响应数据作为视频源进行播放。