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

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

发布时间：2019-01-07 发布网站：编程之家

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

先看一下效果。

图1--显示侧边栏

图2-收起侧边栏；

图三：全屏。

写在前面

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

vue-video-player 项目地址：。

video.js文档地址：。

项目目录：

一、外层ui布局

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

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

html代码结构如此&