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

先看一下效果。

图1--显示侧边栏

图2-收起侧边栏；

图三：全屏。

写在前面

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

项目目录：

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