Method and system for automatically playing video in WeChat H5 environment

Abstract

The invention discloses a method and a system for automatically playing a video in a WeChat H5 environment, and the method comprises the steps: initializing an H5 player which is a switch component comprising three switch Item sub-components, and each switch Item sub-component comprises a video component of an H5 page; in the non-silence mode, user input and player callback events are monitored, and if a sliding event is monitored, the sliding event is processed, and index data of the H5 player is updated; obtaining a current video playing link according to the updated index data, automatically playing the video, and if the episode where the current video is located is played, ending playing; otherwise, the H5 player triggers the sliding event and continues to play the next video until the episode is completely played. According to the invention, the function of automatically playing the video in the non-silent mode is realized in the WeChat H5 environment, and the smoothness of automatically playing the video can be improved.

Description

Technical Field

[0001] The present invention belongs to the field of interactive video technology, and in particular relates to a method and system for automatically playing videos in a WeChat H5 environment. Background Art

[0002] With the rapid development of mobile Internet technology, H5 pages have been widely used in social media platforms such as WeChat, where embedded video content has become an important means to improve user experience. However, in the WeChat H5 environment, for the sake of user experience and mobile device resource limitations, the WeChat official browser prohibits the automatic playback of videos without user touch by default, especially videos with sound, to avoid unnecessary embarrassment and interference in scenarios such as office environments. This strategy causes developers to encounter NotAllowedError errors when they directly call the video play method through the API in non-silent mode to achieve automatic playback without user interaction, which in turn causes the phone screen to go black.

[0003] Nevertheless, in actual application scenarios such as education and training, product display and advertising, users often expect to be able to watch video content with commentary immediately after entering the H5 page. The existing technology generally triggers video playback through user interaction. Although this method is feasible, it may destroy the smoothness of the user experience and is not suitable for all scenarios. There are also some technical solutions in the existing technology that can realize automatic video playback in the WeChat H5 environment, but they can basically only be implemented in silent mode, with limited usage scenarios, and are prone to playback freezes and other phenomena.

[0004] Therefore, how to break through the limitations of automatic playback while following the official WeChat strategy and achieve smooth and automatic playback of videos in non-silent mode in the WeChat H5 environment has become a technical problem that needs to be solved urgently. Summary of the invention

[0005] In view of this, the present invention proposes a method and system for realizing automatic video playback in the WeChat H5 environment, which is used to solve the problem that the prior art is difficult to realize automatic and smooth playback of videos in non-silent mode in the WeChat H5 environment.

[0006] In a first aspect, the present invention discloses a method for automatically playing a video in a WeChat H5 environment, the method comprising:

[0007] Initialize an H5 player, which is a swiper component containing three swiperItem subcomponents, each of which contains a video component of an H5 page;

[0008] In non-silent mode, monitor user input and player callback events. If a sliding event is detected, process the sliding event and update the index data of the H5 player.

[0009] Get the current video playback link according to the updated H5 player index data and automatically play the video. If the episode in which the current video is located has been played, end the playback; otherwise, the H5 player triggers a sliding event and continues to play the next video until the episode is played, destroys the swiper component and ends the playback.

[0010] On the basis of the above technical solution, preferably, the initialization of the H5 player specifically includes:

[0011] Customize a data structure data to store the status information of the H5 player;

[0012] The status information of the H5 player includes the currently selected swiperItem subcomponent index, the currently playing video index and the episode play link set.

[0013] Based on the above technical solution, preferably, the monitoring of user input and player callback events specifically includes:

[0014] Monitor whether the user input and player callback events are sliding events or exit events. If not, discard the current event and let other components handle it and continue monitoring;

[0015] If a sliding event is detected, the sub-process of processing the sliding event and updating the index data of the H5 player is entered;

[0016] If an exit event is detected, the playback will be terminated and the entire playback process will be exited.

[0017] Based on the above technical solution, preferably, the processing of the sliding event and updating the index data of the H5 player specifically includes:

[0018] When a sliding event is received, the onSwiperChange(evt) event is triggered and the sliding event callback parameters are recorded;

[0019] Calculate the sliding direction and call the updateSwiperItemsAndPlay function to update the H5 player index data;

[0020] Processes the swipe up event or swipe down event according to the swiping direction, updates the currently selected swiperItem subcomponent index and the currently playing video index, and returns the index data.

[0021] Based on the above technical solution, preferably, the calculating of the sliding direction and calling the updateSwiperItemsAndPlay function to update the H5 player index data specifically includes:

[0022] Calculate the difference between the currently selected swiperItem subcomponent index and the swiperItem subcomponent index currently stored in the custom data structure;

[0023] If diff = -1 or diff = 2, it is a downslide event in the cyclic case;

[0024] If diff=1 or diff=-2, it is a slide-up event in a loop;

[0025] If it is a slide down event, update the currently selected swiperItem subcomponent index according to the number of swiperItem subcomponents contained in the H5 player;

[0026] If it is a swipe up event, when the currently selected swiperItem subcomponent index is 0, reset the currently selected swiperItem subcomponent index to 2, otherwise perform a self-decrement operation on the currently selected swiperItem subcomponent index.

[0027] On the basis of the above technical solution, preferably, the formula for updating the index of the currently selected swiperItem subcomponent according to the number of swiperItem subcomponents contained in the H5 player is:

[0028] data.swiper_.sel_new=(data.swiper_.sel+1)%3

[0029] Among them, data.swiper_.sel and data.swiper_.sel_new are the indexes of the currently selected swiperItem subcomponent before and after the update respectively.

[0030] Based on the above technical solution, preferably, the processing of the swipe up event or the swipe down event according to the sliding direction, updating the currently selected swiperItem subcomponent index and the currently played video index and returning the index data specifically includes:

[0031] Handle the swipe-up event: after the swipe-up event, the index of the currently selected swiperItem subcomponent is reduced by 1. If the currently playing video is the first episode, the index of the currently playing video is set to the last episode; if not, the index of the currently playing video is decremented by 1.

[0032] Handle the swipe down event: after the swipe down event, the index of the currently selected swiperItem subcomponent is increased by 1. If the currently playing video is the last episode, the index of the currently playing video is set to 0; if not, the index of the currently playing video is incremented by 1.

[0033] Returns the updated index of the currently selected swiperItem subcomponent and the currently playing video index.

[0034] In a second aspect, the present invention discloses a system for automatically playing videos in a WeChat H5 environment, the system comprising:

[0035] Initialization module: used to initialize the H5 player, which is a swiper component containing three swiperItem subcomponents, each of which contains a video component of an H5 page;

[0036] Event monitoring module: used to monitor user input and player callback events in non-silent mode. If a sliding event is detected, it processes the sliding event and updates the index data of the H5 player.

[0037] Video playback module: used to obtain the current video playback link and automatically play the video according to the updated H5 player index data. If the episode in which the current video is located has been played, the playback is ended; otherwise, the H5 player triggers a sliding event and continues to play the next video until the episode is played, destroys the swiper component and ends the playback.

[0038] In a third aspect of the present invention, an electronic device is disclosed, comprising: at least one processor, at least one memory, a communication interface and a bus;

[0039] Wherein, the processor, memory, and communication interface communicate with each other via the bus;

[0040] The memory stores program instructions that can be executed by the processor, and the processor calls the program instructions to implement the method according to the first aspect of the present invention.

[0041] According to a fourth aspect of the present invention, a computer-readable storage medium is disclosed, wherein the computer-readable storage medium stores computer instructions, and the computer instructions enable a computer to implement the method described in the first aspect of the present invention.

[0042] Compared with the prior art, the present invention has the following beneficial effects:

[0043] 1) The present invention creates an H5 player based on a swiper component including three swiperItem subcomponents. The three subcomponents are cyclically slid to achieve smoother up and down sliding playback and avoid lag. In non-silent mode, the present invention monitors user input and player callback events, processes sliding events and updates the index data of the H5 player. According to the updated index data of the H5 player, the automatic playback function of the video in non-silent mode is realized in the WeChat H5 environment, so as to improve the user experience and meet the actual application needs.

[0044] 2) The present invention records the sliding event callback parameters when receiving the sliding event, calculates the sliding direction according to the sliding event callback parameters, and calls the updateSwiperItemsAndPlay function to update the H5 player index data, processes the sliding event or the sliding event according to the sliding direction, updates the currently selected swiperItem subcomponent index and the currently playing video index, and makes the sliding event response smoother, realizing the automatic playback of the series based on up and down sliding in non-silent mode. While complying with the official WeChat policy, it breaks through the limitation of H5's default silent playback and improves the smoothness of automatic video playback.

[0045] 3) The H5-based player of the present invention can be applied to multiple platforms and has stronger adaptability; because the player is based on standard components and modules, new interactive elements and rules can be easily added and expanded, and the maintenance and update of the system also become simpler. BRIEF DESCRIPTION OF THE DRAWINGS

[0046] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0047] Figure 1 A flow chart of a method for automatically playing videos in a WeChat H5 environment provided by an embodiment of the present invention;

[0048] Figure 2 A sub-flow chart for processing sliding events and updating index data of an H5 player provided in an embodiment of the present invention;

[0049] Figure 3 It is a schematic diagram of the arrangement of subcomponents and the response to sliding events in the swiper component of the H5 player of the present invention. DETAILED DESCRIPTION

[0050] The following will be combined with the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0051] See also Figure 1 The present invention discloses a method for automatically playing a video in a WeChat H5 environment, the method comprising:

[0052] S1. Initialize an H5 player, where the H5 player is a swiper component including three swiperItem subcomponents, each of which contains a video component of an H5 page.

[0053] The H5 player of the present invention is obtained by creating a swiper component that fixedly includes three swiperItem subcomponents, each of which contains an H5 native video component for playing videos, and the three swiperItem subcomponents are stored together in the array swiperItem[].

[0054] The present invention customizes a data structure data for storing the status information of the H5 player. The status information of the H5 player includes the currently selected swiperItem subcomponent index, the currently played video index and the episode play link set.

[0055] The pseudo code of the data structure data defined in the embodiment of the present invention is shown below:

[0056]

[0057] The value of the currently selected swiperItem index data.swiper_.sel can only be 0, 1, or 2. The episode playback link collection data.episodes.urls is passed in from the H5 player and contains all the playback link information of the current episode. The currently playing video index is specified by eid=data.swiper_.oriSelMap, and the link played by the H5 player is data.episodes.url[eid].

[0058] In an embodiment of the present invention, data is initialized as follows:

[0059]

[0060] Since the index eid of the currently playing video has been set to 0, and the index data.swiper_.sel of the currently selected swiperItem is specified to 0, the H5 player will display the swpierItem[0] subcomponent and play the first episode of the series after initialization.

[0061] S2. In non-silent mode, monitor user input and player callback events. If a sliding event is detected, process the sliding event and update the index data of the H5 player.

[0062] The H5 player of the present invention can monitor user input events and player callback events at the same time. The embodiment of the present invention mainly monitors sliding events and exit events. If it is neither of the above two, the current event is discarded and handed over to other components for processing and continues to monitor. If a sliding event is detected, the sub-process of processing the sliding event and updating the index data is entered. If an exit event is monitored, the playback is terminated and the entire playback process is exited.

[0063] In an embodiment of the present invention, step S2 specifically includes the following sub-steps:

[0064] S21, monitor whether the user input and player callback events are sliding events or exit events. If not, discard the current event and hand it over to other components for processing and continue monitoring.

[0065] S22: If an exit event is detected, the playback is terminated and the entire playback process is exited.

[0066] S23. If a sliding event is detected, enter the sub-process of processing the sliding event and updating the index data of the H5 player.

[0067] Figure 2 The sub-flow chart for processing sliding events and updating index data of H5 player provided by the embodiment of the present invention is as follows: Figure 2 As shown, step S23 is specifically divided into the following steps:

[0068] S231. When a sliding event is received, an onSwiperChange(evt) event is triggered, and sliding event callback parameters are recorded;

[0069] S232, calculate the sliding direction, and call the updateSwiperItemsAndPlay function to update the H5 player index data;

[0070] Specifically, the difference diff between the currently selected swiperItem subcomponent index data.swiper_.sel and the swiperItem subcomponent index data.current currently stored in the custom data structure is calculated;

[0071] If diff = -1 or diff = 2, it is a downslide event in the cyclic case;

[0072] If diff=1 or diff=-2, it is a slide-up event in a loop.

[0073] If it is a slide down event, update the currently selected swiperItem subcomponent index according to the number of swiperItem subcomponents contained in the H5 player.

[0074] Since the H5 player contains three swiperItem subcomponents, the formula for updating the index of the currently selected swiperItem subcomponent is:

[0075] data.swiper_.sel_new=(data.swiper_.sel+1)%3

[0076] Among them, data.swiper_.sel and data.swiper_.sel_new are the indexes of the currently selected swiperItem subcomponent before and after the update respectively.

[0077] If it is a swipe up event, when the currently selected swiperItem subcomponent index data.swiper_.sel is 0, the currently selected swiperItem subcomponent index data.swiper_.sel is reset to 2, otherwise the currently selected swiperItem subcomponent index is subtracted by 1, that is: data.swiper_.sel-=1.

[0078] S233: Process the swipe up event and update the currently selected swiperItem subcomponent index and the currently playing video index.

[0079] After the swipe up event, the currently selected swiperItem subcomponent index is reduced by 1. If the currently playing video is the first episode, the currently playing video index data.swiper_.oriSelMap is set to the last episode; if not, the currently playing video index is subtracted by 1, that is, data.swiper_.oriSelMap-=1.

[0080] S234. Process the swipe down event and update the currently selected swiperItem subcomponent index and the currently playing video index.

[0081] After the slide down event, the index of the currently selected swiperItem subcomponent is increased by 1. If the currently playing video is the last episode, the currently playing video index data.swiper_.oriSelMap is set to 0; if not, the currently playing video index is incremented by 1, that is, data.swiper_.oriSelMap+=1.

[0082] S235, the processing ends, and the updated swiperItem subcomponent index currently selected and the currently playing video index are returned. The present invention creates an H5 player based on the swiper component containing three swiperItem subcomponents, such as Figure 3 The following is a schematic diagram showing the arrangement of subcomponents and the response to sliding events in the swiper component of the H5 player of the present invention, wherein (a) shows a schematic diagram for processing a sliding down event, (b) shows a schematic diagram for the initial state, and (c) shows a schematic diagram for processing an upward sliding event. By using three subcomponents as the minimum subset for circular sliding, the upward and downward sliding playback can be realized more smoothly, avoiding excessive subcomponents causing freezes.

[0083] The present invention records a sliding event callback parameter when receiving a sliding event, calculates the sliding direction according to the sliding event callback parameter, calls the updateSwiperItemsAndPlay function to update the H5 player index data, processes the sliding event or the sliding event according to the sliding direction, updates the currently selected swiperItem subcomponent index and the currently playing video index, and makes the sliding event response smoother, thereby realizing automatic playback of episodes based on up and down sliding in non-silent mode. While complying with the official WeChat policy, the present invention breaks through the limitation of H5's default silent playback and improves the smoothness of automatic video playback.

[0084] S3. Obtain the current video playback link according to the updated index data of the H5 player and automatically play the video. If the episode in which the current video is located has been played, the playback is ended; otherwise, the H5 player triggers a sliding event and continues to play the next video until the episode is played, destroys the swiper component and ends the playback.

[0085] After the sub-process of processing the sliding event and updating the index data in step S23 is completed, the video playing process is entered.

[0086] Get the play link data.episodes.url[eid] through the updated video index eid=data.swiper_.oriSelMap, and set it to the current swiperItem[data.swiper_.sel] to start playing.

[0087] After the playback is completed, check whether eid+1 is equal to the episode length data.episodes.url.length. If they are equal, it means that the episode of the current video has been played, destroy the swiper component and exit the current playback page. If they are not equal, the next episode should be played, the H5 player triggers a sliding event and returns to step S2 to continue playing the next episode until the episode is finished.

[0088] In the non-silent mode, the present invention monitors user input and player callback events, processes sliding events and updates the index data of the H5 player. According to the updated index data of the H5 player, the automatic playback function of the video in the non-silent mode is realized in the WeChat H5 environment to improve the user experience and meet the actual application needs.

[0089] The H5-based player of the present invention can be applied to multiple platforms and has stronger adaptability. The player is based on standard components and modules, and new interactive elements and rules can be easily added. It is easy to expand, maintain and update, and has good application prospects. Corresponding to the above method embodiment, the present invention also discloses a system for automatically playing videos in the WeChat H5 environment, and the system includes:

[0090] Initialization module: used to initialize the H5 player, which is a swiper component containing three swiperItem subcomponents, each of which contains a video component of an H5 page;

[0091] Event monitoring module: used to monitor user input and player callback events in non-silent mode. If a sliding event is detected, it processes the sliding event and updates the index data of the H5 player.

[0092] Video playback module: used to obtain the current video playback link and automatically play the video according to the updated H5 player index data. If the episode in which the current video is located has been played, the playback is ended; otherwise, the H5 player triggers a sliding event and continues to play the next video until the episode is played, destroys the swiper component and ends the playback.

[0093] The above system embodiments and method embodiments correspond one to one, and for a brief description of the system embodiments, please refer to the method embodiments.

[0094] The present invention also discloses an electronic device, comprising: at least one processor, at least one memory, a communication interface and a bus; wherein the processor, memory, and communication interface communicate with each other through the bus; the memory stores program instructions that can be executed by the processor, and the processor calls the program instructions to implement the aforementioned method of the present invention.

[0095] The present invention also discloses a computer-readable storage medium, wherein the computer-readable storage medium stores computer instructions, wherein the computer instructions enable the computer to implement all or part of the steps of the method described in the embodiment of the present invention. The storage medium includes: a USB flash drive, a mobile hard disk, a read-only memory ROM, a random access memory RAM, a magnetic disk or an optical disk, and other media that can store program codes.

[0096] The system embodiment described above is merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be distributed to multiple network units. A person skilled in the art may select some or all of the modules according to actual needs to achieve the purpose of the solution of this embodiment without creative effort.

[0097] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present invention should be included in the protection scope of the present invention.

Claims

1. A method for automatically playing videos in WeChat H5 environment, characterized in that: The method comprises: Initialize an H5 player, which is a swiper component containing three swiperItem subcomponents, each of which contains a video component of an H5 page; In non-silent mode, monitor user input and player callback events. If a sliding event is detected, process the sliding event and update the index data of the H5 player. Get the current video playback link according to the updated H5 player index data and automatically play the video. If the episode in which the current video is located has been played, end the playback; otherwise, the H5 player triggers a sliding event and continues to play the next video until the episode is played, destroys the swiper component and ends the playback.

2. The method for automatically playing videos in WeChat H5 environment according to claim 1, characterized in that: The initialization of the H5 player specifically includes: Customize a data structure data to store the status information of the H5 player; The status information of the H5 player includes the currently selected swiperItem subcomponent index, the currently playing video index and the episode play link set.

3. The method for automatically playing videos in WeChat H5 environment according to claim 2, characterized in that: The monitoring of user input and player callback events specifically includes: Monitor whether the user input and player callback events are sliding events or exit events. If not, discard the current event and let other components handle it and continue monitoring; If a sliding event is detected, the sub-process of processing the sliding event and updating the index data of the H5 player is entered; If an exit event is detected, the playback will be terminated and the entire playback process will be exited.

4. The method for automatically playing a video in a WeChat H5 environment according to claim 2, characterized in that: The processing of the sliding event and updating the index data of the H5 player specifically includes: When a sliding event is received, the onSwiperChange(evt) event is triggered and the sliding event callback parameters are recorded; Calculate the sliding direction and call the updateSwiperItemsAndPlay function to update the H5 player index data; Processes the swipe up event or swipe down event according to the swiping direction, updates the currently selected swiperItem subcomponent index and the currently playing video index, and returns the index data.

5. The method for automatically playing videos in WeChat H5 environment according to claim 4, characterized in that: The calculation of the sliding direction and calling the updateSwiperItemsAndPlay function to update the H5 player index data specifically includes: Calculate the difference between the currently selected swiperItem subcomponent index and the swiperItem subcomponent index currently stored in the custom data structure; If diff = -1 or diff = 2, it is a downslide event in the cyclic case; If diff=1 or diff=-2, it is a slide-up event in a loop; If it is a slide down event, update the currently selected swiperItem subcomponent index according to the number of swiperItem subcomponents contained in the H5 player; If it is a swipe up event, when the currently selected swiperItem subcomponent index is 0, reset the currently selected swiperItem subcomponent index to 2, otherwise perform a self-decrement operation on the currently selected swiperItem subcomponent index.

6. The method for automatically playing videos in WeChat H5 environment according to claim 5, characterized in that: The formula for updating the currently selected swiperItem subcomponent index according to the number of swiperItem subcomponents contained in the H5 player is: data.swiper_.sel_new=(data.swiper_.sel+1)%3 Among them, data.swiper_.sel and data.swiper_.sel_new are the indexes of the currently selected swiperItem subcomponent before and after the update respectively.

7. The method for automatically playing videos in WeChat H5 environment according to claim 4, characterized in that: The processing of the swipe up event or the swipe down event according to the swiping direction, updating the currently selected swiperItem subcomponent index and the currently played video index and returning the index data specifically includes: Handle the swipe-up event: after the swipe-up event, the index of the currently selected swiperItem subcomponent is reduced by 1. If the currently playing video is the first episode, the index of the currently playing video is set to the last episode; if not, the index of the currently playing video is decremented by 1. Handle the swipe down event: after the swipe down event, the index of the currently selected swiperItem subcomponent is increased by 1. If the currently playing video is the last episode, the index of the currently playing video is set to 0; if not, the index of the currently playing video is incremented by 1. Returns the updated index of the currently selected swiperItem subcomponent and the currently playing video index.

8. A system for automatically playing videos in WeChat H5 environment, characterized in that: The system comprises: Initialization module: used to initialize the H5 player, which is a swiper component containing three swiperItem subcomponents, each of which contains a video component of an H5 page; Event monitoring module: used to monitor user input and player callback events in non-silent mode. If a sliding event is detected, it processes the sliding event and updates the index data of the H5 player. Video playback module: used to obtain the current video playback link and automatically play the video according to the updated H5 player index data. If the episode in which the current video is located has been played, the playback is ended; otherwise, the H5 player triggers a sliding event and continues to play the next video until the episode is played, destroys the swiper component and ends the playback.

9. An electronic device, characterized in that: include: at least one processor, at least one memory, a communication interface, and a bus; Wherein, the processor, memory, and communication interface communicate with each other via the bus; The memory stores program instructions that can be executed by the processor, and the processor calls the program instructions to implement the method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer instructions, and the computer instructions enable a computer to implement the method according to any one of claims 1 to 7.

Images