帮我写一个基于vue-video-player的的播放视频组建

好的，下面是一个基于 Vue.js 和 vue-video-player 的视频播放组件的示例代码：

<template>
  <div>
    <video-player
      ref="videoPlayer"
      :options="playerOptions"
      :playsinline="true"
      @play="onPlayerPlay"
      @pause="onPlayerPause"
      @ended="onPlayerEnded"
      @loadedmetadata="onPlayerLoadedMetadata"
      @timeupdate="onPlayerTimeupdate"
    ></video-player>
  </div>
</template>

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

export default {
  name: 'VideoPlayer',
  components: {
    VideoPlayer,
  },
  data() {
    return {
      playerOptions: {
        autoplay: false,
        controls: true,
        sources: [
          {
            src: 'your_video_url',
            type: 'video/mp4',
          },
        ],
      },
    };
  },
  methods: {
    onPlayerPlay() {
      console.log('Video is playing');
    },
    onPlayerPause() {
      console.log('Video is paused');
    },
    onPlayerEnded() {
      console.log('Video has ended');
    },
    onPlayerLoadedMetadata() {
      console.log('Video metadata is loaded');
    },
    onPlayerTimeupdate() {
      console.log('Video time is updated');
    },
  },
};
</script>

在这个组件中，我们使用了 Vue.js 和 vue-video-player 组件。我们同时也引入了 video.js 的 CSS 样式。在组件中，我们将视频播放器视图嵌套在 `div` 元素中，并传递 `playerOptions` 属性给 `video-player` 组件，以配置播放器选项。

我们还定义了一些方法来处理播放器事件，如 `onPlayerPlay`、`onPlayerPause`、`onPlayerEnded`、`onPlayerLoadedMetadata` 和 `onPlayerTimeupdate`。你可以根据自己的需求自定义这些方法。

最后，你可以在 `sources` 属性中指定视频的 URL 和类型。在这里，我们使用了 MP4 视频类型。