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

本发明涉及视频列表切换领域，特别涉及一种基于教育系统的视频列表切换方法、设备及存储介质。

背景技术：

目前，随着智能设备的流行和普及，越来越多的人享受着智能设备带来的良好体验。基于网络交互的视频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、判断封面集合的长度是否达到预设长度，如果没有则将默认图片填充至封面集合中以使所述封面集合的长度达到预设长度。

具体来说，为了达到视频列表多层级展示的效果，本发明设置有一个预设长度，所述封面集合的长度即为视频封面的数量，当所述封面集合的长度达到预设长度时才执行下一步骤，如果没有，则填充默认图片至封面集合中，所述默认图片没有视频播放，仅为了增加展示的效果。

s200、根据多个视频封面生成多个swiper插件，将需要显示的视频封面存放在表现层，将不显示的视频封面存放在缓冲区，并创建事件监听层。

具体来说，swiper是纯javascrip打造的滑动特效插件，面向手机、平板电脑等移动终端，其是为了使视频列表中的视频封面可以滑动供用户选择。封面集合中的视频封面一部分存放在表现层，另一部分存放在缓冲区中，表现层的视频封面为需要显示的视频封面，缓冲区中为不显示的视频封面，本发明通过设置了一个缓冲区，点击切换时，自动将显示层的视频封面切换到缓冲区的视频封面，再将显示层的视频封面推入缓冲区，使得事件监听永远不会消失；事件监听层是针对每一个视频封面设定，事件监听是指计算机等待一个事件的发生然后做出相关的响应，如等待鼠标单击按钮，单击发生时打开一个新的页面，本发明中事件监听层的事件监听包括视频切换和视频点击两种，执行切换事件则执行视频列表的切换，执行点击事件则执行视频的播放。

s300、对表现层的视频封面设置图片样式，并检测其中的视频封面是否有视频数据。

具体来说，为了使视频封面分层级显示，需要对表现层的视频封面进行图片样式设置，所述图片样式的设置可以使得用户可通过滑动的方式查看视频封面，同时为了避免一些默认图片占用内存，还需检测各个视频封面中是否有视频数据，如果没有视频数据则移除该视频封面的事件监听，释放内存。所述步骤s300的流程图如图3所示。

请参阅图3，其为所述步骤s300的流程图，包括如下步骤：

s301、将表现层里面左侧的图片缩放并将其位置向左偏移，并使其层级由右至左逐渐降低；将表现层里面中间图片放大并将其位置居中，并设置其层级为最高级；将表现层里面右边图片缩放并将其位置向右偏移，并使其层级由左至右逐渐降低；

s302、检测表现层里面的各个视频封面是否有视频数据，如果没有则移除该视频封面的事件监听。

具体来说，在展示时，为了达到通天塔多层级渐进式视频列表展示的效果，本发明将视频封面图片分层展示，从中间往左右逐渐降低层级，并使中间的图片最大化显示，左右两边的图片缩小，而且位置向左右偏移，层级逐渐降低，在左侧的视频封面向右至中间滑动或右侧的视频封面向左至中间滑动式，图片逐渐放大，其层级逐渐升高。

s400、设置缓冲区的视频封面与表现层的视频封面的切换过渡效果。

具体来说，所述缓冲区的视频封面与表现层的视频封面的切换过渡效果具体为：点击切换时，将当前图片逐帧缩放，并将从缓冲区进入表现层的图片逐帧放大，当镜像切换的两个图片的尺寸达到平衡点时，切换两个图片的层级，将从缓冲区进入表现层的图片设置为最高层级。

s500、根据用户点击的按钮触发事件监听层的事件，并在事件为切换事件时将缓冲区的视频封面切换至表现层，并将表现层的视频封面切换至缓冲区。

具体来说，事件监听层为等待一个事件的发生，每一个视频封面的时间包括切换事件和点击事件，如果时间为切换事件，则将缓冲区的视频封面切换至表现层，并将表现层的视频封面切换至缓冲区。所述步骤s500的流程图如图4所示。

请参阅图4，其为所述步骤s500的流程图，包括如下步骤：

s501、根据用户点击的按钮触发事件监听层的事件；

s502、在事件为切换事件时，更新视图并监听vue的视图更新；

s503、在vue的视图更新完毕后执行预先注册的生命周期钩子；

s504、执行过渡动画，并在执行完过渡动画后将缓冲区的需要切换的视频封面切换至表现层，将表现层的需要切换的视频封面切换至缓冲区。

具体来说，vue是一套用于构建用户界面的渐进式框架，本发明全局捕获vue的视图更新事件，并且在下一个生命周期，将切换的过渡动画事件推入内存栈，视图更新完成后，再执行过渡动画，使得在切换的过程中不会造成动画效果会丢失，而且由于采用了生命周期钩子，不会造成卡顿切换，同时通过将表现层的需要切换的视频封面切换至缓冲区，可以保证事件监听的有效性。

进一步地，所述步骤s501之后还包括：

检测切换至表现层的视频封面是否有进度条，如果有则高亮处理该视频封面所在位置的进度条，否则结束视频列表的切换。

具体来说，进度条的设置可以方便用户在点击时可以查找到视频封面所在的视频位置，方便用户的观看，如果没有则结束切换，如果有进度条，则需要将该进度条高亮显示，首先读取视频数据，然后将所有进度置灰后读取当前显示的图片所在的索引，并将该位置的进度条高亮处理，从而能够方便用户的查找。所述高亮处理该视频封面所在位置的进度条步骤具体包括：

读取该视频封面的视频数据；

将该视频数据的所有进度都置灰；

读取当前显示的视频封面所在的索引信息；

将当前显示的视频封面所在的位置的进度条高亮处理。

进一步地，本发明提供的方法还包括：

当事件监听层里面的点击事件被触发时，读取视频数据并获取视频地址，并调用视频组件播放视频。

具体的，当用户点击了视频封面后，则执行点击事件，具体为直接读取视频数据并获取视频地址，然后调用视频组件进行视频的播放。

如图5所示，基于上述基于教育系统的视频列表切换方法，本发明还相应提供了一种视频列表切换设备，所述视频列表切换设备可以是移动终端、桌上型计算机、笔记本、掌上电脑及服务器等计算设备。该视频列表切换设备包括处理器10、存储器20及显示器30。图5仅示出了视频列表切换设备的部分组件，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。

所述存储器20在一些实施例中可以是所述视频列表切换设备的内部存储单元，例如视频列表切换设备的硬盘或内存。所述存储器20在另一些实施例中也可以是所述视频列表切换设备的外部存储设备，例如所述视频列表切换设备上配备的插接式硬盘，智能存储卡(smartmediacard,smc)，安全数字(securedigital,sd)卡，闪存卡(flashcard)等。进一步地，所述存储器20还可以既包括视频列表切换设备的内部存储单元也包括外部存储设备。所述存储器20用于存储安装于所述视频列表切换设备的应用软件及各类数据，例如所述安装视频列表切换设备的程序代码等。所述存储器20还可以用于暂时地存储已经输出或者将要输出的数据。在一实施例中，存储器20上存储有视频列表切换程序40，该视频列表切换程序40可被处理器10所执行，从而实现本申请各实施例的基于教育系统的视频列表切换方法。

所述处理器10在一些实施例中可以是一中央处理器(centralprocessingunit,cpu)，微处理器或其他数据处理芯片，用于运行所述存储器20中存储的程序代码或处理数据，例如执行所述基于教育系统的视频列表切换方法等。

所述显示器30在一些实施例中可以是led显示器、液晶显示器、触控式液晶显示器以及oled(organiclight-emittingdiode，有机发光二极管)触摸器等。所述显示器30用于显示在所述视频列表切换设备的信息以及用于显示可视化的用户界面。所述视频列表切换设备的部件10-30通过系统总线相互通信。

在一实施例中，当处理器10执行所述存储器20中视频列表切换程序40时实现以下步骤：

获取多个视频数据，并提取多个视频数据的视频封面；

根据多个视频封面生成多个swiper插件，将需要显示的视频封面存放在表现层，将不显示的视频封面存放在缓冲区，并创建事件监听层；

对表现层的视频封面设置图片样式，并检测其中的视频封面是否有视频数据；

设置缓冲区的视频封面与表现层的视频封面的切换过渡效果；

根据用户点击的按钮触发事件监听层的事件，并在事件为切换事件时将缓冲区的视频封面切换至表现层，并将表现层的视频封面切换至缓冲区。

进一步地，所述获取视频数据，并在视频数据中提取多个视频封面的步骤包括：

获取多个视频数据，并提取多个视频数据的视频封面形成封面集合；

判断封面集合的长度是否达到预设长度，如果没有则将默认图片填充至封面集合中以使所述封面集合的长度达到预设长度。

进一步地，所述对表现层的视频封面设置图片样式，并检测其中的视频封面是否有视频数据的步骤包括：

将表现层里面左侧的图片缩放并将其位置向左偏移，并使其层级由右至左逐渐降低；将表现层里面中间图片放大并将其位置居中，并设置其层级为最高级；将表现层里面右边图片缩放并将其位置向右偏移，并使其层级由左至右逐渐降低；

检测表现层里面的各个视频封面是否有视频数据，如果没有则移除该视频封面的事件监听。

进一步地，所述缓冲区的视频封面与表现层的视频封面的切换过渡效果具体为：

点击切换时，将当前图片逐帧缩放，并将从缓冲区进入表现层的图片逐帧放大，当镜像切换的两个图片的尺寸达到平衡点时，切换两个图片的层级，将从缓冲区进入表现层的图片设置为最高层级。

进一步地，所述根据用户点击的按钮触发事件监听层的事件，并在事件为切换事件时将缓冲区的视频封面切换至表现层，并将表现层的视频封面切换至缓冲区的步骤包括：

根据用户点击的按钮触发事件监听层的事件；

在事件为切换事件时，更新视图并监听vue的视图更新；

在vue的视图更新完毕后执行预先注册的生命周期钩子；

执行过渡动画，并在执行完过渡动画后将缓冲区的需要切换的视频封面切换至表现层，将表现层的需要切换的视频封面切换至缓冲区。

进一步地，所述执行过渡动画，并在执行完过渡动画后将缓冲区的需要切换的视频封面切换至表现层，将表现层的需要切换的视频封面切换至缓冲区的步骤之后还包括：

检测切换至表现层的视频封面是否有进度条，如果有则高亮处理该视频封面所在位置的进度条，否则结束视频列表的切换。

进一步地，所述高亮处理该视频封面所在位置的进度条步骤包括：

读取该视频封面的视频数据；

将该视频数据的所有进度都置灰；

读取当前显示的视频封面所在的索引信息；

将当前显示的视频封面所在的位置的进度条高亮处理。

进一步地，所述处理器10执行所述存储器20中视频列表切换程序40时还实现以下步骤：

当事件监听层里面的点击事件被触发时，读取视频数据并获取视频地址，并调用视频组件播放视频。

请参阅图6，其为本发明安装视频列表切换程序的系统较佳实施例的功能模块图。在本实施例中，安装视频列表切换程序的系统可以被分割成一个或多个模块，所述一个或者多个模块被存储于所述存储器20中，并由一个或多个处理器(本实施例为所述处理器10)所执行，以完成本发明。例如，在图6中，安装视频列表切换程序的系统可以被分割成视频封面提取模块21、存储模块22、图片样式设置模块23、切换过渡效果设置模块24和视频列表切换模块25。本发明所称的模块是指能够完成特定功能的一系列计算机程序指令段，比程序更适合于描述所述视频列表切换程序在所述视频列表切换设备中的执行过程。以下描述将具体介绍所述模块21-25的功能。

视频封面提取模块21，用于获取多个视频数据，并提取多个视频数据的视频封面；

存储模块22，用于根据多个视频封面生成多个swiper插件，将需要显示的视频封面存放在表现层，将不显示的视频封面存放在缓冲区，并创建事件监听层；

图片样式设置模块23，用于对表现层的视频封面设置图片样式，并检测其中的视频封面是否有视频数据；

切换过渡效果设置模块24，用于设置缓冲区的视频封面与表现层的视频封面的切换过渡效果；

视频列表切换模块25，用于根据用户点击的按钮触发事件监听层的事件，并在事件为切换事件时将缓冲区的视频封面切换至表现层，并将表现层的视频封面切换至缓冲区。

进一步地，所述视频封面提取模块21具体包括：

视频封面获取单元，用于获取多个视频数据，并提取多个视频数据的视频封面形成封面集合；

长度判断单元，用于判断封面集合的长度是否达到预设长度，如果没有则将默认图片填充至封面集合中以使所述封面集合的长度达到预设长度。

进一步地，所述图片样式设置模块23具体包括：

图片样式设置单元，用于将表现层里面左侧的图片缩放并将其位置向左偏移，并使其层级由右至左逐渐降低；将表现层里面中间图片放大并将其位置居中，并设置其层级为最高级；将表现层里面右边图片缩放并将其位置向右偏移，并使其层级由左至右逐渐降低；

视频数据检测单元，用于检测表现层里面的各个视频封面是否有视频数据，如果没有则移除该视频封面的事件监听。

进一步地，所述缓冲区的视频封面与表现层的视频封面的切换过渡效果具体为：

点击切换时，将当前图片逐帧缩放，并将从缓冲区进入表现层的图片逐帧放大，当镜像切换的两个图片的尺寸达到平衡点时，切换两个图片的层级，将从缓冲区进入表现层的图片设置为最高层级。

进一步地，所述视频列表切换模块25具体包括：

事件触发单元，用于根据用户点击的按钮触发事件监听层的事件；

视图更新单元，用于在事件为切换事件时，更新视图并监听vue的视图更新；

执行单元，用于在vue的视图更新完毕后执行预先注册的生命周期钩子

切换单元，用于执行过渡动画，并在执行完过渡动画后将缓冲区的需要切换的视频封面切换至表现层，将表现层的需要切换的视频封面切换至缓冲区。

进一步地，所述安装视频列表切换程序的系统还包括：

进度条检测模块，用于检测切换至表现层的视频封面是否有进度条，如果有则高亮处理该视频封面所在位置的进度条，否则结束视频列表的切换。

进一步地，所述进度条检测模块具体包括：

视频数据读取单元，用于读取该视频封面的视频数据；

进度置灰单元，用于将该视频数据的所有进度都置灰；

索引信息读取单元，读取当前显示的视频封面所在的索引信息；

进度条显示单元，用于将当前显示的视频封面所在的位置的进度条高亮处理。

进一步地，所述安装视频列表切换程序的系统还包括：

点击事件触发模块，用于当事件监听层里面的点击事件被触发时，读取视频数据并获取视频地址，并调用视频组件播放视频。

综上所述，本发明提供的基于教育系统的视频列表切换方法、设备及存储介质中，所述方法包括获取多个视频数据，并提取多个视频数据的视频封面；根据多个视频封面生成多个swiper插件，将需要显示的视频封面存放在表现层，将不显示的视频封面存放在缓冲区，并创建事件监听层；对表现层的视频封面设置图片样式，并检测其中的视频封面是否有视频数据；设置缓冲区的视频封面与表现层的视频封面的切换过渡效果；根据用户点击的按钮触发事件监听层的事件，并在事件为切换事件时将缓冲区的视频封面切换至表现层，并将表现层的视频封面切换至缓冲区。本发明通过采用swiper自定义的一套多层级渐进式视频列表展示，满足了通天塔的多个功能点业务需求；另外还设置有一个缓冲区，点击节点时，自动切换到缓冲区的节点，再将原有的节点推入缓冲区，事件监听永远不会消失；另外全局捕获vue的视图更新事件，并且在下一个生命周期，将切换的过渡动画事件推入内存栈，视图更新完成后，再执行过渡动画，保证在切换过程中可以正常播放视频，而且具备动画效果，不会出现卡顿式切换。

当然，本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关硬件(如处理器，控制器等)来完成，所述的程序可存储于一计算机可读取的存储介质中，该程序在执行时可包括如上述各方法实施例的流程。其中所述的存储介质可为存储器、磁碟、光盘等。

可以理解的是，对本领域普通技术人员来说，可以根据本发明的技术方案及其发明构思加以等同替换或改变，而所有这些改变或替换都应属于本发明所附的权利要求的保护范围。