video.js vue

### 如何在 Vue 项目中使用 Video.js

为了在 Vue 项目中集成并使用 Video.js，可以遵循以下方法：

#### 安装依赖库
首先，在项目根目录下通过 npm 或 yarn 来安装 `video.js` 和其对应的 CSS 文件。

npm install video.js --save

或者如果偏好使用 Yarn:

yarn add video.js

这一步骤确保了开发环境中有必要的 JavaScript 库来支持视频播放功能[^1]。

#### 导入 Video.js 到组件内
接着，在打算使用的 Vue 组件里导入所需的模块。通常是在 `<script>` 部分完成这项工作。

import videojs from 'video.js';
require('video.js/dist/video-js.min.css');

这段代码不仅引入了核心的 Video.js 功能，还加载了默认样式表以美化播放器界面[^2]。

#### 创建 HTML 结构与初始化 Player 实例
最后，在模板部分定义好用于承载视频内容的 DOM 元素，并调用 `videojs()` 函数创建一个新的播放实例。

<template>
  <div class="video-container">
    <!-- 视频容器 -->
    <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
      <source src="path/to/your/video.mp4" type='video/mp4'>
        Your browser does not support the video tag.
    </video>
  </div>
</template>

<script>
export default {
  mounted() {
    let player = this.player = videojs('my-video', {}, function onPlayerReady() {
      console.log('Your player is ready!');
    });
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
}
</script>

上述示例展示了如何设置一个基本的视频播放控件，并且包含了生命周期钩子函数用来处理组件挂载和销毁期间的操作，从而保证资源能够被妥善管理。