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

这篇文章主要介绍了基于视频播放器自定义播放器的方法，主要是基于视频。射流研究…开发的视频播放器的使用，以及如何操作视频。射流研究…中的api。需要的朋友可以参考下

写在前面

本次项目中需要用到视频播放器，我用的是iview的用户界面框架，但是用户界面框架无妨，这里关注的是基于视频。射流研究…开发的视频播放器的使用，以及如何操作视频。射流研究…中的api。

视频播放器项目地址：https://github。中国/vue-视频播放器。

视频。射流研究…文档地址：http://个文档。视频。com/docs/API/player。html。

项目目录：

一、外层ui布局

图一中可以看到，本次项目使用的是两栏自适应布局，其中，右侧为播放列表，固定宽度500像素，左边是播放器盒子，播放列表箱子可根据手柄点击展开或收起，而播放器箱子也跟随播放列表的展开/收缩进行宽度自适应。

（因录制动画太大传不上，可克隆我的程序下来运行可见)。

超文本标记语言代码结构如此：

收缩展开的时候加上一个过度动画，这里选择使用钢性铸铁手写动画：

[css]查看纯文本。过渡{

转场：全1s轻松；

-moz-过渡：全1s轻松

-WebKit-过渡：全1s轻松

-o-转换：全1s轻松

}

[css]查看纯文本。向左{。过渡；

边距-右边：540px！重要；

}。今天{。过渡；

右边距：40px！重要；

}。toHide{。过渡；

对：-500px！重要；

}。托秀{。过渡；

右：0px！重要；

}

[css]查看纯文本

//播放区。玩家盒{

右边距：540像素

身高：100%;

位置：相对；

}

[css]查看纯文本

//侧边信息区。信息框{

宽度：520像素

身高：100%;

背景：透明；

位置：相对；

溢出：隐藏；

}

[css]查看纯文本

//内容区。内容{

背景：# 292929;

位置：相对；

填充：20px 0 20px 20px

}

二、播放器ui

整个自定义的播放器用户界面封装成了一个组件- CostomVedio.vue，播放区使用的是视频播放器的播放器，但是底部控制栏是自定义的，不使用播放器自带的控制条，通常通用的这些都不符合设计哥哥的要求，所以我们需要自定义播放器用户界面。

超文本标记语言结构代码如下：

[html]查看纯文本

模板

div class=' custom-video-outer-box ' @ mouse over=' video mouse over '

视频播放器类='视频播放器盒'

ref='视频播放器'

:options='playerOptions '

:playsinline='true '

自定义事件名称=' customstatechangedeventname '

@play='onPlayerPlay($event)'

@pause='onPlayerPause($event)'

@ ended=' onplayrended($ event)'

@ waiting=' onPlayerWaiting($ event)'

@ playing=' onPlayerPlaying($ event)'

@ loaded data=' onPlayerLoadeddata($ event)'

@ time update=' onPlayerTimeupdate($ event)'

@ state changed=' playerStateChanged($ event)'

@ready='playerReadied '

！-@ can play=' onPlayerCanplay($ event)'-

！-@ canplaythrough=' onPlayerCanplaythrough($ event)'-

/视频播放器

！-底部进度条开始-

过渡名称='淡化'

div class=' bottom ctrl ' v-show=' isBottomCtrlShow ' id=' bottom ctrl '

！- -

！-div class=' bottom ctrl ' v-show=' false '-

！- div class='bottomCtrl' -

滑块v-model=' player ctrl。当前时间int ' class=' progress-Slider ':max=' player ctrl。' duration int ':tip-format='进度提示格式' @ on-change='进度更改'/Slider

div class='clearfix '

div class='left '

！-暂停-

span v-on:click='play' v-if='！playerCtrl.isPlay' class='icon '

图标类型='播放'/图标

/span

！-播放-

span v-else v-on:click='暂停class='icon '

图标类型='停止'/图标

/span

！-下一曲-

span class=' icon ' v-on:click='下次点击'

图标类型='向前跳过/Icon

/span

时间

{ {玩家ctrl。当前时间} }/{ { player ctrl。持续时间} }

/span

/div

div class='right clearfix '

div class='语音信箱'左侧清除修复'

！-音量-

图标类型='中音量' class='左图标'/图标

滑块v-model=' player ctrl。语音滑块' class=' voice-Slider left ' max=100 @ on-change=' volume change '/滑块

/div

！-全屏-

span class=' icon left ' @ click=' fullScreenHandle '

Icon type='crop' class='全屏/Icon

/span

/div

/过渡

/div

/模板

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

钢性铸铁样式：

[css]查看纯文本

style lang='less '。视频播放器盒{

身高：100%!重要；

宽度：100%!重要；

}

//底部进度条。底部控制{

行高：60px

高度：60px

溢出：可见；

位置：绝对；

底部：0;

左：0;

背景色：rgba(45，45，45，92);

宽度：100%;

填充：0 50像素

颜色：# fff

z-index:999999999999999；图标{

字体大小：16px

行高：60px

光标：指针；

}。图标。图标{

左边距：20px

}

}。自定义-视频-外包装盒{

位置：相对；

身高：100%;

宽度：100%;

}。进度滑块{

位置：绝对；

宽度：100%;

top:0；

左：0;

高度：18px

行高：18px。ivu-滑块-换行{

保证金：0!重要；

边框半径：0!重要；

}。ivu-滑块-按钮-换行{

行高：正常！重要；

}。ivu-滑块-按钮{

高度：8px！重要；

宽度：8px！重要；

}

}。音箱{。声音滑块{

宽度：100像素

左边距：20px

}。ivu-滑块-换行{

边距：27px 0！重要；

}

}。时间{

左边距：25px

}。全屏{

左边距：25px

行高：60px

}。ivu-进度-外部{

填充：0 10px！重要；

}。vjs-大播放按钮{

身高：80px！重要；

宽度：80px！重要；

行高：80px！重要；

文本对齐：居中；

背景：rgba(0，0，0，0.8)！重要；

边框半径：50%!重要；

顶：50%!重要；

左：50%!重要；

左边距：-40px！重要；

边距-顶部：-40px！重要；

}

#vjs_video_3{

最大高度：100%!重要；

宽度：100%!重要；

身高：100%!重要；

}。视频播放器-boxdiv{

身高：100%!重要；

宽度：100%!重要；

}。视频-js .vjs-大播放按钮{

字体大小：5em！重要；

}

视频{

最大高度：100%!重要；

}

/风格

三、实现自定义controlBar功能

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

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

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

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

[javascript]查看纯文本

//播放

播放(){

这个。玩家。play()；

//暂停

暂停(){

这个。玩家。pause()；

//下一曲

nextClick(){

console.log('自定义','下一曲点击');

//全屏

fullScreenHandle(){

console.log('全屏');

如果(!this.player.isFullscreen()){

这个。玩家。请求全屏()；

this.player.isFullscreen(真);

}否则{

这个。玩家。退出全屏()；

这个。玩家。是全屏(假)；

}

当然，在视频播放器中的播放器会在回调方法中监听状态的变化：

[html]查看纯文本

视频播放器类='视频播放器盒'

ref='视频播放器'

:options='playerOptions '

:playsinline='true '

自定义事件名称=' customstatechangedeventname '

@play='onPlayerPlay($event)'

@pause='onPlayerPause($event)'

@ ended=' onplayrended($ event)'

@ waiting=' onPlayerWaiting($ event)'

@ playing=' onPlayerPlaying($ event)'

@ loaded data=' onPlayerLoadeddata($ event)'

@ time update=' onPlayerTimeupdate($ event)'

@ state changed=' playerStateChanged($ event)'

@ready='playerReadied '

！-@ can play=' onPlayerCanplay($ event)'-

！-@ canplaythrough=' onPlayerCanplaythrough($ event)'-

/视频播放器

根据这些变化，我们可以相应地改变我们的UI，比如播放时显示“暂停”按钮，暂停时显示“播放”。

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

播放的进度是基于player onPlayerTimeupdate()的回调方法中的currentTime，单位是s，因为我这里用slider，进度是按整数计算的，所以这里需要两个变量来存储，一个是整数形式，另一个是分、秒格式化后显示的字符串形式。

[javascript]查看纯文本

//时间更新

onPlayerTimeupdate(播放器){

this . player ctrl . current time=time util . secondtodate(player . current time())；

this . player ctrl . current time int=math . floor(player . current time())；

Console.log('当前音量'，player . volume())；

定点播放，即用户点击进度条上的某个地方，然后可以在这个点播放进度，使用slider的。

[html]查看纯文本

@on-change='progressChange '

这个方法监听滑块的固定点，

[javascript]查看纯文本

//拉动进度条

进度变化(值){

this . player . current time(val)；

this . player ctrl . current time int=val；

this . player ctrl . current time=time util . secondtodate(val)；

获取定点值，然后通过player的currentTime设置跳转到定点播放。

音量调节类似于播放进度：

初始化的时候记得配置。

[javascript]查看纯文本

Muted: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，并使用它。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录

写在前面

一、外层ui布局

四：总结

相关文章阅读