[发明专利]一种视频播放组件开发方法及装置

权利要求书

1.一种视频播放组件开发方法，用于在项目工程文件中加载Element-UI视频播放组件，其特征在于，包括如下步骤：

步骤1、在待安装视频播放组件的项目工程文件中全局安装vue-video-player插件，获得插件安装后的项目工程文件；

所述的插件安装后的项目工程文件包括页面入口子文件、webpack生产环境核心配置子文件以及components公共组子文件夹；

步骤2、在插件安装后的项目工程文件的页面入口子文件中引入vue-video-player插件以及插件样式后，在所述的webpack生产环境核心配置子文件中配置ProvidePlugin参数，获得配置后的项目工程文件；

步骤3、在配置后的项目工程文件的components公共组子文件夹中将vue-video-player插件封装成Element-UI视频播放组件并加载至配置后的项目工程文件中；

所述的在配置后的项目工程文件的components公共组子文件夹中将vue-video-player插件封装成Element-UI视频播放组件，具体包括：

步骤31、在所述的components公共组子文件夹中新建两个vue格式文件，分别得到第一页面组件以及第二页面组件，所述的第一页面组件为第二页面组件的父组件；

所述的第一页面组件以及第二页面组件均包括template标签、script标签以及style标签；

步骤32、在所述的第一页面组件的template标签中设置图片展示容器；在所述的第一页面组件的script标签中获取所需展示视频的数据列表，并将数据列表传递给第二页面组件；在所述的第一页面组件的style标签中设置所述图片展示容器的样式，获得设置后的第一页面组件；

步骤33、在所述的第二页面组件的template标签中设置视频展示容器；在所述的第二页面组件的script标签中将第一页面组件传递过来的数据与视频展示容器绑定，并处理视频播放、暂停事件；在所述的第二页面组件的style标签中设置所述视频展示容器的样式，获得设置后的第二页面组件；

步骤34、步骤32得到的设置后的第一页面组件和步骤33得到的设置后的第二页面组件组成Element-UI视频播放组件。

2.如权利要求1所述的视频播放组件开发方法，其特征在于，所述的步骤2中在所述的webpack生产环境核心配置子文件中配置ProvidePlugin参数时，将ProvidePlugin参数设置为:new webpack.ProvidePlugin({videojs:'video.js'})。

3.如权利要求1所述的视频播放组件开发方法，其特征在于，所述的步骤33中所述的第二页面组件的script标签包括第二页面组件props子标签,第二页面组件data子标签，第二页面组件computed子标签,第二页面组件beforeDestroy子标签以及第二页面组件methods子标签；

所述的第二页面组件props子标签用于接收第一页面组件的状态数据；

所述的第二页面组件data子标签用于定义第二页面组件渲染所需的数据；

所述的第二页面组件computed子标签用于监控自己第二页面组件的player变量的变化；

所述的第二页面组件beforeDestroy子标签用于定义当前实例被销毁时的处理；

所述的第二页面组件methods子标签用于定义自定义函数名的方法以及内容。

4.如权利要求1所述的视频播放组件开发方法，其特征在于，所述的步骤32中第一页面组件包括的script标签包括第一页面组件components子标签，第一页面组件data子标签以及第一页面组件methods子标签；

所述的第一页面组件components子标签用于引用第二页面组件；

所述的第一页面组件data子标签用于定义第一页面组件渲染所需的数据；

所述的第一页面组件methods子标签用于定义处理数据的交互逻辑。