vue 使用video.js

Vue.js 可以轻松地集成 Video.js 来处理视频播放。下面是一个简单的示例：

首先，你需要安装 Video.js 和 vue-video-player 包：

npm install video.js vue-video-player

然后，在你的 Vue 组件中，导入和注册 VideoPlayer 组件：

import 'video.js/dist/video-js.css';
import 'vue-video-player/src/custom-theme.css';
import VideoPlayer from 'vue-video-player';

export default {
  components: {
    VideoPlayer,
  },
};

接下来，在你的模板中使用 VideoPlayer 组件，并传入视频文件的 URL：

<template>
  <div>
    <video-player :options="videoOptions" ref="videoPlayer"></video-player>
  </div>
</template>

在你的 Vue 实例中，定义 videoOptions 对象来配置 Video.js 的选项：

export default {
  data() {
    return {
      videoOptions: {
        controls: true, // 显示控制条
        sources: [{
          src: 'https://example.com/video.mp4', // 视频文件的 URL
          type: 'video/mp4', // 视频文件的 MIME 类型
        }],
      },
    };
  },
};

最后，在需要初始化视频播放器的时候，调用 `load()` 方法来加载视频：

export default {
  mounted() {
    this.$refs.videoPlayer.load(); // 加载视频
  },
};

这样就可以在你的 Vue 组件中使用 Video.js 来播放视频了。请确保你已经引入了 Video.js 和样式文件，并且给定了正确的视频文件 URL 和 MIME 类型。