基于vue-video-player自定义播放器的方法

图1--显示侧边栏图2-收起侧边栏；图三：全屏。本次项目中需要用到vue，vue-video-player，我用的是iview的ui框架，但是ui框架无妨，这里关注的是基于video.js开发的vue-video-player的使用，以及如何操作video.js中的api。[css] view plain copy接下来就是实现自定义controlBar的功能，如播放，暂停，下一曲，播放进度，剩余时间，全屏，音量调节等。video.js api文档地址：1. 播放，暂停，下一曲，全屏主要就是监听我们添加的自定义按钮click事件，然后调用播放器API执行相应操作，并改变状态。一开始初始化的时候记得配置[javascript] view plain copy来开启声音，否则静音状态下调节声音无效。使用player.volume这个api设置音量，其中val=0,表示声音off,val=1表示声音最大，0.5表示声音设置在half。最后在app.vue/需要用到这个播放器的地方 引入自定义播放器组件即可。