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

发布时间：2022-05-29 发布人：admin 分类：说明书资料大小：0.07M 资料格式：pdf 举报版权申诉

weixin_38654944-12958191-4744300845385428068.pdf-第1页.png

第1页 / 共6页

weixin_38654944-12958191-4744300845385428068.pdf-第2页.png

第2页 / 共6页

weixin_38654944-12958191-4744300845385428068.pdf-第3页.png

第3页 / 共6页

weixin_38654944-12958191-4744300845385428068.pdf-第4页.png

第4页 / 共6页

weixin_38654944-12958191-4744300845385428068.pdf-第5页.png

第5页 / 共6页

weixin_38654944-12958191-4744300845385428068.pdf-第6页.png

第6页 / 共6页

文本预览

基于基于vue-video-player自定义播放器的方法自定义播放器的方法主要介绍了基于vue-video-player自定义播放器的方法，主要是基于video.js开发的vue-video-player的使用，以及如何操作video.js中的api。需要的朋友可以参考下先看一下效果。图1--显示侧边栏图2-收起侧边栏；图三：全屏。写在前面写在前面本次项目中需要用到vue，vue-video-player，我用的是iview的ui框架，但是ui框架无妨，这里关注的是基于video.js开发的 vue-video-player的使用，以及如何操作video.js中的api。 vue-video-player 项目地址：https://github.com/surmon-china/vue-video-player。 video.js文档地址：http://docs.videojs.com/docs/api/player.html。项目目录：一、外层ui布局布局一、外层图一中可以看到，本次项目使用的是两栏自适应布局，其中，右侧为播放列表，固定宽度500px，左边是播放器box，播放列表box可根据手柄点击展开或收起，而播放器box也跟随播放列表的展开/收缩进行宽度自适应。（因录制动画太大传不上，可clone我的程序下来运行可见）。 html代码结构如此：收缩展开的时候加上一个过度动画，这里选择使用css手写动画： [css] view plain copy .transition{ transition: all 1s ease; -moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; } [css] view plain copy .toLeft{ .transition; margin-right: 540px !important; } .toRight{ .transition; margin-right: 40px !important; } .toHide{ .transition; right: -500px !important; } .toShow{ .transition; right: 0px !important; } [css] view plain copy // 播放区 .player-box{

margin-right: 540px; height: 100%; position: relative; } [css] view plain copy //侧边信息区 .info-box{ width: 520px; height: 100%; background: transparent; position: relative; overflow: hidden; ｝ [css] view plain copy // 内容区 .content{ background: #292929; position: relative; padding: 20px 0 20px 20px; } 二、播放器ui 二、播放器整个自定义的播放器ui封装成了一个组件--CostomVedio.vue，播放区使用的是vue-video-player的播放器，但是底部控制栏是自定义的，不使用播放器自带的controlBar，通常通用的这些都不符合设计哥哥的要求，所以我们需要自定义播放器UI。 html结构代码如下： [html] view plain copy 具体思路就是，使用播放器铺满播放区，使用position定位将自定义的controlBar固定在播放区的底部，这里注意controlBar的 z-index一定要足够大，否则在全屏的时候不在最上层看不到。 css样式： [css] view plain copy 三、实现自定义controlBar功能功能三、实现自定义接下来就是实现自定义controlBar的功能，如播放，暂停，下一曲，播放进度，剩余时间，全屏，音量调节等。这里我们肯定要先看video.js的相应api了，虽然是英文的但是上边写的很清楚，很容易看明白。 video.js api文档地址：http://docs.videojs.com/docs/api/player.html 1. 播放，暂停，下一曲，全屏主要就是监听我们添加的自定义按钮click事件，然后调用播放器API执行相应操作，并改变状态。 [javascript] view plain copy // 播放 play(){ this.player.play(); }, // 暂停 pause(){ this.player.pause(); }, //下一曲 nextClick(){ console.log("自定义","下一曲点击"); }, //全屏 fullScreenHandle(){ console.log("全屏"); if(!this.player.isFullscreen()){ this.player.requestFullscreen(); this.player.isFullscreen(true); }else{ this.player.exitFullscreen(); this.player.isFullscreen(false); } }, 当然，在vue-video-player中的播放器会在回调方法中监听状态的变化： [html] view plain copy 我们可以根据这些状态变化，相应的改变我们的UI，比如播放时显示“暂停”按钮，暂停时显示“播放”等功能。

2.播放进度，剩余时间，音量调节播放进度的话是根据在播放器onPlayerTimeupdate()回调方法中，通过currentTime这个方法来获取当前播放的进度时间，单位S，因为这里我使用的是slider，进度都是整数计算，所以这里我需要两个变量存放，一个是整数形式，另一个是格式化好时分秒之后的string形式，用以显示。 [javascript] view plain copy //时间更新 onPlayerTimeupdate(player){ this.playerCtrl.currentTime=timeUtil.secondToDate(player.currentTime()); this.playerCtrl.currentTimeInt=Math.floor(player.currentTime()); console.log("当前音量",player.volume()); }, 定点播放，即用户点击进度条某个地方，即可在这个点进度播放，使用的是slider的 [html] view plain copy @on-change="progressChange" 这个方法监听slider定点， [javascript] view plain copy //进度条被拉动 progressChange(val){ this.player.currentTime(val); this.playerCtrl.currentTimeInt=val; this.playerCtrl.currentTime=timeUtil.secondToDate(val); }, 拿到定点的值，然后通过player的currentTime设置跳到定点播放。音量调节的做法跟播放进度相似：一开始初始化的时候记得配置 [javascript] view plain copy muted:false,//开始声音来开启声音，否则静音状态下调节声音无效。使用player.volume(val)这个api设置音量，其中val=0,表示声音off,val=1表示声音最大，0.5表示声音设置在half。四：总四：总结结最后在app.vue/需要用到这个播放器的地方引入自定义播放器组件即可。vue-video-player是大神基于video.js开发的适用于 vue.js框架的组件，具有良好兼容性，所以我们在vue中使用这个播放器组件本质还是使用video.js，我们要更多的去了解 video.js中的api并使用他。

分享到：

赞收藏

资料库

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

相关推荐

开发技术

热门标签

最新资料