先看一下效果。
图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;