一种视频播放组件开发方法及装置制造方法及图纸

本发明专利技术涉及组件开发方法及装置，公开了一种视频播放组件开发方法及装置。通过建立了第一页面组件以及第二页面组件，并将第一页面组件与第二页面组件设置为父子嵌套关系，实现了视频列表展示页面和视频播放页面独立管理，又通过父子组件相互传值实现数据与消息的传递。这个方法的优点是，避免在一个组件中处理大量的逻辑，而且两个页面组件都可以复用。

【技术实现步骤摘要】
一种视频播放组件开发方法及装置
本专利技术涉及组件开发方法及装置，具体涉及一种视频播放组件开发方法及装置。
技术介绍
Element-UI组件库是饿了么前端团队推出的一款基于Vue.js2.0的桌面端UI组件库，提供了很多可复用的组件，并提供了配套设计资源，能够帮助开发者的页面快速成型。对于每一个组件，其文档上都有效果示例与代码，通过这样的方式，来解决大量页面采用同样风格和结构时，通过简单的配置即可生成这个页面。目前Element-UI组件库中，还没有涉及到视频播放相关的组件，当在项目中需要实现播放视频的需求时，一般都是引入外部播放器插件，比如Vue-video-player。Vue-video-player组件能够实现视频播放的功能，但是引入项目中后，需要对样式进行单独的修改，封装成与Element-UI组件风格效果一致的组件。如果还需要根据视频封面图片，点击之后播放视频，页面单独处理将会更复杂。因此现有的Element-UI组件库没有视频播放组件。
技术实现思路
本专利技术的目的在于提供一种视频播放组件开发方法及装置，用以解决现有技术中的Element-UI组件库没有视频播放组件的问题。为了实现上述任务，本专利技术采用以下技术方案：一种视频播放组件开发方法，用于在项目工程文件中加载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中在所述的webpack生存环境核心配置子文件中配置ProvidePlugin参数时，将ProvidePlugin参数设置为:newwebpack.ProvidePlugin({videojs:'video.js'})。进一步的，所述的步骤33中所述的第二页面组件的script标签包括第二页面组件props子标签,第二页面组件data子标签，第二页面组件computed子标签,第二页面组件beforeDestroy子标签以及第二页面组件methods子标签；所述的第二页面组件props子标签用于接收第一页面组件的状态数据；所述的第二页面组件data子标签用于定义第二页面组件渲染所需的数据；所述的第二页面组件computed子标签用于监控自己第二页面组件的player变量的变化；所述的第二页面组件beforeDestroy子标签用于定义当前实例被销毁时的处理；所述的第二页面组件methods子标签用于定义自定义函数名的方法以及内容。进一步的，所述的步骤32中第一页面组件包括的script标签包括第一页面组件components子标签，第一页面组件data子标签以及第一页面组件methods子标签；所述的第一页面组件components子标签用于引用第二页面组件；所述的第一页面组件data子标签用于定义第一页面组件渲染所需的数据；所述的第一页面组件methods子标签用于定义处理数据的交互逻辑。一种视频播放组件开发方法装置，所述的装置包括插件安装模块、配置模块以及封装模块；所述的插件安装模块用于在待安装视频播放组件的项目工程文件中全局安装vue-video-player插件，获得插件安装后的项目工程文件；所述的插件安装后的项目工程文件包括页面入口子文件、webpack生产环境核心配置子文件以及components公共组子文件夹；所述的配置模块用于在所述页面入口子文件中引入vue-video-player插件以及插件样式后，在所述的webpack生存环境核心配置子文件中配置ProvidePlugin参数，获得配置后的项目工程文件；所述的封装模块用于在配置后的项目工程文件的components公共组子文件夹中将vue-video-player插件封装成Element-UI视频播放组件并加载至配置后的项目工程文件中；所述的封装模块包括组件建立子模块、第二页面组件设置子模块、第一页面组件设置子模块以及封装子模块；所述的组件建立子模块用于在所述的components公共组子文件夹中新建两个vue格式文件，获得第一页面组件以及第二页面组件，所述的第一页面组件为第二页面组件的父组件；所述的第一页面组件以及第二页面组件均包括template标签、script标签以及style标签；所述的第一页面组件设置子模块用于在所述的第一页面组件的template标签中设置图片展示容器；在所述的第一页面组件的script标签中获取所需展示视频的数据列表，并将数据传递给第二页面组件；在所述的第一页面组件的style标签中设置所述图片展示容器的样式，获得设置后的第一页面组件；所述的第二页面组件设置子模块用于在所述的第二页面组件的template标签中设置视频展示容器；在所述的第二页面组件的script标签中将第一页面组件传递过来的数据与视频展示容器绑定；在所述的第二页面组件的style标签中设置所述视频展示容器的样式，获得设置后的第二本文档来自技高网...

【技术保护点】
1.一种视频播放组件开发方法，用于在项目工程文件中加载Element-UI视频播放组件，其特征在于，包括如下步骤：/n步骤1、在待安装视频播放组件的项目工程文件中全局安装vue-video-player插件，获得插件安装后的项目工程文件；/n所述的插件安装后的项目工程文件包括页面入口子文件、webpack生产环境核心配置子文件以及components公共组子文件夹；/n步骤2、在插件安装后的项目工程文件的页面入口子文件中引入vue-video-player插件以及插件样式后，在所述的webpack生产环境核心配置子文件中配置ProvidePlugin参数，获得配置后的项目工程文件；/n步骤3、在配置后的项目工程文件的components公共组子文件夹中将vue-video-player插件封装成Element-UI视频播放组件并加载至配置后的项目工程文件中；/n所述的在配置后的项目工程文件的components公共组子文件夹中将vue-video-player插件封装成Element-UI视频播放组件，具体包括：/n步骤31、在所述的components公共组子文件夹中新建两个vue格式文件，分别得到第一页面组件以及第二页面组件，所述的第一页面组件为第二页面组件的父组件；/n所述的第一页面组件以及第二页面组件均包括template标签、script标签以及style标签；/n步骤32、在所述的第一页面组件的template标签中设置图片展示容器；在所述的第一页面组件的script标签中获取所需展示视频的数据列表，并将数据列表传递给第二页面组件；在所述的第一页面组件的style标签中设置所述图片展示容器的样式，获得设置后的第一页面组件；/n步骤33、在所述的第二页面组件的template标签中设置视频展示容器；在所述的第二页面组件的script标签中将第一页面组件传递过来的数据与视频展示容器绑定；在所述的第二页面组件的style标签中设置所述视频展示容器的样式，获得设置后的第二页面组件；/n步骤34、步骤32得到的设置后的第一页面组件和步骤33得到的设置后的第二页面组件组成Element-UI视频播放组件。/n...

【技术特征摘要】
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参数设置为:newwebpack.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子标签用于定义处理...

【专利技术属性】
技术研发人员：邢丹，
申请(专利权)人：西安雷风电子科技有限公司，
类型：发明
国别省市：陕西;61