vue-video-player基本使用

项目上有一个新的需求，点击视频全屏播放，当即想到了video.js插件，兼容性好，比原生video好用多了。因为项目用的是vue-element-ui技术栈，考虑技术的融合性，最终使用了vue-video-player

1. 首先是npm i vue-video-player -D 安装依赖
2. 在main.js里面引入

import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)

此处代码主要是用来覆盖video的播放按钮样式
require('./styles/video.css');具体内容如下

 .video-js .vjs-big-play-button {
	  width: 72px;
	  height: 72px;
	  border-radius: 100%;
	  z-index: 100;
	  background-color: #ffffff;
	  border: solid 1px #979797;
	}

3. vue组件中使用