vue 踩过的坑 --- vue-video-player

vue 踩过的坑 — vue-video-player

最近做直播，需要直播流播放器，由于用的是vue-cli，找了些插件，最终选定vue-video-player ,使用流程及一些问题的解决方案如下：

1. 安装
   npm install vue-video-player -S
   npm install --save videojs-contrib-hls(如果做直播的话必须要安装)

2. main.js 配置
   //引入css
   require(‘vue-video-player/src/custom-theme.css’)
   require(’…/static/css/myvideo.css’) //如果你需要自定义播放器的样式，自己新建一个css
   //引入video插件
   import VideoPlayer from ‘vue-video-player’
   //引入 hls
   import ‘videojs-contrib-hls’

3. 页面部分

4. List item

	 @play = "fun($event)" 事件绑定方式，参见官方文档 其中$event 为实例化的player

		export default {
			data(){
				return {
					playerOptions:{},//存放播放器的配置文件
				}
			}，
			methods:{
			    onLive(onM3u8,onCover){
			       var that = this
				        
				        this. playerOptions =  {
				            notSupportedMessage: "此视频暂无法播放，请稍后再试",
				            autoplay: false, //如果true,浏览器准备好时开始回放。
				            loop: false, // 导致视频一结束就重新开始。
				           // preload: 'auto', // 建议浏览器在

4. 适配和兼容
   当需要修改播放器的一些样式 ，发现在在当前页面的style中修改，并不生效，即使加了 “！important”，经调查发现，样式没有修改成功是因为加载顺序的问题 而并非 权重 （我这么认为的 对不对不知道）
   解决方案：
   mainjs 里面引入了自定义的css文件 myvideo.css
   类似如下：

.vjs-volume-panel {  
    opacity: 0;
}

由于 配置选项中 control 未生效，但是又不想显示 控制条中的一些图标 比如 live 图标，所以我采用了爆破方式，直接在自定义的css文件里 写css覆盖，亲测有效

5. 大坑
   vue-video-player 依赖 video.js
   npm install vue-video-player 的时候 自动安装了 video.js
   千万不要自己装 video.js 千万不要自己装 video.js 千万不要自己装 video.js
   否则会冲突直接报错 pause 什么的