Vue使用video.js的代码详解

下面将详细讲解Vue使用video.js的代码详解及其完整攻略。

什么是Vue

Vue是当前较为流行的前端框架之一，它采用MVVM的模式，使得数据和UI的双向绑定显得更加简单和快捷。

什么是video.js

video.js是一款开源的HTML5视频播放器，可以进行二次开发以满足开发者的需求，比浏览器自带的HTML5播放器具有更好的兼容性和支持性。

在Vue中使用video.js

概述

Vue是一个使用单文件组件的框架，因此Vue中使用video.js也需要采用这种方式，具体使用步骤如下。

安装video.js

首先需要安装video.js的相关依赖和插件，可以在命令行中输入以下命令进行安装：

npm install video.js --save
npm install vue-video-player vue-video-player --save

其中vue-video-player是实现video.js的Vue组件。

在Vue组件中引入video.js

在需要使用video.js的Vue组件中引入video.js组件，代码如下：

<template>
  <div class="video-player-container">
    <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";
import "vue-video-player/src/custom-theme.css";
import "vue-video-player/src/custom-theme.scss";
import "vue-video-player/src/lang/zh-CN";
import "vue-video-player/src/AutoFullscreen";
import "vue-video-player/src/Danmaku";
import "vue-video-player/src/EndWaiting";
import "vue-video-player/src/ErrorDisplay";
import "vue-video-player/src/hljs";
import "vue-video-player/src/Loading";
import "vue-video-player/src/PlayNext";
import "vue-video-player/src/Popup";
import "vue-video-player/src/Quality";
import "vue-video-player/src/Setting";
import "vue-video-player/src/Share";
import "vue-video-player/src/Title";

export default {
  data() {
    return {
      player: null
    };
  },

  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.options, function() {
      console.log("播放器已加载");
    });
  },

  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
};
</script>

<style scoped>
.video-player-container {
  width: 100%;
  height: 100%;
}
</style>

其中，import videojs from "video.js"; 引入video.js，import "video.js/dist/video-js.css"; 引入video.js的CSS样式文件，import "vue-video-player/src/custom-theme.css"; 引入video.js的Vue组件的CSS样式文件。

在data中定义一个名为player的变量，用于初始化video.js播放器。

在mounted钩子函数中，使用videojs()函数初始化播放器，其中参数为video标签的ref，options是可选参数，这里设为null。

在beforeDestroy钩子函数中，用于在组件销毁前及时清理播放器资源，避免内存泄漏。

在Vue组件中使用video.js

在Vue组件中使用video.js就像使用一个普通的video标签一样，直接在模板中使用即可，例如：

<template>
  <div class="video-player-container">
    <video ref="videoPlayer" class="video-js vjs-default-skin">
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    </video>
  </div>
</template>

需要注意的是，使用video.js播放器时，video标签中的source标签也需要手动填写，用于指定视频的URL和格式。

示例

示例1

下面的代码展示了如何使用video.js播放器播放本地视频资源：

<template>
  <div class="video-player-container">
    <video ref="videoPlayer" class="video-js vjs-default-skin">
      <source src="/video/test.mp4" type="video/mp4">
    </video>
  </div>
</template>

<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "vue-video-player/src/custom-theme.css";
import "vue-video-player/src/custom-theme.scss";
import "vue-video-player/src/lang/zh-CN";
import "vue-video-player/src/AutoFullscreen";
import "vue-video-player/src/Danmaku";
import "vue-video-player/src/EndWaiting";
import "vue-video-player/src/ErrorDisplay";
import "vue-video-player/src/hljs";
import "vue-video-player/src/Loading";
import "vue-video-player/src/PlayNext";
import "vue-video-player/src/Popup";
import "vue-video-player/src/Quality";
import "vue-video-player/src/Setting";
import "vue-video-player/src/Share";
import "vue-video-player/src/Title";

export default {
  data() {
    return {
      player: null
    };
  },

  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.options, function() {
      console.log("播放器已加载");
    });
  },

  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
};
</script>

<style scoped>
.video-player-container {
  width: 100%;
  height: 100%;
}
</style>

其中，<source src="/video/test.mp4" type="video/mp4"> 指定了本地MP4格式视频的URL和类型。

示例2

下面的代码展示了如何使用video.js播放器播放网络视频资源：

<template>
  <div class="video-player-container">
    <video ref="videoPlayer" class="video-js vjs-default-skin">
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    </video>
  </div>
</template>

<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "vue-video-player/src/custom-theme.css";
import "vue-video-player/src/custom-theme.scss";
import "vue-video-player/src/lang/zh-CN";
import "vue-video-player/src/AutoFullscreen";
import "vue-video-player/src/Danmaku";
import "vue-video-player/src/EndWaiting";
import "vue-video-player/src/ErrorDisplay";
import "vue-video-player/src/hljs";
import "vue-video-player/src/Loading";
import "vue-video-player/src/PlayNext";
import "vue-video-player/src/Popup";
import "vue-video-player/src/Quality";
import "vue-video-player/src/Setting";
import "vue-video-player/src/Share";
import "vue-video-player/src/Title";

export default {
  data() {
    return {
      player: null
    };
  },

  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.options, function() {
      console.log("播放器已加载");
    });
  },

  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
};
</script>

<style scoped>
.video-player-container {
  width: 100%;
  height: 100%;
}
</style>

其中，<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> 指定了网络上MP4格式视频的URL和类型。

总结

本文讲解了Vue使用video.js的代码详解及其完整攻略。通过阅读该文，可以学会在Vue中使用video.js的核心知识点，并掌握一个简单的使用示例。