【vue】视频播放器video.js插件使用：

<template>
  <div>
    <video ref="videoPlayer" class="video-js vjs-default-skin"></video>
  </div>
</template>
 
<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
 
export default {
  name: 'VideoPlayer',
  props: {
    options: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      player: null,
    };
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
      console.log('Player is ready');
    });
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  },
};
</script>
 
<style>
/* Add custom styles here, they will be applied to the video player */
.video-js .vjs-play-control {
  /* Example: Hide the play button */
  display: none;
}
</style>

这个代码实例展示了如何在Vue组件中集成video.js插件，并在模板中添加了一个视频播放器。在组件的mounted生命周期钩子中初始化了video.js播放器，并在beforeDestroy钩子中清理了播放器资源。同时，展示了如何通过CSS添加自定义样式到视频播放器中。