vue中如何使用Video.js

在Vue中使用Video.js，首先你需要安装Video.js及其相关的插件。你可以通过npm（Node Package Manager）来安装：

npm install video.js vue-video-player

然后，在Vue项目中引入Video.js样式和JS文件：

<script src="node_modules/video.js/dist/video.min.js"></script>
<link rel="stylesheet" href="node_modules/video.js/dist/video-js.min.css">

接下来，创建一个Vue组件来展示视频：

<template>
  <div id="player">
    <video-js v-if="playerReady" :id="playerId" controls></video-js>
  </div>
</template>

<script>
import Vue from 'vue';
import Video from 'vue-video-player';

export default {
  components: { VideoPlayer: Video },
  data() {
    return {
      playerId: 'my-videoplayer',
      playerReady: false,
      src: 'https://your-secure-video-url.com', // 替换为你的HTTPS视频URL
    };
  },
  mounted() {
    this.player = new window.VideoJS(this.playerId, { autoplay: true }); // 初始化Video.js实例
    this.player.on('loadedmetadata', () => (this.playerReady = true)); // 当视频准备就绪时更新 playerReady
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose(); // 销毁时释放资源
    }
  },
};
</script>

在这个例子中，`v-if`用于条件渲染，只有当`playerReady`为`true`时，视频才会显示出来。`mounted`钩子会在Vue实例挂载后立即运行，初始化并监听视频事件。`beforeDestroy`则确保在组件卸载前销毁Video.js实例。