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

前端之家收集整理的这篇文章主要介绍了基于vue-video-player自定义播放器的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

先看一下效果

图1--显示侧边栏

图2-收起侧边栏

图三:全屏。

写在前面

本次项目中需要用到vue,vue-video-player,我用的是iview的ui框架,但是ui框架无妨,这里关注的是基于video.js开发的vue-video-player的使用,以及如何操作video.js中的api。

vue-video-player 项目地址:@L_404_0@。

项目目录:

一、外层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