vue3 集成 vue-video-player

### 集成 `vue-video-player` 到 Vue 3 项目

为了在 Vue 3 中集成 `vue-video-player`, 可以按照如下方法操作：

安装依赖库，通过 npm 或者 yarn 安装 `@videojs/vhs-utils` 和 `vue-video-player`. 这些工具提供了必要的功能来处理视频播放器组件。

npm install @videojs/vhs-utils vue-video-player --save

或者使用 yarn:

yarn add @videojs/vhs-utils vue-video-player

创建一个新的 VideoPlayer 组件, 并引入所需的模块.

// src/components/VideoPlayer.vue
<template>
  <div>
    <video-player :options="playerOptions"></video-player>
  </div>
</template>

<script>
import { videoPlayer } from 'vue-video-player'
export default {
  name: "VideoPlayer",
  components: {
    videoPlayer,
  },
  data() {
    return {
      playerOptions: {
        sources: [{
          type: "video/mp4",
          src: "http://example.com/path/to/video.mp4"
        }],
        poster: "/path/to/poster.jpg", // your video thumbnail can be specified here.
        notSupportedMessage: 'This browser does not support the video format.'
      }
    };
  }
}
</script>

最后，在主应用文件中注册这个新组建并使用它[^1].

// main.js or app entry file
import App from './App.vue';
import VideoPlayerComponent from "./components/VideoPlayer";

const app = createApp(App);
app.component('video-player-component', VideoPlayerComponent);

app.mount('#app');

现在可以在任何地方使用 `<video-player-component></video-player-component>` 来显示视频播放器了。