基于vue视频播放器定制播放器的方法

先看效果。

图1-显示侧栏

图2-折叠侧边栏；

图3:全屏。

写在前面

在这个项目中，需要vue和vue-video-player。我使用iview的ui框架，但是ui框架很好。在这里，我关注了基于video.js的vue-video-player的使用，以及如何在video.js中操作api.

视频播放器项目地址：https://github.com/surmon-china/vue-video-player.

视频. js文件地址：http://docs.videojs.com/docs/api/player.html.

项目目录：

一、外层ui布局

从图1可以看出，这个项目采用了两列自适应布局，其中右侧是固定宽度为500px的播放列表，左侧是播放器框。播放列表框可以根据手柄的点击而扩展或收缩，并且播放列表框也适应播放列表扩展/收缩后的宽度。

(因为录制的动画太大了，过不去，可以通过克隆我的程序运行来看。).

Html代码结构如下：

当您收缩和扩展时，添加一个过度的动画。在这里，选择使用css手写动画：

[css]查看普通副本。过渡{ transition: all 1s ease-moz-transit :全1s ease-web kit-transit :全1s ease-o-transit :全1s ease} [css]查看普通副本. toLeft{。过渡；右边距： 540px！重要；} .toRight{。过渡；右边距： 40px！重要；} .toHide{。过渡；右：-500像素！重要；} .toShow{。过渡；右： 0px！重要；} [css]查看普通副本//播放区域。玩家-盒子{右边距： 540px高度： 100%；相对位置：} [css]查看普通副本//侧面信息区。信息框{ width: 520px高度： 100%；背景：透明；相对位置：飞越：隐藏；}

[css]查看普通副本//内容区域。内容{ background: # 292929相对位置：padding: 20px 0 20px 20px}

二、播放器ui

整个定制的播放器ui打包成一个组件——costomvedio . vue在播放区使用vue-video-player的播放器，但是底部的controlBar是定制的，没有使用播放器自带的control bar。一般这些常见的都不符合设计兄弟的要求，需要定制播放器UI。

Html结构代码如下：

[html]查看普通副本模板div class=' custom-video-outer-box ' @ mouseover=' video mouseover ' video-player class=' video-player-box ' ref=' video player ' : options=' play erooptions ' : play sinline=' true ' customevent name=' customstatechatedeventname ' @ play=' on layer play($ event)' @ pause=' on layer pause($ event ' @ ended=' on layer ended($ event ' @ waing=' on layer ' '-@ can-@ canplaythrough=' OnPlayercanPlayshuy($ event)'-/video-player！-底部进度条开始-过渡名称=' fade ' div class=' bottom ctrl ' v-show=' isBottomCtrlShow ' id=' bottom ctrl '！- - !-div class=' bottom ctrl ' v-show=' false '-！-div class=' bottom ctrl '-Slider v-model=' player TRL。当前时间='进度-滑块' :最大值='播放时间。duration int ' : tip-format=' progress tip format ' @ on-change=' progress change '/Slider div class=' clear fix ' div class=' left '！-暂停-span v-:点击='播放' v-if='！球员TRL。isplay ' class=' Icon ' Icon类型='play'/Icon /span！-播放-span v-else v-: click=' pause ' class=' Icon ' Icon type=' stop '/Icon/span！-下一曲-span class=' Icon ' v-: click=' next click ' Icon type=' skip-forward '/Icon/span span class=' time ' { player TRL。当前时间} }/{ { player TRL。duration } }/span/div class=' right clear fix ' div class=' voice-box clear fix left '！-音量-Icon type=' volume-medium ' class=' left Icon '/Icon Slider v-model=' player TRL。语音滑块' class=' voice-Slider left ' max=100 @ on-change='音量变化'/Slider/div！-全屏-span class=' Icon left ' @ click=' full screen handle ' Icon type=' crop ' class='全屏/Icon/span/div/div/transition/div/模板

具体思路就是，使用播放器铺满播放区，使用位置定位将自定义的控制栏固定在播放区的底部，这里注意控制栏的z指数一定要足够大，否则在全屏的时候不在最上层看不到css。样式：

[CSS]查看普通副本样式lang=' less ' .视频播放器盒{ height: 100%！重要；宽度： 100%!重要；} //底部进度条底部ctrl {行高： 60px高度： 60px飞越：可见；绝对位置：底部： 0；左： 0；背景-color: rgba(45，45，45，92);宽度： 100%;padd : 0 50pxcolor : # fffz-index : 99999999999999；图标{ font-size : 16px线高： 60px光标：指针；} .图标。图标{左边距： 20px} } .自定义-视频-外盒{相对位置：高度： 100%;宽度： 100%;} .进度-滑块{位置：绝对；宽度： 100%;top : 0；左： 0；高度： 18px线高： 18px。ivu-slider-wrap{ margin: 0！重要；边界半径： 0!重要；} .ivu-滑块-按钮-换行{线高：正常！重要；} .ivu-滑块按钮{ height: 8px！重要；宽度： 8px！重要；} } .语音信箱{。语音滑块{宽度： 100像素左边距left: 20px}。ivu-滑块-包装{ margin: 27px 0！重要；} } .时间{左边距： 25px} .全屏{左边距： 25px线高： 60px} .ivu-progress-outer { padd : 0 10px！重要；} .vjs-big-play-button { height : 80px！重要；宽度： 80px！重要；行高： 80px！重要；文本对齐：中心；background:rgba(0，0，0，0.8)！重要；边框-radius: 50%！重要；top: 50%！重要；left: 50%！重要；左边距： -40px！重要；页边距-top: -40px！重要；} # vjs _ video _ 3 {最大高度： 100%！重要；宽度： 100%!重要；高度： 100%!重要；} .视频播放器-boxdiv{ height: 100%！重要；宽度： 100%!重要；} .视频js .vjs-big-play-button { font size : 5em！重要；}视频{ max-height: 100%！重要；}/样式

三、实现自定义controlBar功能

接下来就是实现自定义控制栏的功能，如播放，暂停，下一曲，播放进度，剩余时间，全屏，音量调节等。

这里我们肯定要先看视频。射流研究…的相应美国石油学会(美国石油协会)了，虽然是英文的但是上边写的很清楚，很容易看明白。

video.js api文档地址：http://个文档。videojs。com/docs/API/player。超文本标记语言

1.播放，暂停，下一曲，全屏主要就是监听我们添加的自定义按钮点击事件，然后调用播放器应用程序接口执行相应操作，并改变状态。

[javascript]查看普通副本/播放play(){ this。玩家。play()；}, //暂停暂停(){这个。玩家。pause()；}, //下一曲nextClick(){ console.log('自定义','下一曲点击');}, //全屏fullScreenHandle(){ console.log('全屏');if(！这个。玩家。IsFullscreen()){ this。玩家。request full screen()；这个。玩家。IsFullscreen(真)；} else { this。玩家。exitFullscreen()；这个。玩家。isFullscreen(false)；} },

当然，在视频播放器中的播放器会在回调方法中监听状态的变化：[html]查看普通副本视频播放器类=' video-player-box ' ref=' video player ' : options=' playerooptions ' : playsinline=' true ' customevent name=' customstatechangedeventname ' @ play=' onlayer play($ event)' @ pause=' onlayer play($ event)' @ end=' onlayer end($ event)' @ waiting=' onlayer play($ event)' @ playing=' onlayer play($ event ' @-@可播放=' onlayer play ($ event)'-！-@ canplaythrough=' OnPlayercanPlayThready($ event)'-/video-player我们可以根据这些状态变化，相应的改变我们的UI，比如播放时显示"暂停"按钮，暂停时显示"播放"等功能。

2.播放进度，剩余时间，音量调节

根据播放进度，当前播放进度时间由player onPlayerTimeupdate()的回调方法中的currentTime获取，单位为s，因为我这里使用的是滑块，进度是用整数计算的，所以这里需要存储两个变量，一个是整数形式，另一个是格式化好分、秒后的字符串形式显示。

[javascript]查看普通副本//time update onplayertime update(播放器){this。playerctrl。currenttime=timeutil。第二天(玩家。current time())；this . playerctrl . currentiment=math . floor(player . currentime())；Console.log('当前卷'，player . volume())；},

定点播放，即当用户点击进度条中的某个地方时，可以在这个进度点进行播放，使用[html]view plain copy @ on-change=' progress change '的滑块。

该方法监听滑块固定点，

[javascript]查看普通副本//进度条被拉出。进度更改(val) {this。player . current time(val)；this . playerctrl . Currettiment=val；this . playerctrl . current time=timeutil . secondtodate(val)；},

获取定点值，然后通过播放器的currentTime设置跳转到定点播放。音量调节类似于播放进度：

记得在初始化开始时进行配置

[JavaScript]查看普通副本静音： false，//启动声音

要打开声音，否则在静音状态下调整声音无效。

使用api player.volume(val)设置音量，其中val=0表示声音关闭，val=1表示声音最大，0.5表示声音设置为一半。

四：总结

.最后可以在app.vue/. Vue中需要用到这个播放器的地方引入自定义的播放器组件——video-player是大神基于video.js开发的一个组件，适合vue.js的框架，兼容性很好，所以我们在Vue中使用这个播放器组件本质上还是用video.js。我们需要更多地了解video.js中的api并使用它。