一种基于教育系统的视频列表切换方法、设备及存储介质技术方案

本发明专利技术公开了一种基于教育系统的视频列表切换方法、设备及存储介质，所述方法包括获取多个视频数据，并提取多个视频数据的视频封面；根据多个视频封面生成多个swiper插件，将需要显示的视频封面存放在表现层，将不显示的视频封面存放在缓冲区，并创建事件监听层；对表现层的视频封面设置图片样式，并检测其中的视频封面是否有视频数据；设置缓冲区的视频封面与表现层的视频封面的切换过渡效果；根据用户点击的按钮触发事件监听层的事件，并在事件为切换事件时将缓冲区的视频封面切换至表现层，并将表现层的视频封面切换至缓冲区。本发明专利技术通过满足了通天塔的多个功能点业务需求，可保证在切换过程中可以正常播放视频，而且具备动画效果，不会出现卡顿式切换。

【技术实现步骤摘要】
一种基于教育系统的视频列表切换方法、设备及存储介质
本专利技术涉及视频列表切换领域，特别涉及一种基于教育系统的视频列表切换方法、设备及存储介质。
技术介绍
目前，随着智能设备的流行和普及，越来越多的人享受着智能设备带来的良好体验。基于网络交互的视频APP也越来越流行起来。在视频APP中，用户对电影、电视、综艺节目等视频进行切换时，用户输入进行分类切换的网络请求，视频APP基于该切换的请求在视频APP中显示相应的影视资源。目前视频列表切换方法存在以下缺点：1、对于vue框架没有成熟的方案；2、在切换图片的过程中，点击无法正常播放视频；3、在切换的过程中，动画效果会消失，造成卡顿式切换，无切换效果。因而现有技术还有待改进和提高。
技术实现思路
鉴于上述现有技术的不足之处，本专利技术的目的在于提供一种基于教育系统的视频列表切换方法、设备及存储介质，可保证视频列表在切换时不会出现卡顿情况，而且保证动画效果不会消失。为了达到上述目的，本专利技术采取了以下技术方案：一种基于教育系统的视频列表切换方法，包括如下步骤：获取多个视频数据，并提取多个视频数据的视频封面；根据多个视频封面生成多个swiper插件，将需要显示的视频封面存放在表现层，将不显示的视频封面存放在缓冲区，并创建事件监听层；对表现层的视频封面设置图片样式，并检测其中的视频封面是否有视频数据；设置缓冲区的视频封面与表现层的视频封面的切换过渡效果；根据用户点击的按钮触发事件监听层的事件，并在事件为切换事件时将缓冲区的视频封面切换至表现层，并将表现层的视频封面切换至缓冲区。所述的基于教育系统的视频列表切换方法中，所述获取视频数据，并在视频数据中提取多个视频封面的步骤包括：获取多个视频数据，并提取多个视频数据的视频封面形成封面集合；判断封面集合的长度是否达到预设长度，如果没有则将默认图片填充至封面集合中以使所述封面集合的长度达到预设长度。所述的基于教育系统的视频列表切换方法中，所述对表现层的视频封面设置图片样式，并检测其中的视频封面是否有视频数据的步骤包括：将表现层里面左侧的图片缩放并将其位置向左偏移，并使其层级由右至左逐渐降低；将表现层里面中间图片放大并将其位置居中，并设置其层级为最高级；将表现层里面右边图片缩放并将其位置向右偏移，并使其层级由左至右逐渐降低；检测表现层里面的各个视频封面是否有视频数据，如果没有则移除该视频封面的事件监听。所述的基于教育系统的视频列表切换方法中，所述缓冲区的视频封面与表现层的视频封面的切换过渡效果具体为：点击切换时，将当前图片逐帧缩放，并将从缓冲区进入表现层的图片逐帧放大，当镜像切换的两个图片的尺寸达到平衡点时，切换两个图片的层级，将从缓冲区进入表现层的图片设置为最高层级。所述的基于教育系统的视频列表切换方法中，所述根据用户点击的按钮触发事件监听层的事件，并在事件为切换事件时将缓冲区的视频封面切换至表现层，并将表现层的视频封面切换至缓冲区的步骤包括：根据用户点击的按钮触发事件监听层的事件；在事件为切换事件时，更新视图并监听vue的视图更新；在vue的视图更新完毕后执行预先注册的生命周期钩子；执行过渡动画，并在执行完过渡动画后将缓冲区的需要切换的视频封面切换至表现层，将表现层的需要切换的视频封面切换至缓冲区。所述的基于教育系统的视频列表切换方法中，所述执行过渡动画，并在执行完过渡动画后将缓冲区的需要切换的视频封面切换至表现层，将表现层的需要切换的视频封面切换至缓冲区的步骤之后还包括：检测切换至表现层的视频封面是否有进度条，如果有则高亮处理该视频封面所在位置的进度条，否则结束视频列表的切换。所述的基于教育系统的视频列表切换方法中，所述高亮处理该视频封面所在位置的进度条步骤包括：读取该视频封面的视频数据；将该视频数据的所有进度都置灰；读取当前显示的视频封面所在的索引信息；将当前显示的视频封面所在的位置的进度条高亮处理。所述的基于教育系统的视频列表切换方法还包括：当事件监听层里面的点击事件被触发时，读取视频数据并获取视频地址，并调用视频组件播放视频。一种视频列表切换设备，包括：处理器、存储器和通信总线；所述存储器上存储有可被所述处理器执行的计算机可读程序；所述通信总线实现处理器和存储器之间的连接通信；所述处理器执行所述计算机可读程序时实现如上所述的基于教育系统的视频列表切换方法中的步骤。一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现如上所述的基于教育系统的视频列表切换方法中的步骤。相较于现有技术，本专利技术提供的基于教育系统的视频列表切换方法、设备及存储介质中，所述方法包括获取多个视频数据，并提取多个视频数据的视频封面；根据多个视频封面生成多个swiper插件，将需要显示的视频封面存放在表现层，将不显示的视频封面存放在缓冲区，并创建事件监听层；对表现层的视频封面设置图片样式，并检测其中的视频封面是否有视频数据；设置缓冲区的视频封面与表现层的视频封面的切换过渡效果；根据用户点击的按钮触发事件监听层的事件，并在事件为切换事件时将缓冲区的视频封面切换至表现层，并将表现层的视频封面切换至缓冲区。本专利技术通过采用swiper自定义的一套多层级渐进式视频列表展示，满足了通天塔的多个功能点业务需求；另外还设置有一个缓冲区，点击节点时，自动切换到缓冲区的节点，再将原有的节点推入缓冲区，事件监听永远不会消失；另外全局捕获vue的视图更新事件，并且在下一个生命周期，将切换的过渡动画事件推入内存栈，视图更新完成后，再执行过渡动画，保证在切换过程中可以正常播放视频，而且具备动画效果，不会出现卡顿式切换。附图说明图1为本专利技术提供的基于教育系统的视频列表切换方法的流程图。图2为本专利技术提供的基于教育系统的视频列表切换方法中，所述步骤S100的流程图。图3为本专利技术提供的基于教育系统的视频列表切换方法中，所述步骤S300的流程图。图4为本专利技术提供的基于教育系统的视频列表切换方法中，所述步骤S500的流程图。图5为本专利技术视频列表切换程序的较佳实施例的运行环境示意图。图6为本专利技术安装视频列表切换程序的系统较佳实施例的功能模块图。具体实施方式本专利技术提供一种基于教育系统的视频列表切换方法、设备及存储介质，为使本专利技术的目的、技术方案及效果更加清楚、明确，以下参照附图并举实施例对本专利技术进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本专利技术，并不用于限定本专利技术。请参阅图1，本专利技术提供的基于教育系统的视频列表切换方法，包括如下步骤：S100、获取多个视频数据，并提取多个视频数据的视频封面。具体来说，用户首先导入多个视频数据，然后把每一个视频数据的视频封面提取出来，得到多个视频封面，所述视频封面即用于显示在视频列表中，供用户点击进行视频数据的播放，同时为了制作视频列表，多个所述视频封面还需形成封面集合，即多个视频封面的组合，使得用户可以自由选择所需播放的视频数据。所述步骤S100的具体流程图如图2所示。请参阅图2，其为所述步骤S100的流程图，包括如下步骤：S101、获取多个视频数据，并提取多个视频数据的视频封面形成封面集合；S102、判断封面集合的长度是否达到预设长度，如果没有则将默认图片填充本文档来自技高网...

【技术保护点】
1.一种基于教育系统的视频列表切换方法，其特征在于，包括如下步骤：获取多个视频数据，并提取多个视频数据的视频封面；根据多个视频封面生成多个swiper插件，将需要显示的视频封面存放在表现层，将不显示的视频封面存放在缓冲区，并创建事件监听层；对表现层的视频封面设置图片样式，并检测其中的视频封面是否有视频数据；设置缓冲区的视频封面与表现层的视频封面的切换过渡效果；根据用户点击的按钮触发事件监听层的事件，并在事件为切换事件时将缓冲区的视频封面切换至表现层，并将表现层的视频封面切换至缓冲区。

【技术特征摘要】
1.一种基于教育系统的视频列表切换方法，其特征在于，包括如下步骤：获取多个视频数据，并提取多个视频数据的视频封面；根据多个视频封面生成多个swiper插件，将需要显示的视频封面存放在表现层，将不显示的视频封面存放在缓冲区，并创建事件监听层；对表现层的视频封面设置图片样式，并检测其中的视频封面是否有视频数据；设置缓冲区的视频封面与表现层的视频封面的切换过渡效果；根据用户点击的按钮触发事件监听层的事件，并在事件为切换事件时将缓冲区的视频封面切换至表现层，并将表现层的视频封面切换至缓冲区。2.根据权利要求1所述的基于教育系统的视频列表切换方法，其特征在于，所述获取视频数据，并在视频数据中提取多个视频封面的步骤包括：获取多个视频数据，并提取多个视频数据的视频封面形成封面集合；判断封面集合的长度是否达到预设长度，如果没有则将默认图片填充至封面集合中以使所述封面集合的长度达到预设长度。3.根据权利要求2所述的基于教育系统的视频列表切换方法，其特征在于，所述对表现层的视频封面设置图片样式，并检测其中的视频封面是否有视频数据的步骤包括：将表现层里面左侧的图片缩放并将其位置向左偏移，并使其层级由右至左逐渐降低；将表现层里面中间图片放大并将其位置居中，并设置其层级为最高级；将表现层里面右边图片缩放并将其位置向右偏移，并使其层级由左至右逐渐降低；检测表现层里面的各个视频封面是否有视频数据，如果没有则移除该视频封面的事件监听。4.根据权利要求3所述的基于教育系统的视频列表切换方法，其特征在于，所述缓冲区的视频封面与表现层的视频封面的切换过渡效果具体为：点击切换时，将当前图片逐帧缩放，并将从缓冲区进入表现层的图片逐帧放大，当镜像切换的两个图片的尺寸达到平衡点时，切换两个图片的层级，将从缓冲区进入表现层的图片设置为最高层级。5.根据权利要求4所述的基于教育系统的视频列表切换方法，其特征在于，所述根据用户点击的...

【专利技术属性】
技术研发人员：孙悦，李天驰，李涛，
申请(专利权)人：深圳点猫科技有限公司，
类型：发明
国别省市：广东,44