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

		<video-player  class="video-player vjs-custom-skin" id="myVideo"
            ref="videoPlayer"
                :playsinline="true"
                :options="playerOptions"
                @statechanged="playerStateChanged($event)"
                 @play="onPlayerPlay($event)"
                @error="onError($event)" 
            ></video-player>

	 @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', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
				            language: 'zh-CN',
				            aspectRatio:"16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
				            fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
				            sources: [{
				                type: "application/x-mpegURL", //如果是直播的话  此处务必这样配置
				                src:onM3u8,//视频url地址
				            }],
				            poster: onCover, //你的封面地址
				            width: document.documentElement.clientWidth,
				            control: { //此处的设置都未生效，不知道为啥，我用爆破的方式解决的
				                timeDivider: false,
				                durationDisplay: false,
				                remainingTimeDisplay: false,
				                fullscreenToggle: true //全屏按钮
				            }
				            
				        }
				 }
			}，
			mounted(){
				this.onLive(newM3u8,newCover)
			}
		｝

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 什么的