CN109246468B - Video list switching method, device and storage medium based on education system - Google Patents
Video list switching method, device and storage medium based on education system Download PDFInfo
- Publication number
- CN109246468B CN109246468B CN201810969022.7A CN201810969022A CN109246468B CN 109246468 B CN109246468 B CN 109246468B CN 201810969022 A CN201810969022 A CN 201810969022A CN 109246468 B CN109246468 B CN 109246468B
- Authority
- CN
- China
- Prior art keywords
- video
- switching
- cover
- presentation layer
- event
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/433—Content storage operation, e.g. storage operation in response to a pause request, caching operations
- H04N21/4331—Caching operations, e.g. of an advertisement for later insertion during playback
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/431—Generation of visual interfaces for content selection or interaction; Content or additional data rendering
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/47—End-user applications
- H04N21/482—End-user interface for program selection
- H04N21/4825—End-user interface for program selection using a list of items to be played back in a given order, e.g. playlists
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
- H04N21/85—Assembly of content; Generation of multimedia applications
- H04N21/854—Content authoring
- H04N21/8549—Creating video summaries, e.g. movie trailer
Landscapes
- Engineering & Computer Science (AREA)
- Multimedia (AREA)
- Signal Processing (AREA)
- Databases & Information Systems (AREA)
- Computer Security & Cryptography (AREA)
- Human Computer Interaction (AREA)
- Electrically Operated Instructional Devices (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a video list switching method, equipment and a storage medium based on an education system, wherein the method comprises the steps of obtaining a plurality of video data and extracting video covers of the video data; generating a plurality of swiper plug-ins according to a plurality of video covers, storing the video covers needing to be displayed in a presentation layer, storing the video covers not to be displayed in a buffer area, and creating an event monitoring layer; setting a picture style for a video cover of the presentation layer, and detecting whether the video cover has video data; setting a switching transition effect of a video cover of the buffer area and a video cover of the presentation layer; and triggering an event of the event monitoring layer according to a button clicked by a user, switching the video cover of the buffer area to the presentation layer when the event is a switching event, and switching the video cover of the presentation layer to the buffer area. The invention can ensure that the video can be normally played in the switching process by meeting the service requirements of a plurality of functional points of the universal space tower, has animation effect and can not generate the pause switching.
Description
Technical Field
The invention relates to the field of video list switching, in particular to a video list switching method, video list switching equipment and a video list switching storage medium based on an education system.
Background
At present, along with the popularity and the popularization of intelligent equipment, more and more people enjoy good experience brought by the intelligent equipment. Video APPs based on network interactions are also becoming increasingly popular. In the video APP, when a user switches videos such as movies, televisions and art programs, the user inputs a network request for classified switching, and the video APP displays corresponding video resources in the video APP based on the switching request. The current video list switching method has the following defects: 1. there is no mature protocol for the vue framework; 2. in the process of switching pictures, clicking the pictures to play the videos abnormally; 3. in the switching process, the animation effect disappears, so that the click-type switching is caused, and no switching effect exists.
Thus, the prior art has yet to be improved and enhanced.
Disclosure of Invention
In view of the above-mentioned shortcomings in the prior art, an object of the present invention is to provide a video list switching method, device and storage medium based on an educational system, which can ensure that the video list is not jammed during switching and that the animation effect does not disappear.
In order to achieve the purpose, the invention adopts the following technical scheme:
a video list switching method based on an education system comprises the following steps:
acquiring a plurality of video data and extracting video covers of the video data;
generating a plurality of swiper plug-ins according to a plurality of video covers, storing the video covers needing to be displayed in a presentation layer, storing the video covers not to be displayed in a buffer area, and creating an event monitoring layer;
setting a picture style for a video cover of the presentation layer, and detecting whether the video cover has video data;
setting a switching transition effect of a video cover of the buffer area and a video cover of the presentation layer;
triggering an event of an event monitoring layer according to a button clicked by a user, switching a video cover of a buffer area to an expression layer when the event is a switching event, and switching the video cover of the expression layer to the buffer area;
the step of acquiring video data and extracting a plurality of video covers from the video data comprises:
acquiring a plurality of video data, and extracting video covers of the video data to form a cover set;
judging whether the length of the cover set reaches a preset length or not, and if not, filling a default picture into the cover set so as to enable the length of the cover set to reach the preset length;
the step of setting picture patterns for the video cover of the presentation layer and detecting whether the video cover has video data comprises the following steps:
zooming the picture on the left side in the presentation layer, shifting the position of the picture to the left, and gradually reducing the hierarchy of the picture from right to left; amplifying the middle picture in the presentation layer, centering the middle picture, and setting the hierarchy of the middle picture as the highest level; zooming the right picture in the presentation layer and shifting the position of the right picture to the right, and gradually reducing the hierarchy of the right picture from left to right;
detecting whether each video cover in the presentation layer has video data, and if not, removing the event monitoring of the video cover;
the switching transition effect of the video cover of the buffer area and the video cover of the presentation layer is specifically as follows:
when clicking switching, zooming the current pictures frame by frame, amplifying the pictures entering the presentation layer from the buffer area frame by frame, switching the levels of the two pictures when the sizes of the two pictures switched in a mirror image reach a balance point, and setting the pictures entering the presentation layer from the buffer area as the highest level;
the step of triggering an event of the event monitoring layer according to a button clicked by a user, switching a video cover of the buffer area to the presentation layer when the event is a switching event, and switching the video cover of the presentation layer to the buffer area comprises the following steps:
triggering an event of an event monitoring layer according to a button clicked by a user;
when the event is a switching event, updating the view and monitoring vue for view update;
executing the pre-registered lifecycle hooks after the view of vue is updated;
and executing the transition animation, switching the video cover of the buffer area needing to be switched to the presentation layer after the transition animation is executed, and switching the video cover of the presentation layer needing to be switched to the buffer area.
In the method for switching video lists based on the educational system, the step of executing the transition animation, switching the video cover of the buffer area to be switched to the presentation layer after the transition animation is executed, and switching the video cover of the presentation layer to be switched to the buffer area further includes:
and detecting whether a progress bar exists in the video cover switched to the presentation layer, if so, highlighting the progress bar at the position of the video cover, and otherwise, ending the switching of the video list.
In the video list switching method based on the education system, the step of highlighting the progress bar at the position of the video cover comprises the following steps:
reading the video data of the video cover;
graying all progress of the video data;
reading index information of a currently displayed video cover;
and highlighting the progress bar at the position of the currently displayed video cover.
The video list switching method based on the education system further comprises the following steps:
when a click event in the event monitoring layer is triggered, reading video data and acquiring a video address, and calling a video component to play a video.
A video list switching apparatus comprising: a processor, a memory, and a communication bus;
the memory has stored thereon a computer readable program executable by the processor;
the communication bus realizes connection communication between the processor and the memory;
the processor, when executing the computer readable program, implements the steps in the educational system based video list switching method as described above.
A computer readable storage medium, storing one or more programs, which are executable by one or more processors, to implement the steps in the video list switching method based on an education system as described above.
Compared with the prior art, the video list switching method, the video list switching equipment and the storage medium based on the education system provided by the invention have the advantages that the method comprises the steps of obtaining a plurality of video data and extracting video covers of the video data; generating a plurality of swiper plug-ins according to a plurality of video covers, storing the video covers needing to be displayed in a presentation layer, storing the video covers not to be displayed in a buffer area, and creating an event monitoring layer; setting a picture style for a video cover of the presentation layer, and detecting whether the video cover has video data; setting a switching transition effect of a video cover of the buffer area and a video cover of the presentation layer; and triggering an event of the event monitoring layer according to a button clicked by a user, switching the video cover of the buffer area to the presentation layer when the event is a switching event, and switching the video cover of the presentation layer to the buffer area. The method adopts a set of multi-level progressive video list display customized by the swiper, and meets the service requirements of a plurality of function points of the universal tower; in addition, a buffer area is also arranged, when the node is clicked, the node is automatically switched to the node of the buffer area, and then the original node is pushed into the buffer area, so that the event monitoring never disappears; in addition, the view updating event of vue is captured globally, the switched transition animation event is pushed into the memory stack in the next life cycle, and the transition animation is executed after the view updating is finished, so that the video can be played normally in the switching process, and the video playing device has animation effect and can not be switched in a stuck mode.
Drawings
Fig. 1 is a flowchart of a video list switching method based on an education system according to the present invention.
Fig. 2 is a flowchart of the step S100 in the video list switching method based on the education system according to the present invention.
Fig. 3 is a flowchart of the step S300 in the video list switching method based on the education system according to the present invention.
Fig. 4 is a flowchart of the step S500 in the video list switching method based on the education system according to the present invention.
FIG. 5 is a schematic diagram of an operating environment of a video list switching procedure according to a preferred embodiment of the present invention.
FIG. 6 is a functional block diagram of a system for installing a video list switching program according to a preferred embodiment of the present invention.
Detailed Description
The present invention provides a video list switching method, device and storage medium based on an education system, and in order to make the objects, technical solutions and effects of the present invention clearer and clearer, the present invention will be further described in detail below with reference to the accompanying drawings and examples. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
Referring to fig. 1, the method for switching a video list based on an education system according to the present invention includes the following steps:
s100, acquiring a plurality of video data and extracting video covers of the video data.
Specifically, a user firstly imports a plurality of video data, then extracts a video cover of each video data to obtain a plurality of video covers, the video covers are used for being displayed in a video list and being clicked by the user to play the video data, and meanwhile, in order to make the video list, a plurality of video covers also need to form a cover set, namely a combination of the plurality of video covers, so that the user can freely select the video data to be played. A detailed flowchart of step S100 is shown in fig. 2.
Please refer to fig. 2, which is a flowchart of the step S100, including the following steps:
s101, acquiring a plurality of video data, and extracting video covers of the video data to form a cover set;
s102, judging whether the length of the cover set reaches a preset length or not, and if not, filling a default picture into the cover set so as to enable the length of the cover set to reach the preset length.
Specifically, in order to achieve the effect of multi-level display of the video list, the method is provided with a preset length, the length of the cover page set is the number of video cover pages, the next step is executed when the length of the cover page set reaches the preset length, if not, a default picture is filled into the cover page set, the default picture is not played, and only the display effect is increased.
S200, generating a plurality of swiper plug-ins according to a plurality of video covers, storing the video covers needing to be displayed in a presentation layer, storing the video covers not to be displayed in a buffer area, and creating an event monitoring layer.
Specifically, the swiper is a sliding special effect plug-in manufactured by pure javascript, is oriented to mobile terminals such as mobile phones and tablet computers, and aims to enable a video cover in a video list to be capable of sliding for a user to select. One part of the video cover in the cover set is stored in the presentation layer, the other part of the video cover is stored in the buffer area, the video cover of the presentation layer is the video cover needing to be displayed, and the video cover which is not displayed is in the buffer area. The event monitoring layer is set for each video cover, the event monitoring means that a computer waits for an event to occur and then makes a relevant response, such as waiting for a mouse to click a button and opening a new page when clicking occurs.
S300, setting a picture pattern for the video cover of the presentation layer, and detecting whether the video cover has video data.
Specifically, in order to display the video covers in a hierarchical manner, the video covers of the presentation layers need to be set in picture styles, the setting of the picture styles can enable users to view the video covers in a sliding manner, meanwhile, in order to avoid some default pictures from occupying the memory, whether video data exist in each video cover needs to be detected, if no video data exist, event monitoring of the video covers is removed, and the memory is released. The flowchart of step S300 is shown in fig. 3.
Please refer to fig. 3, which is a flowchart of the step S300, including the following steps:
s301, zooming the picture on the left side in the presentation layer, shifting the position of the picture to the left, and gradually reducing the hierarchy of the picture from right to left; amplifying the middle picture in the presentation layer, centering the middle picture, and setting the hierarchy of the middle picture as the highest level; zooming the right picture in the presentation layer and shifting the position of the right picture to the right, and gradually reducing the hierarchy of the right picture from left to right;
s302, whether video data exist in each video cover in the presentation layer is detected, and if not, the event monitoring of the video cover is removed.
Specifically, in the process of display, in order to achieve the effect of multi-level progressive video list display of the universal space tower, the invention displays the pictures of the video covers in layers, the layers are gradually reduced from the middle to the left and the right, the pictures at the left and the right sides are displayed in a maximized mode, the pictures at the left and the right sides are reduced, the positions of the pictures are shifted to the left and the right, the layers are gradually reduced, the video covers at the left side slide to the right in the middle or the video covers at the right side slide to the left in the middle, the pictures are gradually enlarged, and.
S400, setting a switching transition effect of the video cover of the buffer area and the video cover of the presentation layer.
Specifically, the transition effect of switching between the video cover of the buffer area and the video cover of the presentation layer is specifically as follows: when switching is clicked, the current pictures are zoomed frame by frame, the pictures entering the presentation layer from the buffer area are amplified frame by frame, when the sizes of the two pictures switched in a mirror image mode reach a balance point, the levels of the two pictures are switched, and the pictures entering the presentation layer from the buffer area are set as the highest level.
S500, triggering an event of the event monitoring layer according to a button clicked by a user, switching a video cover of the buffer area to the presentation layer when the event is a switching event, and switching the video cover of the presentation layer to the buffer area.
Specifically, the event monitoring layer waits for an event to occur, the time of each video cover comprises a switching event and a clicking event, if the time is the switching event, the video cover of the buffer area is switched to the presentation layer, and the video cover of the presentation layer is switched to the buffer area. The flowchart of step S500 is shown in fig. 4.
Please refer to fig. 4, which is a flowchart of the step S500, including the following steps:
s501, triggering an event of an event monitoring layer according to a button clicked by a user;
s502, when the event is a switching event, updating the view and monitoring vue the view updating;
s503, executing the pre-registered life cycle hook after the view of vue is updated;
s504, executing the transition animation, switching the video cover of the buffer area needing to be switched to the presentation layer after the transition animation is executed, and switching the video cover of the presentation layer needing to be switched to the buffer area.
Specifically, vue is a set of progressive framework for constructing user interface, the invention captures vue view update events globally, and pushes the switched transition animation events into the memory stack in the next life cycle, after the view update is completed, the transition animation is executed, so that the animation effect will not be lost in the switching process, and because a life cycle hook is adopted, the pause switching will not be caused, and meanwhile, the effectiveness of event monitoring can be ensured by switching the video cover of the presentation layer to be switched to the buffer area.
Further, the step S501 is followed by:
and detecting whether a progress bar exists in the video cover switched to the presentation layer, if so, highlighting the progress bar at the position of the video cover, and otherwise, ending the switching of the video list.
Particularly, the arrangement of the progress bar can facilitate a user to find the video position of a video cover when clicking, the user can watch conveniently, if the user does not click, the switching is finished, if the progress bar exists, the progress bar needs to be highlighted, video data is read firstly, then indexes where the currently displayed pictures are located are read after all progresses are grayed, and the progress bar at the position is highlighted, so that the user can find conveniently. The step of highlighting the progress bar at the position of the video cover specifically comprises the following steps:
reading the video data of the video cover;
graying all progress of the video data;
reading index information of a currently displayed video cover;
and highlighting the progress bar at the position of the currently displayed video cover.
Further, the method provided by the invention further comprises the following steps:
when a click event in the event monitoring layer is triggered, reading video data and acquiring a video address, and calling a video component to play a video.
Specifically, after the user clicks the video cover, a click event is executed, specifically, video data is directly read and a video address is obtained, and then a video component is called to play a video.
As shown in fig. 5, based on the above method for switching video lists based on an education system, the present invention also provides a device for switching video lists, where the device for switching video lists can be a mobile terminal, a desktop computer, a notebook, a palm computer, a server, or other computing devices. The video list switching apparatus includes a processor 10, a memory 20, and a display 30. Fig. 5 shows only some of the components of the video list switching apparatus, but it is to be understood that not all of the shown components are required to be implemented, and that more or fewer components may be implemented instead.
The memory 20 may in some embodiments be an internal storage unit of the video list switching device, such as a hard disk or a memory of the video list switching device. The memory 20 may also be an external storage device of the video list switching device in other embodiments, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and the like, which are provided on the video list switching device. Further, the memory 20 may also include both an internal storage unit of the video list switching device and an external storage device. The memory 20 is used for storing application software installed in the video list switching apparatus and various types of data, such as program codes of the installed video list switching apparatus. The memory 20 may also be used to temporarily store data that has been output or is to be output. In one embodiment, the memory 20 stores a video list switching program 40, and the video list switching program 40 can be executed by the processor 10, so as to implement the video list switching method based on the educational system according to the embodiments of the present application.
The processor 10 may be, in some embodiments, a Central Processing Unit (CPU), a microprocessor or other data Processing chip, and is configured to run program codes stored in the memory 20 or process data, such as executing the video list switching method based on the educational system.
The display 30 may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, an OLED (Organic Light-Emitting Diode) touch panel, or the like in some embodiments. The display 30 is used for displaying information at the video list switching device and for displaying a visual user interface. The components 10-30 of the video list switching device communicate with each other via a system bus.
In one embodiment, when the processor 10 executes the video list switching program 40 in the memory 20, the following steps are implemented:
acquiring a plurality of video data and extracting video covers of the video data;
generating a plurality of swiper plug-ins according to a plurality of video covers, storing the video covers needing to be displayed in a presentation layer, storing the video covers not to be displayed in a buffer area, and creating an event monitoring layer;
setting a picture style for a video cover of the presentation layer, and detecting whether the video cover has video data;
setting a switching transition effect of a video cover of the buffer area and a video cover of the presentation layer;
and triggering an event of the event monitoring layer according to a button clicked by a user, switching the video cover of the buffer area to the presentation layer when the event is a switching event, and switching the video cover of the presentation layer to the buffer area.
Further, the step of acquiring video data and extracting a plurality of video covers from the video data comprises:
acquiring a plurality of video data, and extracting video covers of the video data to form a cover set;
judging whether the length of the cover set reaches a preset length or not, and if not, filling a default picture into the cover set so as to enable the length of the cover set to reach the preset length.
Further, the step of setting a picture style for the video cover of the presentation layer and detecting whether the video cover has video data includes:
zooming the picture on the left side in the presentation layer, shifting the position of the picture to the left, and gradually reducing the hierarchy of the picture from right to left; amplifying the middle picture in the presentation layer, centering the middle picture, and setting the hierarchy of the middle picture as the highest level; zooming the right picture in the presentation layer and shifting the position of the right picture to the right, and gradually reducing the hierarchy of the right picture from left to right;
and detecting whether each video cover in the presentation layer has video data, and if not, removing the event monitoring of the video cover.
Further, the transition effect of switching between the video cover of the buffer area and the video cover of the presentation layer is specifically as follows:
when switching is clicked, the current pictures are zoomed frame by frame, the pictures entering the presentation layer from the buffer area are amplified frame by frame, when the sizes of the two pictures switched in a mirror image mode reach a balance point, the levels of the two pictures are switched, and the pictures entering the presentation layer from the buffer area are set as the highest level.
Further, the step of triggering an event of the event monitoring layer according to a button clicked by a user, switching a video cover of the buffer area to the presentation layer when the event is a switching event, and switching the video cover of the presentation layer to the buffer area includes:
triggering an event of an event monitoring layer according to a button clicked by a user;
when the event is a switching event, updating the view and monitoring vue for view update;
executing the pre-registered lifecycle hooks after the view of vue is updated;
and executing the transition animation, switching the video cover of the buffer area needing to be switched to the presentation layer after the transition animation is executed, and switching the video cover of the presentation layer needing to be switched to the buffer area.
Further, the step of executing the transition animation, and after the step of executing the transition animation, switching the video cover of the buffer area that needs to be switched to the presentation layer, and switching the video cover of the presentation layer that needs to be switched to the buffer area further includes:
and detecting whether a progress bar exists in the video cover switched to the presentation layer, if so, highlighting the progress bar at the position of the video cover, and otherwise, ending the switching of the video list.
Further, the step of highlighting the progress bar at the position of the video cover comprises:
reading the video data of the video cover;
graying all progress of the video data;
reading index information of a currently displayed video cover;
and highlighting the progress bar at the position of the currently displayed video cover.
Further, the processor 10 executes the video list switching program 40 in the memory 20 to further implement the following steps:
when a click event in the event monitoring layer is triggered, reading video data and acquiring a video address, and calling a video component to play a video.
Please refer to fig. 6, which is a functional block diagram of a system for installing a video list switching program according to a preferred embodiment of the present invention. In this embodiment, the system for installing the video list switching program may be divided into one or more modules, and the one or more modules are stored in the memory 20 and executed by one or more processors (in this embodiment, the processor 10) to complete the present invention. For example, in fig. 6, the system of installing the video list switching program may be divided into a video cover page extraction module 21, a storage module 22, a picture pattern setting module 23, a switching transitional effect setting module 24, and a video list switching module 25. The module referred to in the present invention refers to a series of computer program instruction segments capable of performing specific functions, and is more suitable than a program for describing the execution process of the video list switching program in the video list switching apparatus. The following description will specifically describe the functionality of the modules 21-25.
A video cover extraction module 21, configured to obtain a plurality of video data and extract a video cover of the plurality of video data;
the storage module 22 is used for generating a plurality of swiper plug-ins according to a plurality of video covers, storing the video covers needing to be displayed in the presentation layer, storing the video covers not to be displayed in the buffer area, and creating an event monitoring layer;
the picture style setting module 23 is configured to set a picture style for a video cover of the presentation layer, and detect whether video data exists in the video cover;
a switching transition effect setting module 24, configured to set a switching transition effect between the video cover of the buffer and the video cover of the presentation layer;
and the video list switching module 25 is configured to trigger an event of the event monitoring layer according to a button clicked by a user, switch the video cover of the buffer area to the presentation layer when the event is a switching event, and switch the video cover of the presentation layer to the buffer area.
Further, the video cover extraction module 21 specifically includes:
the video cover acquiring unit is used for acquiring a plurality of video data and extracting video covers of the video data to form a cover set;
the length judging unit is used for judging whether the length of the cover set reaches the preset length or not, and if not, filling the default picture into the cover set so that the length of the cover set reaches the preset length.
Further, the picture style setting module 23 specifically includes:
the picture pattern setting unit is used for zooming the picture on the left side in the presentation layer, shifting the position of the picture to the left and gradually reducing the hierarchy of the picture from the right to the left; amplifying the middle picture in the presentation layer, centering the middle picture, and setting the hierarchy of the middle picture as the highest level; zooming the right picture in the presentation layer and shifting the position of the right picture to the right, and gradually reducing the hierarchy of the right picture from left to right;
and the video data detection unit is used for detecting whether each video cover in the presentation layer has video data or not, and removing the event monitoring of the video cover if the video cover does not have the video data.
Further, the transition effect of switching between the video cover of the buffer area and the video cover of the presentation layer is specifically as follows:
when switching is clicked, the current pictures are zoomed frame by frame, the pictures entering the presentation layer from the buffer area are amplified frame by frame, when the sizes of the two pictures switched in a mirror image mode reach a balance point, the levels of the two pictures are switched, and the pictures entering the presentation layer from the buffer area are set as the highest level.
Further, the video list switching module 25 specifically includes:
the event triggering unit is used for triggering an event of the event monitoring layer according to a button clicked by a user;
the view updating unit is used for updating the view and monitoring vue the view updating when the event is a switching event;
an execution unit for executing the pre-registered lifecycle hooks after the view update of vue is completed
And the switching unit is used for executing the transition animation, switching the video cover of the buffer area needing to be switched to the presentation layer after the transition animation is executed, and switching the video cover of the presentation layer needing to be switched to the buffer area.
Further, the system for installing the video list switching program further includes:
and the progress bar detection module is used for detecting whether a progress bar exists in the video cover switched to the presentation layer, if so, highlighting the progress bar at the position of the video cover, and otherwise, finishing the switching of the video list.
Further, the progress bar detecting module specifically includes:
a video data reading unit for reading the video data of the video cover;
the progress graying unit is used for graying all progresses of the video data;
the index information reading unit is used for reading the index information of the currently displayed video cover;
and the progress bar display unit is used for highlighting the progress bar at the position of the currently displayed video cover.
Further, the system for installing the video list switching program further includes:
and the click event triggering module is used for reading the video data and acquiring a video address when the click event in the event monitoring layer is triggered, and calling the video component to play the video.
In summary, in the video list switching method, device and storage medium based on the education system provided by the invention, the method includes acquiring a plurality of video data and extracting video covers of the plurality of video data; generating a plurality of swiper plug-ins according to a plurality of video covers, storing the video covers needing to be displayed in a presentation layer, storing the video covers not to be displayed in a buffer area, and creating an event monitoring layer; setting a picture style for a video cover of the presentation layer, and detecting whether the video cover has video data; setting a switching transition effect of a video cover of the buffer area and a video cover of the presentation layer; and triggering an event of the event monitoring layer according to a button clicked by a user, switching the video cover of the buffer area to the presentation layer when the event is a switching event, and switching the video cover of the presentation layer to the buffer area. The method adopts a set of multi-level progressive video list display customized by the swiper, and meets the service requirements of a plurality of function points of the universal tower; in addition, a buffer area is also arranged, when the node is clicked, the node is automatically switched to the node of the buffer area, and then the original node is pushed into the buffer area, so that the event monitoring never disappears; in addition, the view updating event of vue is captured globally, the switched transition animation event is pushed into the memory stack in the next life cycle, and the transition animation is executed after the view updating is finished, so that the video can be played normally in the switching process, and the video playing device has animation effect and can not be switched in a stuck mode.
Of course, it will be understood by those skilled in the art that all or part of the processes of the methods of the above embodiments may be implemented by a computer program instructing relevant hardware (such as a processor, a controller, etc.), and the program may be stored in a computer readable storage medium, and when executed, the program may include the processes of the above method embodiments. The storage medium may be a memory, a magnetic disk, an optical disk, etc.
It should be understood that equivalents and modifications of the technical solution and inventive concept thereof may occur to those skilled in the art, and all such modifications and alterations should fall within the scope of the appended claims.
Claims (6)
1. A video list switching method based on an education system is characterized by comprising the following steps:
acquiring a plurality of video data and extracting video covers of the video data;
generating a plurality of swiper plug-ins according to a plurality of video covers, storing the video covers needing to be displayed in a presentation layer, storing the video covers not to be displayed in a buffer area, and creating an event monitoring layer;
setting a picture style for a video cover of the presentation layer, and detecting whether the video cover has video data;
setting a switching transition effect of a video cover of the buffer area and a video cover of the presentation layer;
triggering an event of an event monitoring layer according to a button clicked by a user, switching a video cover of a buffer area to an expression layer when the event is a switching event, and switching the video cover of the expression layer to the buffer area;
the step of acquiring a plurality of video data and extracting a video cover of the plurality of video data comprises:
acquiring a plurality of video data, and extracting video covers of the video data to form a cover set;
judging whether the length of the cover set reaches a preset length or not, and if not, filling a default picture into the cover set so as to enable the length of the cover set to reach the preset length;
the step of setting picture patterns for the video cover of the presentation layer and detecting whether the video cover has video data comprises the following steps:
zooming the picture on the left side in the presentation layer, shifting the position of the picture to the left, and gradually reducing the hierarchy of the picture from right to left; amplifying the middle picture in the presentation layer, centering the middle picture, and setting the hierarchy of the middle picture as the highest level; zooming the right picture in the presentation layer and shifting the position of the right picture to the right, and gradually reducing the hierarchy of the right picture from left to right;
detecting whether each video cover in the presentation layer has video data, and if not, removing the event monitoring of the video cover;
the switching transition effect of the video cover of the buffer area and the video cover of the presentation layer is specifically as follows:
when clicking switching, zooming the current pictures frame by frame, amplifying the pictures entering the presentation layer from the buffer area frame by frame, switching the levels of the two pictures when the sizes of the two pictures switched in a mirror image reach a balance point, and setting the pictures entering the presentation layer from the buffer area as the highest level;
the step of triggering an event of the event monitoring layer according to a button clicked by a user, switching a video cover of the buffer area to the presentation layer when the event is a switching event, and switching the video cover of the presentation layer to the buffer area comprises the following steps:
triggering an event of an event monitoring layer according to a button clicked by a user;
when the event is a switching event, updating the view and monitoring vue for view update;
executing the pre-registered lifecycle hooks after the view of vue is updated;
and executing the transition animation, switching the video cover of the buffer area needing to be switched to the presentation layer after the transition animation is executed, and switching the video cover of the presentation layer needing to be switched to the buffer area.
2. The educational system-based video list switching method according to claim 1, wherein the step of executing the transition animation and switching the video cover of the buffer area to be switched to the presentation layer after the transition animation is executed, and switching the video cover of the presentation layer to be switched to the buffer area further comprises:
and detecting whether a progress bar exists in the video cover switched to the presentation layer, if so, highlighting the progress bar at the position of the video cover, and otherwise, ending the switching of the video list.
3. The educational system-based video list switching method of claim 2, wherein the step of highlighting the progress bar of the position of the video cover comprises:
reading the video data of the video cover;
graying all progress of the video data;
reading index information of a currently displayed video cover;
and highlighting the progress bar at the position of the currently displayed video cover.
4. The educational system-based video list switching method of claim 3, further comprising:
when a click event in the event monitoring layer is triggered, reading video data and acquiring a video address, and calling a video component to play a video.
5. A video list switching apparatus, comprising: a processor, a memory, and a communication bus;
the memory has stored thereon a computer readable program executable by the processor;
the communication bus realizes connection communication between the processor and the memory;
the processor, when executing the computer readable program, implements the steps in the educational system based video list switching method of any one of claims 1 to 4.
6. A computer-readable storage medium storing one or more programs, the one or more programs being executable by one or more processors to implement the steps in the educational system based video list switching method according to any one of claims 1 to 4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810969022.7A CN109246468B (en) | 2018-08-23 | 2018-08-23 | Video list switching method, device and storage medium based on education system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810969022.7A CN109246468B (en) | 2018-08-23 | 2018-08-23 | Video list switching method, device and storage medium based on education system |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109246468A CN109246468A (en) | 2019-01-18 |
| CN109246468B true CN109246468B (en) | 2021-02-26 |
Family
ID=65069485
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810969022.7A Active CN109246468B (en) | 2018-08-23 | 2018-08-23 | Video list switching method, device and storage medium based on education system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109246468B (en) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110267089B (en) * | 2019-07-18 | 2022-02-22 | 北京字节跳动网络技术有限公司 | Video playing control method and device, electronic equipment and storage medium |
| CN110597424A (en) * | 2019-08-01 | 2019-12-20 | 北京悉见科技有限公司 | Method, device and storage medium for picture display |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR20070093481A (en) * | 2006-03-14 | 2007-09-19 | 엘지전자 주식회사 | Method for displaying and switching external input in digital video device |
| CN104869429A (en) * | 2015-05-19 | 2015-08-26 | 乐视致新电子科技（天津）有限公司 | Video previewing method and apparatus |
| CN106210858A (en) * | 2016-08-08 | 2016-12-07 | Tcl集团股份有限公司 | The changing method of a kind of terminal interface and device |
| CN106998477A (en) * | 2017-04-05 | 2017-08-01 | 腾讯科技（深圳）有限公司 | The front cover display methods and device of live video |
| CN108235086A (en) * | 2017-12-18 | 2018-06-29 | 广州华多网络科技有限公司 | Video playing control method, device and corresponding terminal |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105898610A (en) * | 2015-10-15 | 2016-08-24 | 乐视网信息技术（北京）股份有限公司 | Automatic video list playing method and device |
-
2018
- 2018-08-23 CN CN201810969022.7A patent/CN109246468B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR20070093481A (en) * | 2006-03-14 | 2007-09-19 | 엘지전자 주식회사 | Method for displaying and switching external input in digital video device |
| CN104869429A (en) * | 2015-05-19 | 2015-08-26 | 乐视致新电子科技（天津）有限公司 | Video previewing method and apparatus |
| CN106210858A (en) * | 2016-08-08 | 2016-12-07 | Tcl集团股份有限公司 | The changing method of a kind of terminal interface and device |
| CN106998477A (en) * | 2017-04-05 | 2017-08-01 | 腾讯科技（深圳）有限公司 | The front cover display methods and device of live video |
| CN108235086A (en) * | 2017-12-18 | 2018-06-29 | 广州华多网络科技有限公司 | Video playing control method, device and corresponding terminal |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109246468A (en) | 2019-01-18 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107172454B (en) | Video recommendation method, medium, device and computing equipment | |
| US9851865B2 (en) | Method for managing application and electronic device thereof | |
| US20190095059A1 (en) | Method and device for processing application icon and electronic apparatus | |
| CN105320417B (en) | Page switching method and client | |
| US20130219338A1 (en) | Automatic Magnification and Selection Confirmation | |
| US20140089824A1 (en) | Systems And Methods For Dynamically Altering A User Interface Based On User Interface Actions | |
| WO2014075582A1 (en) | Method and apparatus for storing webpage access records | |
| KR20140091555A (en) | Measuring web page rendering time | |
| CN109446025B (en) | Operation behavior playback method and device, electronic equipment and readable medium | |
| US20150121301A1 (en) | Information processing method and electronic device | |
| CN114115681B (en) | Page generation method and device, electronic equipment and medium | |
| JP2023530395A (en) | APP ICON CONTROL METHOD, APPARATUS AND ELECTRONIC DEVICE | |
| CN112579187A (en) | Optimization method and device for cold start of application program | |
| CN112416201B (en) | Application cache cleaning method and device, electronic equipment and medium | |
| CN112083854A (en) | Application program running method and device | |
| CN109246468B (en) | Video list switching method, device and storage medium based on education system | |
| CN103677519A (en) | Method for collecting multimedia resource, terminal and server | |
| CN111770384A (en) | Video switching method and device, electronic equipment and storage medium | |
| US11243679B2 (en) | Remote data input framework | |
| CN109358927B (en) | Application program display method and device and terminal equipment | |
| CN113312119B (en) | Information synchronization method and device, computer readable storage medium and electronic equipment | |
| CN108363793B (en) | Webpage application access method and device, storage medium and electronic equipment | |
| WO2022143337A1 (en) | Display control method and apparatus, and electronic device and storage medium | |
| CN113204299B (en) | Display method, display device, electronic equipment and storage medium | |
| US20140245214A1 (en) | Enabling search in a touchscreen device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |