一、需求概述
需要满足不同框架下都适用的视频组件
二、真实项目情况
多个项目，vue版本不同，UI框架不同，视频插件不同
三、实现分析
1.vue版本不同
解决方案：独立鱼框架之外，使用js实现
2.UI框架不同
解决方案：不必过于考虑UI框架，视频样式在vue组件中编写
3.视频插件不同（主要为EasyGbs与flv.js）
解决方案:由于业务场景不同，所选用的插件无法强制替换,因此需要兼顾两者，判断当前系统所引用的插件类型，选择对应的播放配置参数与调用方式
四、代码实现
- 定义一个VideoIsp的类，构造器中包含四个实例属性，分别是pluginType:插件类型、configs(easy-player配置参数)、flvConfigs(flv配置参数)、flvPlayer(flv实例) 因为项目需要，默认使用easy-player插件。
- 以easy-player为例进行解读：
init：
根据调用时传入的插件类型，匹配对应的实例方法进行视频组件初始化
init(args = {}) {
switch (this.pluginType) {
case 'easyplayer':
this.createEasyPlayer(args)
break
case 'flv':
this.createFlvPlayer(args)
break
default:
this.createEasyPlayer(args)
}
}
createEasyPlayerTemplate：
创建easy-player容器，将获取到的配置项当做属性赋给DOM元素
createEasyPlayer：
获取配置项，渲染模板
五、源代码
欢迎各位大佬批评指正
