vue项目中的视频直播插件

所用插件vue-video-player 这是一款基于video.js的视频播放器插件

插件的使用：

安装：

npm install vue-video-player --save

全局引入

import Vue from 'vue'

import VueVideoPlayer from 'vue-video-player'

 

// require videojs style

import 'video.js/dist/video-js.css'

// import 'vue-video-player/src/custom-theme.css'

Vue.use(VueVideoPlayer, /* {

  options: global default options,

  events: global videojs events

} */)

 

在组件中引入

// require styles

import 'video.js/dist/video-js.css'

 

import { videoPlayer } from 'vue-video-player'

 

export default {

  components: {

    videoPlayer

  }

}

 

我们封装一个video的组件

 

在父组件中引入

videoSrc：播放源1

sources02：播放源2

poster：封面图