video网络页面播放器: 组件video-player-vue和video.js 常用库

网页放置视频播放器，一般都是用video.js(h5也使用过)和它的插件vue-video-player；

正常情况下对于简单的视频 video.js够用了，支持H5和flash视频播放；  播放RTMP 视频流

一、vue-video-player组件

1 、安装

npm install vue-video-player --save

2、 引入使用          

（1）全局引入
import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
//播放rtmp视频
import 'videojs-flash'
//引入 hls,视频直播(m3u8)必须引入的
import 'videojs-contrib-hls'
import 'video.js/dist/video-js.css'
  
Vue.use(VideoPlayer)


（2）组件内部引入使用
import { videoPlayer } from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
 
export default {
 components: {
 videoPlayer
 }
}

3 demo 实例和一些配置

二、video.js 库的使用配置

        Video.js 是一个开源的 HTML5 jQuery 视频插件，这个插件可以用来处理 Flash 视频，它还是一个多平台支持的产品。具体方法、属性配置查看：js插件---videojs中文文档详解

1 安装video.js  ：

        videojs6xx以上的版本已经移除了flash，所以需要我们手动安装flash播放器;

npm install video.js --save

// 需要flash推流 安装videojs-flash; 

npm install videojs-flash --save //安装

import  "videojs-flash"  //在我们要使用的文件中导入就行

2 引用使用main js：

// 1mainjs 引入使用
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video

3 demo实例代码