Video playing method and related device

Abstract

The invention provides a video playing method and a related device. The embodiment of the invention can be applied to various scenes such as webpages and applets. The method comprises the steps that a first window switching instruction is received, and the first window switching instruction is used for instructing a video to be played in a picture-in-picture mode; obtaining first video playing information for performing video playing in the first window and a view tree corresponding to the applet page; searching a second view component and a second rendering component corresponding to the second window in the view tree; displaying a second window on the second interface based on the second view component and the second rendering component; and playing the video in the second window according to the first video playing information. According to the method provided by the embodiment of the invention, the second view component and the second rendering component corresponding to the second window are configured for the second window, and the second window is displayed based on the second view component and the second rendering component, so that the video can be played normally in the second window, and the continuity and the stability of video playing are improved.

Description

Technical Field

[0001] The present application relates to the field of rendering technology, and in particular to a video playback method and related devices. Background Art

[0002] With the development of internet technology, more and more users prefer to use "picture-in-picture" mode for video playback. This feature shrinks the video window and floats it over other applications or operating interfaces during video playback. This allows users to continue watching the video while using other applications or working, helping to improve their multitasking capabilities and efficiency.

[0003] Video mini-programs are lightweight programs developed on the mini-program platform for video playback and video management. The rendering method for video mini-programs follows the same rendering method for mini-programs, using same-layer rendering. Same-layer rendering places interface elements and interaction logic on the same layer to improve interface responsiveness and user experience. However, this same-layer rendering method often results in rendering anomalies, resulting in the inability of the picture-in-picture window to properly play the original video or display frames related to the original video. Summary of the Invention

[0004] An embodiment of the present application provides a video playback method and related devices, which solves the problem of abnormal rendering of the second window for implementing picture-in-picture in the prior art by configuring the second view component and the second rendering component corresponding to the second window for implementing picture-in-picture, and displaying a suspended second window based on the second view component and the second rendering component to continue playing the video in the second window.

[0005] One aspect of the present application provides a video playback method, comprising:

[0006] Receive a first window switching instruction, wherein the first window switching instruction is used to instruct to adjust the video playback through the first window to playback through the second window, the first window is the video playback window in the mini program page, and the second window is the window for video playback on the second interface;

[0007] Obtain the first video playback information for the video played in the first window, and obtain the view tree corresponding to the mini program page;

[0008] In the view tree, search for a second view component and a second rendering component corresponding to the second window, wherein the second view component and the second rendering component are nodes in the view tree, the second view component is used to display the second window, and the second rendering component is used to render the second window;

[0009] Based on the second view component and the second rendering component, displaying a second window on the second interface;

[0010] Play the video in the second window according to the first video playback information.

[0011] Another aspect of the present application provides a video playback device, comprising: a first window switching instruction receiving module, an information acquisition module, a second component search module, a second window display module, and a second window video playback module; specifically:

[0012] A first window switching instruction receiving module, configured to receive a first window switching instruction, wherein the first window switching instruction is used to instruct to adjust the video playback through the first window to playback through the second window, the first window being the video playback window in the mini-program page, and the second window being the window for video playback on the second interface;

[0013] A first information acquisition module is used to obtain first video playback information for video playback in the first window, and obtain a view tree corresponding to the mini program page;

[0014] A second component search module is configured to search the view tree for a second view component and a second rendering component corresponding to the second window, wherein the second view component and the second rendering component are nodes in the view tree, the second view component is configured to display the second window, and the second rendering component is configured to render the second window;

[0015] A second window display module, configured to display a second window on a second interface based on a second view component and a second rendering component;

[0016] The second window video playback module is used to play the video in the second window according to the first video playback information.

[0017] In another implementation of the embodiment of the present application, the video playback device further includes: a second component generation module; the second component generation module is further configured to:

[0018] Get the context information corresponding to the mini program page, where the context information is the information used to generate the mini program page.

[0019] Calling the view component constructor to generate a second view component according to the context information, wherein the type of the second view component is a floating window view type;

[0020] Add the second view component to the view tree;

[0021] Generate a second rendering component according to the second view component, wherein the second view component and the second rendering component have a corresponding relationship;

[0022] Add the second render component to the view tree.

[0023] In another implementation of the embodiment of the present application, the second component generation module is further configured to:

[0024] Creating a second rendering canvas, wherein the second rendering canvas is a memory area used to display and store drawing data corresponding to the second window, and the drawing data is used to generate the second window;

[0025] When the second rendering canvas is successfully created, obtaining a second rendering canvas instance object corresponding to the second rendering canvas, wherein the second rendering canvas instance object is generated according to the drawing data;

[0026] Construct a second rendering component according to the second rendering canvas instance object;

[0027] An association relationship between the second rendering canvas and the second rendering component is established.

[0028] In another implementation of the embodiment of the present application, the second component generation module is further configured to:

[0029] In the view tree, search for a first rendering component corresponding to the first window, wherein the first rendering component is a node in the view tree, and the first rendering component is used to render the first window;

[0030] According to the first rendering component, obtain a first rendering canvas instance object corresponding to the first rendering component;

[0031] The first rendering canvas instance object is replaced with the second rendering canvas instance object to construct a second rendering component.

[0032] In another implementation of the embodiment of the present application, the second component generation module is further configured to:

[0033] Constructing an event acquisition component corresponding to the second rendering canvas, wherein the event acquisition component is used to acquire an event indicating that the second rendering canvas is successfully created;

[0034] An association relationship is established between the second view component and the event acquisition component corresponding to the second rendering canvas.

[0035] In another implementation of the embodiment of the present application, the video playback device further includes: a first component state setting module; the first component state setting module is configured to:

[0036] In the view tree, search for a first view component and a first rendering component corresponding to the first window, wherein the first view component and the first rendering component are nodes in the view tree, the first view component is used to display the first window, and the first rendering component is used to render the first window;

[0037] The state of the first view component is set to an invisible state, and the state of the first rendering component is set to an invisible state.

[0038] In another implementation of the embodiment of the present application, the second window display module is further configured to:

[0039] Determining size information of the first view component based on the first view component, and determining size information of the first rendering component based on the first rendering component;

[0040] Adjusting the size information of the second view component and the size information of the second rendering component according to the size information of the first view component and the size information of the first rendering component;

[0041] Determining a ratio value between the second window and the second interface according to the adjusted size information of the second view component and the adjusted size information of the second rendering component;

[0042] The second window is displayed on the second interface according to the ratio between the second window and the second interface.

[0043] In another implementation of the embodiment of the present application, the first window switching instruction receiving module is further configured to:

[0044] Obtaining status information corresponding to the mini program's page, where the status information is used to indicate the mini program's page visibility status;

[0045] When the visibility information indicates that the page of the mini program is changed from a visible state to an invisible state, it is considered that the first window switching instruction is received.

[0046] In another implementation of the embodiment of the present application, the video playback device further includes: a second window switching instruction receiving module, a second information acquisition module, a first component search module, a first window display module, and a first window video playback module; specifically:

[0047] a second window switching instruction receiving module, configured to receive a second window switching instruction, wherein the second window switching instruction is used to instruct to adjust the video playback through the second window to playback through the first window;

[0048] A second information acquisition module is used to obtain the second video playback information played in the second window, and obtain the view tree corresponding to the mini program page;

[0049] A first component search module is configured to search the view tree for a first view component and a first rendering component corresponding to the first window, wherein the first view component and the first rendering component are nodes in the view tree, the first view component is configured to display the first window, and the first rendering component is configured to render the first window;

[0050] A first window display module, configured to display a first window on the mini-program page based on the first view component and the first rendering component;

[0051] The first window video playback module is used to play the video in the first window according to the second video playback information.

[0052] In another implementation of the embodiment of the present application, the first component search module is further used to set the state of the second view component to an invisible state, and to set the state of the second rendering component to an invisible state.

[0053] In another implementation of the embodiment of the present application, the second window switching instruction receiving module is further configured to:

[0054] Obtaining status information corresponding to the mini program's page, where the status information is used to indicate the mini program's page visibility status;

[0055] When the visibility information indicates that the page of the mini program has changed from an invisible state to a visible state, it is considered that the second window switching instruction has been received.

[0056] In another implementation of the embodiment of the present application, the video playback device further includes a rendering component switching module, which is configured to:

[0057] Obtaining first playback information corresponding to the video, wherein the first playback information is used to indicate that the video is played in a first window;

[0058] Rendering the video using a first rendering component to obtain a first rendered video;

[0059] The first rendered video is played through the first rendering canvas.

[0060] In another implementation of the embodiment of the present application, the rendering component switching module is further configured to:

[0061] Obtaining second playback information corresponding to the video, wherein the second playback information is used to indicate that the video is played in the second window;

[0062] Rendering the video using a second rendering component to obtain a second rendered video;

[0063] The second rendered video is played through the second rendering canvas.

[0064] Another aspect of the present application provides a computer device, comprising:

[0065] memories, transceivers, processors, and bus systems;

[0066] Wherein, the memory is used to store programs;

[0067] The processor is used to execute the program in the memory, including executing the above-mentioned methods;

[0068] The bus system is used to connect the memory and the processor so that the memory and the processor can communicate with each other.

[0069] Another aspect of the present application provides a computer-readable storage medium, wherein instructions are stored in the computer-readable storage medium. When the computer-readable storage medium is run on a computer, the computer is enabled to execute the above-mentioned methods.

[0070] Another aspect of the present application provides a computer program product or computer program, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device performs the methods provided by the above aspects.

[0071] It can be seen from the above technical solutions that the embodiments of the present application have the following advantages:

[0072] The present application provides a video playback method and related devices, which include: first, receiving a first window switching instruction, wherein the first window switching instruction is used to instruct to adjust the video playback through the first window to playback through the second window, the first window is the video playback window in the mini-program page, and the second window is the window for video playback on the second interface; secondly, obtaining the first video playback information for video playback in the first window, and obtaining the view tree corresponding to the mini-program page; then, in the view tree, searching for the second view component and the second rendering component corresponding to the second window, wherein the second view component and the second rendering component are nodes in the view tree, the second view component is used to display the second window, and the second rendering component is used to render the second window; then, based on the second view component and the second rendering component, the second window is displayed on the second interface; finally, according to the first video playback information, the video is played in the second window. The method provided in an embodiment of the present application, when receiving an instruction to play a video in picture-in-picture mode, switches the video originally played in the first window in the mini-program page to a suspended second window for continued playback. In order to render the second window normally under the same-layer rendering method, the second window is configured with its corresponding second view component and second rendering component, and the suspended second window is displayed based on the second view component and the second rendering component, so that the video can continue to be played normally in the second window, thereby solving the rendering abnormality problem under the same-layer rendering method and improving the continuity and stability of video playback. BRIEF DESCRIPTION OF THE DRAWINGS

[0073] Figure 1A schematic diagram of normal video playback in the mini-program interface provided by related technologies;

[0074] Figure 2 A schematic diagram of video rendering anomalies in picture-in-picture mode provided for related technologies;

[0075] Figure 3 A flowchart of the picture-in-picture mode implementation process provided for related technologies;

[0076] Figure 4 This is a schematic diagram showing normal video rendering in picture-in-picture mode according to an embodiment of the present application;

[0077] Figure 5 A schematic diagram of the architecture of a video playback system provided in one embodiment of the present application;

[0078] Figure 6 A flowchart of a video playback method provided in one embodiment of the present application;

[0079] Figure 7 A flowchart of a video playback method provided in another embodiment of the present application;

[0080] Figure 8 A flowchart of a video playback method provided in another embodiment of the present application;

[0081] Figure 9 A flowchart of a video playback method provided in another embodiment of the present application;

[0082] Figure 10 A flowchart of a video playback method provided in another embodiment of the present application;

[0083] Figure 11 A flowchart of a video playback method provided in another embodiment of the present application;

[0084] Figure 12 A flowchart of a video playback method provided in another embodiment of the present application;

[0085] Figure 13 A flowchart of a video playback method provided in another embodiment of the present application;

[0086] Figure 14 A system architecture diagram of a video playback method provided in one embodiment of the present application;

[0087] Figure 15 A flowchart of video playback for the first window switching provided in an embodiment of the present application;

[0088] Figure 16 A schematic diagram of a video component replacement process provided in one embodiment of the present application;

[0089] Figure 17 A schematic diagram of a replacement process of a rendering component provided in one embodiment of the present application;

[0090] Figure 18 A flowchart of a video playback method provided in another embodiment of the present application;

[0091] Figure 19 A schematic diagram of picture-in-picture mode restoration provided in one embodiment of the present application;

[0092] Figure 20 A flowchart of a video playback method provided in another embodiment of the present application;

[0093] Figure 21 A flowchart of a video playback method provided in another embodiment of the present application;

[0094] Figure 22 A schematic diagram of the process of switching rendering components provided in one embodiment of the present application;

[0095] Figure 23 A schematic diagram of the structure of a video playback device provided in one embodiment of the present application;

[0096] Figure 24 A schematic diagram of the server structure provided for an embodiment of the present application. DETAILED DESCRIPTION

[0097] An embodiment of the present application provides a video playback method, which configures a second view component and a second rendering component corresponding to a second window for implementing picture-in-picture, and displays a suspended second window based on the second view component and the second rendering component to continue playing the video in the second window. This solves the problem of abnormal rendering of the second window for implementing picture-in-picture in the prior art, and improves the continuity and stability of video playback.

[0098] The terms "first", "second", "third", "fourth", etc. (if any) in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequential order. It should be understood that the numbers used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can, for example, be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "corresponding to" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0099] In the embodiments of the present application, the term "module" or "unit" refers to a computer program or a part of a computer program that has a predetermined function and works together with other related parts to achieve a predetermined goal, and can be implemented in whole or in part by using software, hardware (such as processing circuits or memories) or a combination thereof. Similarly, a processor (or multiple processors or memories) can be used to implement one or more modules or units. In addition, each module or unit can be part of an overall module or unit that includes the function of the module or unit.

[0100] With the development of internet technology, more and more users are preferring mini-programs instead of apps. Compared to playing videos within video apps (APPs), playing videos through video mini-programs does not require users to download and install apps. They can be used directly on platforms that support mini-programs, saving users' mobile phone storage space. Mini-programs also launch quickly, allowing users to quickly open and watch videos without having to wait for the app to load. Mini-programs can also be shared and disseminated through social platforms, making it easier for users to recommend and share video content. As a result, more and more users are choosing to watch videos within mini-programs.

[0101] Most mini-program content is rendered in a WebView. Non-native components reside in the WebView layer, while native components, cover-view, and cover-image reside in a higher layer. Because native components reside in a higher layer, they aren't controlled by the z-index property and can't overlap with built-in components like view and image. Furthermore, to allow native components to be nested within containers like swipers and scroll-views, the "same-layer rendering" technique is typically used when rendering the mini-program interface.

[0102] Same-layer rendering refers to rendering native components directly onto the WebView layer through certain technical means. At this point, the "native component layer" no longer exists, and the native components are now directly mounted on the WebView node. After same-layer rendering, native components can be used just like non-native components, such as overlaying them with views and images, specifying their hierarchy using z-index, placing them within containers like scroll-view, swiper, and movable-view, and setting their styles through WXSS.

[0103] In video players, small window mode allows you to play videos in a small window on the screen. Using small window mode allows you to play videos while performing other tasks, such as browsing the web or editing documents, without closing the video player.

[0104] However, for video applets, such as Figure 1 As shown, the video can be played normally in the mini program interface, but when the user chooses to use the "small window mode" (i.e. picture-in-picture mode) to play the video, the use of the same layer rendering will cause the following Figure 2 The rendering problem shown is abnormal.

[0105] See also Figure 3 , Figure 3 This is the implementation process of the picture-in-picture mode of the video app in the related technology:

[0106] 1. During video playback, switch to picture-in-picture playback mode;

[0107] 2. The video component is stripped from the current page;

[0108] 3. Enter the picture-in-picture playback page, add the original video component to the new playback page, and adapt it to the new playback page size;

[0109] 4. Resume player playback and video streaming data, and enter picture-in-picture playback mode.

[0110] In the related technology, when using the same-layer rendering view component (webview, other same-layer components also have the same problem) in the mini program, the video rendering in the picture-in-picture mode will be abnormal; the problem is that the video playback page is not fully displayed, and only part of the screen of the same-layer component is displayed, resulting in abnormal video display, such as Figure 2 shown.

[0111] To this end, an embodiment of the present application provides a video playback method, which solves the problem of video display abnormality caused by video rendering abnormality in the related art under the premise of using same-layer rendering, and improves the continuity and stability of video playback. Specifically, first, a first window switching instruction is received, wherein the first window switching instruction is used to indicate that the video playback through the first window is adjusted to be played through the second window, the first window is the video playback window in the mini-program page, and the second window is the window for video playback on the second interface; secondly, the first video playback information for video playback in the first window is obtained, and the view tree corresponding to the mini-program page is obtained; then, in the view tree, the second view component and the second rendering component corresponding to the second window are searched, wherein the second view component and the second rendering component are nodes in the view tree, the second view component is used to display the second window, and the second rendering component is used to render the second window; then, based on the second view component and the second rendering component, the second window is displayed on the second interface; finally, according to the first video playback information, the video is played in the second window.

[0112] The method provided in the embodiment of the present application, when receiving an instruction to play a video in picture-in-picture mode, switches the video originally played in the first window of the mini program page to the suspended second window for continued playback. In order to render the second window normally in the same layer rendering mode, the second window is configured with its corresponding second view component and second rendering component, and the suspended second window is displayed based on the second view component and the second rendering component, so that the video can be resumed normally in the second window, such as Figure 4 As shown, the rendering exception problem under the same-layer rendering mode is solved, and the continuity and stability of video playback are improved.

[0113] For easier understanding, see Figure 5 , Figure 5 FIG. 1 is an application environment diagram of the video playback method in the embodiment of the present application, such as Figure 5 As shown, the video playback method in the embodiment of the present application is applied to a video playback system. The video playback system includes: a server and a terminal device; wherein the server can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content delivery networks (Content Delivery Network, CDN), and big data and artificial intelligence platforms. The terminal can be a smart phone, tablet computer, laptop computer, desktop computer, smart speaker, smart watch, etc., but is not limited to this. The terminal and the server can be directly or indirectly connected by wired or wireless communication, and the embodiment of the present application is not limited here.

[0114] The server first receives a first window switching instruction, wherein the first window switching instruction is used to instruct the video to be adjusted from being played through the first window to being played through the second window, the first window being the video playback window in the mini-program page, and the second window being the window for video playback on the second interface; secondly, the server obtains the first video playback information for the video playback in the first window, and obtains the view tree corresponding to the mini-program page; then, the server searches for the second view component and the second rendering component corresponding to the second window in the view tree, wherein the second view component and the second rendering component are nodes in the view tree, the second view component is used to display the second window, and the second rendering component is used to render the second window; then, the server displays the second window on the second interface based on the second view component and the second rendering component; finally, the server plays the video in the second window according to the first video playback information.

[0115] The following describes the video playback method in this application from the perspective of the server. Figure 6The video playback method provided in the embodiment of the present application includes: Step S110 to Step S150. Specifically:

[0116] S110: Receive a first window switching instruction.

[0117] Among them, the first window switching instruction is used to instruct to adjust the video playback through the first window to playback through the second window. The first window is the video playback window in the mini program page, and the second window is the window for video playback on the second interface.

[0118] It is understandable that the video playback window in the mini-program page refers to the window for video playback in the mini-program page, and the window can be presented in the form of a mini-program component, that is, the window is located in a fixed position in the mini-program page, and the user cannot move the position. The second interface refers to an interface other than the mini-program interface currently playing the video. For example, the second interface can be the interface of other video mini-programs, or the interface of other mini-programs, or the interface of other applications (APP), or the desktop of a terminal device. The second window can be a floating window for video playback on the second interface. The floating window refers to a window that can perform custom operations such as window position change and / or window size change and / or window shape change. The first window and the second window are both windows for user video playback.

[0119] like Figure 1 As shown, when the user plays a video in a video mini-program, the user can click the "Small Window Mode" control in the mini-program page to play the video currently playing in the mini-program page in "Picture-in-Picture" mode, that is, on any interface, the video can be continued through the video window. Normally, the video window in picture-in-picture mode will be displayed in the lower right corner of the interface. Optionally, the user can drag the video window to adjust the relative position of the video window with respect to the interface.

[0120] When a user clicks a video playback control in a video mini-program on a terminal device, the terminal device responds to the user's click and generates a video playback instruction to the server. After receiving the video playback instruction, the server generates a video playback tag corresponding to the mini-program and activates the mini-program's video playback logic, playing the video in the first video playback window of the mini-program.

[0121] When a video is played in a video mini-program, the video playback tag corresponding to the mini-program page indicates that the video is in the playback state, and the corresponding state of the mini-program page is the visibility state. When the user clicks the "small window mode" control in the mini-program page through the terminal device, the terminal device responds to the user's click operation, generates a first window switching instruction, and sends the generated first window switching instruction to the server. The first window switching instruction is used to instruct the video to be played through the first window of the video playback in the mini-program page to be adjusted to play through the second window suspended on the second interface.

[0122] When the server receives the first window switching instruction sent by the terminal device, the video playback tag still indicates that the video is in the playback state, but the corresponding state of the mini program page will change to invisible, which triggers the playback logic of switching the video picture-in-picture.

[0123] S120: Obtain first video playback information for video playback in the first window, and obtain a view tree corresponding to the mini-program page.

[0124] It can be understood that the first video playback information of the video played in the first window is obtained, and the first video playback information includes the progress of the video playback and the playback setting information of the video. Through the video playback progress, the video can be continued when it is switched from the first window to the second window for playback, without the user manually adjusting the progress of the video. Through the playback setting information, the user's original setting information can be maintained when the video is switched from the first window to the second window for playback. For example, the playback setting information includes: playback speed (speed value), barrage setting information (whether to turn on the barrage, the screen ratio of the barrage, the transparency of the barrage font, etc.), viewing preference information, etc.

[0125] The view tree of a mini-program page is the visual structure of the mini-program page. It contains all components, layout, and style information for the mini-program page. The view tree records each component in the mini-program, its corresponding position and size, the mini-program's application style, and the layout information of the mini-program page.

[0126] The process of obtaining the view tree corresponding to the mini program page is: through the identification information corresponding to the mini program, use the findViewById function to find the content root view of the mini program page, and then extract the view tree from the content root view.

[0127] S130. Search the view tree for the second view component and the second rendering component corresponding to the second window.

[0128] Among them, the second view component and the second rendering component are nodes in the view tree, the second view component is used to display the second window, and the second rendering component is used to render the second window.

[0129] It is understandable that the components of the mini program exist in the form of nodes in the view tree. By traversing all the nodes in the view tree, the node whose node type is SurfaceView is found to be the second view component. The view component of type SurfaceView is a component used to display custom graphic content. It provides a surface on which graphics can be drawn directly on the screen. Based on the correspondence between the second view component and the second rendering component, after the second view component is determined, the second rendering component can be found from the view tree according to the correspondence between the second view component and the second rendering component. The second view component is used to display the second window, and the second rendering component is used to render the second window.

[0130] S140: Display a second window on the second interface based on the second view component and the second rendering component.

[0131] It is understood that the playback ratio of the second window to the second interface is determined based on the size information of the second viewing component and the size information of the second rendering component, thereby achieving the display of the second window on the second interface. The second window can appear as a floating window above other applications or interfaces, so that the user can watch the video while using other applications.

[0132] S150: Play the video in the second window according to the first video playback information.

[0133] It is understandable that, according to the first video playback information, the video is continued in the second window, ensuring the continuity of the video playback, and the user can continue to watch the video seamlessly in the second window.

[0134] The method provided in the embodiment of the present application, by receiving the first window switching instruction, enables the user to conveniently switch the video from the first window to the second window for playback, provides a video playback function in picture-in-picture mode, and improves the flexibility of video playback and user experience; by finding and configuring the second view component and the second rendering component corresponding to the second window, it ensures that the video can be rendered normally in the second window, avoids the problem that the small picture-in-picture window cannot normally play the original video or display the picture frames related to the original video, and solves the rendering abnormality problem under the same-layer rendering mode; according to the first video playback information, the video continues to be played in the second window, so that the video playback can maintain continuity during the window switching process, will not interrupt the user's viewing experience, improves the continuity and stability of video playback, and brings a better video viewing experience to users.

[0135] In this application Figure 6 In an optional embodiment of the video playback method provided in the corresponding embodiment, please refer to Figure 7 The video playback method further includes steps S210 to S250. Specifically:

[0136] S210: Obtain context information corresponding to the mini program page.

[0137] The context information is the information used to generate the mini program page.

[0138] It is understood that the context information corresponding to the mini program page refers to information related to the mini program page, including but not limited to the page URL, parameters, status, etc. By obtaining the page context information, the specific situation of the current mini program page can be understood, providing the necessary data for the subsequent generation of the second view component.

[0139] S220. Call the view component constructor to generate a second view component according to the context information.

[0140] Among them, the type of the second view component is a floating window view type.

[0141] It can be understood that, based on the acquired page context information, the corresponding view component constructor is called to create a second view component of a floating window view type (SurfaceView type).

[0142] S230. Add the second view component to the view tree.

[0143] It is understandable that the generated second view component will be added to the view tree to ensure that it is correctly managed and displayed in the interface structure of the applet.

[0144] S240: Generate a second rendering component according to the second view component.

[0145] Among them, the second view component and the second rendering component have a corresponding relationship.

[0146] It can be understood that the second rendering component is the rendering component corresponding to the second view component and is used to present the content of the second view component on the interface. View components and rendering components have a one-to-one correspondence, and each view component corresponds to a unique rendering component. The process of generating the second rendering component involves performing corresponding rendering processing based on the properties and style of the second view component.

[0147] S250: Add the second rendering component to the view tree.

[0148] It is understandable that the generated second rendering component is added to the view tree so as to display the content of the second window on the second interface.

[0149] Through the above steps, we have achieved the process of obtaining the context information of the mini-program page, generating the second view component and the second rendering component, and adding them to the view tree. This process ensures the correct display of the floating window and its coordination with the mini-program page.

[0150] The method provided in the embodiment of the present application can display specific content related to the mini-program page in a floating window by generating a second view component and a second rendering component, thereby increasing the diversity and interactivity of the interface and providing a more flexible interface display method; users can conveniently access relevant information or perform other operations through the floating window without leaving the current mini-program page, thereby improving user convenience and satisfaction and enhancing user experience; the method provided in the embodiment of the present application enables the mini-program to manage and display multiple windows at the same time, improves the multi-tasking processing capability and efficiency of the application, and enhances the multi-window processing capability of the mini-program.

[0151] In this application Figure 7 In an optional embodiment of the video playback method provided in the corresponding embodiment, please refer to Figure 8 , step S240 further includes sub-steps S241 to S244. Specifically:

[0152] S241: Create a second rendering canvas.

[0153] The second rendering canvas is a memory area used to display and store drawing data corresponding to the second window, and the drawing data is used to generate the second window.

[0154] As you can understand, the second rendering canvas is a memory area used to display and store the drawing data corresponding to the second window. It is a container for drawing and rendering graphics in the second window. The purpose of creating the second rendering canvas is to provide a dedicated area for storing and processing the drawing data of the second window. By drawing the graphics content of the second window onto the second rendering canvas, the second window can be independently displayed and rendered.

[0155] S242: When the second rendering canvas is successfully created, obtain a second rendering canvas instance object corresponding to the second rendering canvas.

[0156] The second rendering canvas instance object is generated according to the drawing data.

[0157] It's understood that the second rendering canvas instance object is generated based on the drawing data. It is a specific implementation and representation of the second rendering canvas, containing its properties, methods, and operation interface. The purpose of obtaining the second rendering canvas instance object is to use it to further operate and control the second rendering canvas, such as drawing on the second rendering canvas, updating graphical content, and handling user interactions.

[0158] S243: Construct a second rendering component according to the second rendering canvas instance object.

[0159] It's understood that the second rendering component is created based on the second rendering canvas instance object. It's a component used to display and render graphical content in the second window. By constructing the second rendering component based on the second rendering canvas instance object, the functionality and features of the second rendering canvas can be combined with the specific component implementation to display and interact with graphical content in the second window.

[0160] S244: Establish an association relationship between the second rendering canvas and the second rendering component.

[0161] It can be understood that establishing an association between the second rendering canvas and the second rendering component is intended to combine the drawing and rendering functions of the second rendering canvas with the display and interaction functions of the second rendering component. This association ensures that the second rendering component can correctly obtain and use the drawing data on the second rendering canvas to display the corresponding graphical content in the second window. Furthermore, this association also enables interaction and event transmission between the second window and the second rendering component.

[0162] The above steps complete the process of creating a second rendering canvas, obtaining a second rendering canvas instance object, constructing a second rendering component, and establishing an association between them. This process ensures that the second window can correctly display and render its associated graphical content, providing an interface for display and interaction.

[0163] The method provided in the embodiment of the present application provides an independent rendering area for the second window by creating a second rendering canvas, so that the content of the second window can be distinguished from other parts of the mini-program page, and independent drawing and display can be achieved. The second rendering canvas can utilize graphics hardware acceleration technology to improve the efficiency and performance of graphics rendering, so that the graphics content in the second window can be displayed in a smoother manner; constructing a second rendering component based on the second rendering canvas instance object makes it possible to customize the display and interaction methods of the second window according to specific needs, providing greater flexibility and scalability; establishing an association relationship between the second rendering canvas and the second rendering component ensures that the drawing and rendering of the second window are closely coordinated with the display and interaction of the component, maintaining the consistency and maintainability of the interface; through the above steps, an independent, efficient and flexible second window interface can be provided to users, improving the user experience and operation efficiency in the mini-program.

[0164] In this application Figure 8 In an optional embodiment of the video playback method provided in the corresponding embodiment, please refer to Figure 9 , step S243 further includes sub-steps S2431 to S24333. Specifically:

[0165] S2431. In the view tree, search for the first rendering component corresponding to the first window.

[0166] The first rendering component is a node in the view tree, and the first rendering component is used to render the first window.

[0167] It can be understood that the view tree is a tree representation of the mini-program interface structure, which contains the nodes corresponding to each window and component and the hierarchical relationship between them. By traversing the view tree, the first rendering component associated with the first window is searched, and the type of the first rendering component is webview type. The WebView type view component is a component used to display the content of the mini-program page. It is based on the WebKit engine and can be embedded in the mini-program page in the application.

[0168] S2432. According to the first rendering component, obtain a first rendering canvas instance object corresponding to the first rendering component.

[0169] It is understood that the first rendering component is a node in the view tree, which is responsible for rendering the content of the first window. By obtaining the first rendering canvas instance object corresponding to the first rendering component, the properties and methods of the rendering canvas related to the first window can be accessed and operated.

[0170] S2433: Replace the first rendering canvas instance object with the second rendering canvas instance object to construct a second rendering component.

[0171] It can be understood that replacing the first rendering canvas instance object used in the first rendering component with the second rendering canvas instance object means that the second rendering component will use the second rendering canvas instance object for rendering, thereby separating the rendering of the second window from the rendering of the first window.

[0172] The method provided in the embodiment of the present application can ensure that the rendering and interaction of each window are performed independently without interfering with each other, thereby achieving independence between windows; by associating the second rendering component with the second rendering canvas instance object, the performance advantages of the second rendering canvas can be utilized to improve the rendering efficiency and smoothness of the second window; the independent rendering component and rendering canvas instance object make the maintenance and expansion of the window easier; through the independent rendering component and rendering canvas instance object, a better window interaction experience can be provided to the user, and each window can perform independent animation effects, transition effects, etc. as needed, thereby improving the smoothness and visual effects of the user interface.

[0173] In this application Figure 7 In an optional embodiment of the video playback method provided in the corresponding embodiment, please refer to Figure 10 , after step S220, further steps S221 to S222 are included. Specifically:

[0174] S221: Construct an event acquisition component corresponding to the second rendering canvas.

[0175] The event acquisition component is used to acquire the event of successful creation of the second rendering canvas.

[0176] It's understandable that a component is created specifically to receive the second rendering canvas successfully created event. This event acquisition component is a functional component whose primary responsibility is to receive a specific event (the event indicating the second rendering canvas successfully created). When the second rendering canvas is successfully created, a corresponding event is triggered. By constructing this event acquisition component, you can define the appropriate event handling logic within it to perform the appropriate actions when the second rendering canvas is successfully created.

[0177] S222: Establish an association relationship between the second view component and the event acquisition component corresponding to the second rendering canvas.

[0178] It will be appreciated that an association is established between the second view component and the created event acquisition component. This association is established to ensure that when the second rendering canvas is successfully created, the event acquisition component can promptly obtain the event and pass the event to the second view component. By establishing this association, the second view component can respond to the event of the successful creation of the second rendering canvas and perform corresponding interface updates, data processing, or other operations as needed.

[0179] The method provided in the embodiment of the present application, by creating an event acquisition component and establishing an association relationship, can ensure that the second view component can promptly obtain the event of the successful creation of the second rendering canvas, so that it can quickly respond and perform corresponding processing; when the second rendering canvas is successfully created, the second view component can update the interface based on the event information transmitted by the event acquisition component to display the latest rendering content; the creation of the event acquisition component provides a flexible way to handle the creation event of the second rendering canvas. Custom event processing logic can be defined in the event acquisition component according to specific needs to meet different business needs; separating the second view component from the event acquisition component makes them more functionally independent and reusable.

[0180] In this application Figure 5 In an optional embodiment of the video playback method provided in the corresponding embodiment, please refer to Figure 11 , after step S130, further steps S131 to S132 are included. Specifically:

[0181] S131. Search the view tree for the first view component and the first rendering component corresponding to the first window.

[0182] Among them, the first view component and the first rendering component are nodes in the view tree, the first view component is used to display the first window, and the first rendering component is used to render the first window.

[0183] It is understandable that, by traversing, the first rendering component associated with the first window is searched in the view tree, and the type of the first rendering component is the webview type. Based on the correspondence between the first view component and the first rendering component, after the first view component is determined, the first rendering component can be found in the view tree according to the correspondence between the first view component and the first rendering component.

[0184] S132. Set the state of the first view component to an invisible state, and set the state of the first rendering component to an invisible state.

[0185] It is understandable that switching the video to be played by the second window requires hiding the first view component and the first rendering component corresponding to the first window, that is, setting the state of the first view component to an invisible state, and setting the state of the first rendering component to an invisible state. By setting the state of these components to invisible, the first window will no longer be displayed to the user, and the related rendering operations will also stop. Setting the first view component to an invisible state means that the user will not be able to see the content of the first window, which can avoid confusion when multiple windows are displayed at the same time. Setting the first rendering component to an invisible state can stop the graphics rendering and drawing operations related to the first window, freeing up system resources.

[0186] The method provided in the embodiment of the present application allows the user to pay more clear attention to the second window that is currently being displayed by hiding the first window, avoiding the confusion and confusion caused by the simultaneous display of multiple windows; stopping the rendering operation of the first window can free up system resources, improve the overall performance and responsiveness of the mini program, and help to achieve more refined control over the visibility and status of the mini program interface, making interface management more flexible and efficient.

[0187] In this application Figure 11 In an optional embodiment of the video playback method provided in the corresponding embodiment, please refer to Figure 12 , step S140 further includes sub-steps S141 to S144. Specifically:

[0188] S141. Determine size information of the first view component based on the first view component, and determine size information of the first rendering component based on the first rendering component.

[0189] It can be understood that the size information of the view component and the rendering component in the first window is obtained. The size information of the first view component represents the size of the visible area of the first window, including width and height; the size information of the first rendering component represents the size of the area used to render graphic content in the first window, also including width and height.

[0190] S142: Adjust the size information of the second view component and the size information of the second rendering component according to the size information of the first view component and the size information of the first rendering component.

[0191] It is understandable that the size of the view component and rendering component of the second window is dynamically adjusted based on the size information of the first window. By analyzing the size of the first window, the user's desired interface layout and content display method in the first window can be understood. Based on this information, the size of the view component and rendering component of the second window can be adjusted accordingly to adapt to different screen sizes, device orientations, or user preferences. Preferably, the size information of the second view component and the size information of the second rendering component are adjusted to meet the following conditions: size information of the first view component / size information of the first rendering component = size information of the second view component / size information of the second rendering component.

[0192] S143: Determine a ratio between the second window and the second interface according to the adjusted size information of the second view component and the adjusted size information of the second rendering component.

[0193] It can be understood that the proportional relationship between the second window and the second interface is calculated to ensure that the layout and proportion of the interface elements in the second window remain consistent or as expected. By comparing the size information of the adjusted second view component and the second rendering component, the scaling ratio of the second window relative to the second interface can be determined. This proportional value will be used for layout and positioning on the second interface to maintain the consistency and visibility of the interface.

[0194] S144: Display the second window on the second interface according to the ratio between the second window and the second interface.

[0195] It can be understood that the second window is displayed on the second interface according to the determined ratio value. According to the ratio value, the position, size and layout of the second window on the second interface can be calculated, and the second window is displayed on the second interface according to the calculated parameters, so that the user can view and interact with related content in the second window.

[0196] The method provided in the embodiment of the present application can achieve adaptive layout under different screen sizes or device orientations by adjusting the size of the second window according to the size information of the first window. This enables the mini program to display content in the best way on different devices, providing a better user experience; determining the ratio value of the second window to the second interface helps to maintain the consistency of the layout and proportion of the interface elements in the second window. Regardless of the operation or adjustment performed by the user in the first window, the interface layout in the second window will remain relatively stable, reducing the user's confusion and discomfort; through automated size adjustment and ratio calculation, the developer's duplication of work when dealing with different screen sizes and device orientations is reduced. This improves development efficiency and makes it easier to maintain and update the interface layout.

[0197] In this application Figure 6In an optional embodiment of the video playback method provided in the corresponding embodiment, please refer to Figure 13 , step S110 further includes sub-steps S111 to S112. Specifically:

[0198] S111. Obtain status information corresponding to the mini program page.

[0199] The status information is used to indicate the page visibility status of the mini program.

[0200] It is understood that the visibility status information of the page can be obtained through the page lifecycle events or interfaces of the mini program. The visibility status can include whether the page is visible or invisible.

[0201] S112: When the visibility information indicates that the page of the mini program has changed from a visible state to an invisible state, it is deemed that the first window switching instruction has been received.

[0202] It is understandable that whether the first window switching instruction has been received is determined based on the change in the page visibility state. When the page changes from a visible state to an invisible state, it can be assumed that the user may have switched to another window or page, and thus this can be regarded as a triggering condition for the first window switching instruction. This helps to respond to the window switching event in a timely manner and perform corresponding processing, such as pausing certain operations, releasing resources, or executing other logic related to window switching.

[0203] The method provided in the embodiment of the present application can respond accordingly to the user's operation by timely sensing the changes in the visibility state of the mini-program page, providing a smoother and more natural user experience. When the mini-program page becomes invisible, related resources can be released or certain unnecessary operations can be suspended to save system resources and improve performance. Triggering the first window switching instruction based on the change in the page visibility state helps to maintain the consistency and predictability of interface interaction.

[0204] For ease of understanding, the present application embodiment provides a video playback method for adjusting the picture-in-picture mode of a video app. Figure 14 , Figure 14This is a system architecture diagram for implementing the video playback method provided in the embodiment of the present application. The video playback system architecture includes basic components, logic components, view components and rendering components. Among them, the basic components are also called video components, and the basic components include players. The players are responsible for acquiring and managing video streams, and completing operations such as caching, playing, pausing, and terminating video streams. The logic components include rendering management components, playback management components, and page status acquisition components; among them, the rendering management component is responsible for implementing the switching logic of the rendering component (when the video playback is switched from the first window to the second window, the first rendering component that renders the first window is switched to the second rendering component that renders the second window), caching the rendering state, and managing the life cycle of the rendering component; the playback management component is responsible for player state management and video stream data cache reuse during view switching; the page status acquisition component allows users to obtain the life cycle changes of the mini program page (the corresponding state of the mini program page is changed from the visible state to the non-visible state), and notifies the mini program page state change when the mini program page undergoes a life cycle change. The view component is used to display the window. The view component is the carrier of the rendering component. The view component is added to the view tree corresponding to the mini-program page in the form of a view node, and the position, width, height, etc. of the view component are managed through the view tree. The view component includes a first view component and a second view component. The first view component is of the webview component type, and the second view component is of the SurfaceView component type. The rendering component is used to render the window and includes a first rendering component and a second rendering component. The first rendering component is of the full-screen Surface component type, and the first rendering component has a corresponding relationship with the first view component; the second rendering component is of the picture-in-picture Surface component type, and the second rendering component has a corresponding relationship with the second view component.

[0205] The main process of the video playback method provided in the embodiment of the present application runs through the life cycle of the video component. The embodiment of the present application will take the first switching of video playback from the first window of the mini program page to the second window of the second interface as an example to introduce the process of the video playback method of the present application. Figure 15 , Figure 15This is a flowchart of the video playback of the first window switching provided by an embodiment of the present application. After the user clicks on the video playback control in the video applet through the terminal device, the terminal device responds to the user's click operation and generates a video playback instruction to the server. After the server receives the video playback instruction, it generates a video playback tag corresponding to the applet, and starts the video playback logic of the applet, and plays the video in the first window of the video playback in the applet. When the video is played in the video applet, the video playback tag corresponding to the applet page indicates that the video is in the playback state, and the state corresponding to the applet page is the visibility state. When the user clicks on the "small window mode" control in the applet page through the terminal device, the terminal device responds to the user's click operation, generates a first window switching instruction, and sends the generated first window switching instruction to the server. The page state acquisition component in the video playback system architecture obtains the life cycle event of the current applet page, and perceives that the state corresponding to the applet page changes from the visibility state to the non-visibility state. The video playback tag still indicates that the video is in the playback state, and the playback logic of switching the video picture-in-picture is triggered. Specifically: Search the view tree for the first view component used to carry video rendering in the video playback state in the first window, then use the context information of the mini-program page to construct the second view component, and replace the first view component with the second view component. After the view component is replaced, construct the event acquisition component corresponding to the second rendering canvas, and obtain the status of the second rendering component through the event acquisition component corresponding to the second rendering canvas, that is, when the second rendering component is successfully created, inform the second view component and replace the first rendering component with the second rendering component. When the view component and the rendering component are replaced, the video playback in the first window will be paused, and the first video playback information of the video playback in the first window will be obtained and cached (the video playback progress and playback settings of the video playback in the first window will be recorded). The first view component and the first rendering component are cached. When the first video playback information is cached and the view component and the rendering component are replaced, the first view component and the first rendering component in the view tree are hidden, and the second view component and the second rendering component are added to the view tree. Based on the size information of the first view component and the first rendering component, the size information of the second view component and the second rendering component is adjusted, and the ratio data of the second window and the second interface is determined based on the adjusted size information of the second view component and the second rendering component. In the second window of the second interface, the player's playback state is restored and video playback continues. At this point, the first switching process from playing the video in the first window of the mini program page to playing the video in the second window of the second interface is completed, and normal playback and display of the video in picture-in-picture mode is achieved.

[0206] Furthermore, in order to achieve normal video playback in the first window of the mini program page and normal video playback in the second window of the second interface (picture-in-picture mode), and to achieve normal switching of playback effects, the method provided in the embodiment of the present application dynamically replaces the first view component (component of type webview) by constructing the second view component (component of type SurfaceView) to adapt to video rendering in different playback scenarios. Figure 16 , Figure 16 It is a schematic diagram of the replacement process of the video component provided by the embodiment of the present application. When the state change of the window for video playback is obtained, the findViewByID function is called according to the identification information of the applet page to find the content root view of the applet page, and then the view tree is extracted from the content root view. By traversing all nodes in the view tree, the only child node with the node type of webview is found. The only child node is the first view component corresponding to the first window currently in the applet page. The context information of the applet page is obtained, the view component constructor is called, and the second view component of the type SurfaceView is generated according to the context information. The event acquisition component corresponding to the second rendering canvas is constructed, and the association relationship between the second view component and the event acquisition component corresponding to the second rendering canvas is established. When the event acquisition component corresponding to the second rendering canvas is successfully constructed, the state of the first view component is set to an invisible state, and the second view component is added to the view tree to complete the replacement process of the video component.

[0207] Furthermore, since the video rendering process is strongly related to the view component's rendering canvas, when replacing the original view component, the original rendering component must also be replaced to ensure the correctness of video rendering in picture-in-picture mode. The rendering component replacement process occurs after the view component is replaced and the rendering canvas is successfully created. Please refer to Figure 17 , Figure 17It is a schematic diagram of the replacement process of the rendering component provided by an embodiment of the present application. The creation result of the second rendering canvas is obtained by the event acquisition component corresponding to the second rendering canvas. When it is obtained that the second rendering canvas is created successfully, the second rendering canvas instance object corresponding to the second rendering canvas is obtained from the parameters of the callback method. The first rendering canvas instance object is replaced with the second rendering canvas instance object to construct the second rendering component. Based on the replacement of the original first rendering component by the second rendering component, preferably, the replacement method can be an assignment replacement method. After the replacement of the rendering component is completed, the pause function and the relase function are called to pause the first rendering component, and the storage space of the first rendering component is released, and the texture conversion logic of the first rendering is terminated. The setSurfaceSize function, setSurfaceSize function and setVideoSize function of the second rendering component are called respectively to associate the second rendering component with the second rendering component to complete the replacement process of the rendering component.

[0208] The method provided in an embodiment of the present application, when receiving an instruction to play a video in picture-in-picture mode, switches the video originally played in the first window in the mini-program page to a suspended second window for continued playback. In order to render the second window normally under the same-layer rendering method, the second window is configured with its corresponding second view component and second rendering component, and the suspended second window is displayed based on the second view component and the second rendering component, so that the video can continue to be played normally in the second window, thereby solving the rendering abnormality problem under the same-layer rendering method and improving the continuity and stability of video playback.

[0209] In this application Figure 6 In an optional embodiment of the video playback method provided in the corresponding embodiment, please refer to Figure 18 The video playback method further includes steps S310 to S350. Specifically:

[0210] S310: Receive a second window switching instruction.

[0211] The second window switching instruction is used to instruct to adjust the video playback through the second window to playback through the first window.

[0212] It is understandable that the video playback window in the mini-program page refers to the window for video playback in the mini-program page, which can be presented in the form of a mini-program component, that is, the window is located in a fixed position in the mini-program page, and the user cannot move the position. The second interface refers to an interface other than the mini-program interface currently playing the video. For example, the second interface can be the interface of other video mini-programs, or the interface of other mini-programs, or the interface of other applications (APP), or the desktop of a terminal device. A floating window refers to a window that can perform custom operations such as window position change and / or window size change and / or window shape change. The first window and the second window are both windows for user video playback.

[0213] like Figure 19 As shown, when the user is playing a video in the second window of the second interface, he can click the "Restore Mode" control in the second window to restore the video being played in the second window of the second interface in "Picture-in-Picture" mode to the first window of the mini program page to continue playing.

[0214] When the video is playing in the second window of the second interface, the video playback label corresponding to the mini-program page indicates that the video is in the playing state, and the corresponding state of the mini-program page is in the invisible state. When the user clicks the "restore mode" control in the second window through the terminal device, the terminal device responds to the user's click operation, generates a second window switching instruction, and sends the generated second window switching instruction to the server. The second window switching instruction is used to instruct the video to be adjusted from being played through the second window to being played through the first window.

[0215] When the server receives the second window switching instruction sent by the terminal device, the video playback tag still indicates that the video is in the playback state, but the corresponding state of the mini program page will change to visibility, which triggers the playback logic of switching the video mini program window.

[0216] S320: Obtain the second video playback information for video playback in the second window, and obtain the view tree corresponding to the mini program page.

[0217] It can be understood that the second video playback information for video playback in the second window is obtained, and the second video playback information includes the progress of video playback and the playback setting information of the video. Through the video playback progress, the video can be continued when it is switched from the second window to the first window for playback, without the user manually adjusting the progress of the video. Through the playback setting information, the user's original setting information can be maintained when the video is switched from the second window to the first window for playback. For example, the playback setting information includes: playback speed (speed value), barrage setting information (whether to turn on barrage, screen ratio of barrage, barrage font transparency, etc.), viewing preference information, etc.

[0218] The view tree of a mini-program page is the visual structure of the mini-program page. It contains all components, layout, and style information for the mini-program page. The view tree records each component in the mini-program, its corresponding position and size, the mini-program's application style, and the layout information of the mini-program page.

[0219] The process of obtaining the view tree corresponding to the mini program page is: through the identification information corresponding to the mini program, use the findViewById function to find the content root view of the mini program page, and then extract the view tree from the content root view.

[0220] S330. Search the view tree for the first view component and the first rendering component corresponding to the first window.

[0221] Among them, the first view component and the first rendering component are nodes in the view tree, the first view component is used to display the first window, and the first rendering component is used to render the first window.

[0222] It is understandable that the components of the mini-program exist as nodes in the view tree. By traversing all nodes in the view tree, the node with the node type of webview is found to be the first view component. Based on the correspondence between the first view component and the first rendering component, after the first view component is determined, the first rendering component can be found in the view tree according to the correspondence between the first view component and the first rendering component. The first view component is used to display the first window, and the first rendering component is used to render the first window.

[0223] S340. Based on the first view component and the first rendering component, display the first window in the mini program page.

[0224] It can be understood that based on the size information of the first view component and the size information of the first rendering component, the playback ratio of the first window and the mini-program interface is determined, thereby realizing the display of the first window on the mini-program interface.

[0225] S350: Play the video in the first window according to the second video playback information.

[0226] It is understandable that, according to the second video playback information, the video is continued in the first window, ensuring the continuity of video playback, and the user can seamlessly continue to watch the video in the first window on the mini program page.

[0227] The method provided in the embodiment of the present application allows the user to switch video playback between the first window and the second window, providing more flexibility and control; during the window switching process, by obtaining the second video playback information and continuing to play it in the first window, the continuity of the video playback is maintained, and interruption or reloading is avoided; by displaying the first window in the mini-program page and playing the video, a consistent user interface and operation experience are provided, thereby enhancing the user experience.

[0228] In this application Figure 18 In an optional embodiment of the video playback method provided by the corresponding embodiment, the video playback method further includes:

[0229] The state of the second view component is set to an invisible state, and the state of the second rendering component is set to an invisible state.

[0230] It is understandable that switching the video to be played by the first window requires hiding the second view component and the second rendering component corresponding to the second window, that is, setting the state of the second view component to an invisible state, and setting the state of the second rendering component to an invisible state. By setting the state of these components to invisible, the second window will no longer be displayed to the user, and the related rendering operations will also stop. Setting the second view component to an invisible state means that the user will not be able to see the content of the second window, which can avoid confusion when multiple windows are displayed at the same time. Setting the second rendering component to an invisible state can stop the graphics rendering and drawing operations related to the second window, freeing up system resources.

[0231] The method provided in the embodiment of the present application allows the user to focus more clearly on the first window currently being displayed by hiding the second window, avoiding the confusion and confusion caused by the simultaneous display of multiple windows; stopping the rendering operation of the second window can free up system resources, improve the overall performance and responsiveness of the mini program, and help to achieve more refined control over the visibility and status of the mini program interface, making interface management more flexible and efficient.

[0232] In this application Figure 18 In an optional embodiment of the video playback method provided in the corresponding embodiment, please refer to Figure 20 , step S310 also includes sub-steps S311 to S312. Specifically:

[0233] S311. Obtain status information corresponding to the mini program page.

[0234] The status information is used to indicate the page visibility status of the mini program.

[0235] It is understood that the visibility status information of the page can be obtained through the page lifecycle events or interfaces of the mini program. The visibility status can include whether the page is visible or invisible.

[0236] S312: When the visibility information indicates that the page of the mini program has changed from an invisible state to a visible state, it is deemed that a second window switching instruction has been received.

[0237] It is understandable that the determination of whether the second window switching instruction has been received is based on the change in the page visibility state. When the page changes from the visible state to the visible state, it can be assumed that the user may have switched back to the mini program page, and thus this can be regarded as the triggering condition for the second window switching instruction. This helps to respond to window switching events in a timely manner and perform corresponding processing, such as pausing certain operations, releasing resources, or executing other logic related to window switching.

[0238] The method provided in the embodiment of the present application can respond accordingly to the user's operation by timely sensing the changes in the visibility state of the mini-program page, providing a smoother and more natural user experience. When the mini-program page becomes visible, related resources can be released or certain unnecessary operations can be suspended to save system resources and improve performance. Triggering the second window switching instruction based on the change in the page visibility state helps to maintain the consistency and predictability of interface interaction.

[0239] In this application Figure 18 In an optional embodiment of the video playback method provided in the corresponding embodiment, please refer to Figure 21 The video playback method further includes steps S410 to S460. Specifically:

[0240] S410: Obtain first playback information corresponding to the video.

[0241] The first play information is used to instruct the video to be played in the first window.

[0242] S420: Obtain second playback information corresponding to the video.

[0243] The second play information is used to instruct the video to be played in the second window.

[0244] It can be understood that the video corresponds to the playback information, and the playback information is used to indicate in which window the video is being played. That is, if the first playback information is obtained, it indicates that the video is being played in the first window in the mini-program interface; if the second playback information is obtained, it indicates that the video is being played in the second window in the second interface.

[0245] S430: Render the video using a first rendering component to obtain a first rendered video.

[0246] S440: Render the video using a second rendering component to obtain a second rendered video.

[0247] It can be understood that if the video is being played in the first window in the mini program interface, the video is rendered by the first rendering component corresponding to the first window to obtain a first rendered video; if the video is being played in the second window in the second interface, the video is rendered by the second rendering component corresponding to the second window to obtain a second rendered video.

[0248] S450: Play the first rendered video through the first rendering canvas.

[0249] S460: Play the second rendered video through the second rendering canvas.

[0250] It is understandable that, in different playback windows, different rendering components process the same video frame data, and output the rendered image to the corresponding rendering canvas to achieve video playback.

[0251] Furthermore, in order to improve the rendering efficiency of the rendering component, a multi-rendering component distribution method can be used to implement the switching operation between the first rendering component and the second rendering component, thereby improving the efficiency of switching between different playback scenes. Figure 22 As shown, Figure 22A schematic diagram of the process of switching rendering components provided in an embodiment of the present application. First, in the process of initializing the player instance, the playback data is acquired to obtain the video frame data (video stream data) corresponding to the video. When the player is in normal playback mode, the playback data is called back to the rendering distribution module. The rendering distribution module acquires the current playback information (the playback information is used to indicate whether the video is played in the first window or in the second window). The playback information includes two categories: the first playback information and the second playback information. The first playback information is used to indicate that the video is played in the first window, and the second playback information is used to indicate that the video is played in the second window. However, the playback information acquired each time is one of the first playback information or the second playback information. According to the playback information, the target rendering component for distributing the video frame data is determined, that is: if the playback information is the first playback information, the video frame data is distributed to the first rendering component corresponding to the first window of the mini-program page, and the video is rendered by the first rendering component; if the playback information is the second playback information, the video frame data is distributed to the second rendering component corresponding to the second window of the mini-program page, and the video is rendered by the second rendering component. In different playback windows, different rendering components process the same video frame data and output the rendered image to the corresponding rendering canvas to realize the playback of the video.

[0252] The method provided in the embodiment of the present application adopts a multi-rendering component distribution method to implement the switching operation between the first rendering component and the second rendering component, thereby improving the efficiency of switching between different playback scenes.

[0253] The video playback device in this application is described in detail below. Figure 23 . Figure 23 This is a schematic diagram of an embodiment of a video playback device 10 in an embodiment of the present application. The video playback device 10 includes: a first window switching instruction receiving module 110, an information acquisition module 120, a second component search module 130, a second window display module 140 and a second window video playback module 150; specifically:

[0254] A first window switching instruction receiving module 110 is configured to receive a first window switching instruction, wherein the first window switching instruction is configured to instruct the video to be played through a second window instead of being played through a first window, where the first window is the video playback window in the mini-program page, and the second window is the window for video playback on the second interface;

[0255] The first information acquisition module 120 is used to obtain the first video playback information of the video played in the first window, and obtain the view tree corresponding to the mini program page;

[0256] A second component search module 130 is configured to search the view tree for a second view component and a second rendering component corresponding to the second window, wherein the second view component and the second rendering component are nodes in the view tree, the second view component is configured to display the second window, and the second rendering component is configured to render the second window;

[0257] A second window display module 140 is configured to display a second window on a second interface based on a second view component and a second rendering component;

[0258] The second window video playing module 150 is configured to play the video in the second window according to the first video playing information.

[0259] The device provided in the embodiment of the present application, by receiving the first window switching instruction, enables the user to conveniently switch the video from the first window to the second window for playback, provides a video playback function in picture-in-picture mode, and improves the flexibility of video playback and user experience; by finding and configuring the second view component and the second rendering component corresponding to the second window, it ensures that the video can be rendered normally in the second window, avoids the problem that the small picture-in-picture window cannot normally play the original video or display the picture frames related to the original video, and solves the rendering abnormality problem under the same-layer rendering mode; according to the first video playback information, the video continues to be played in the second window, so that the video playback can maintain continuity during the window switching process, will not interrupt the user's viewing experience, improves the continuity and stability of video playback, and brings a better video viewing experience to the user.

[0260] In another implementation of the embodiment of the present application, the video playback device further includes: a second component generation module; the second component generation module is further configured to:

[0261] Get the context information corresponding to the mini program page, where the context information is the information used to generate the mini program page.

[0262] Calling the view component constructor to generate a second view component according to the context information, wherein the type of the second view component is a floating window view type;

[0263] Add the second view component to the view tree;

[0264] Generate a second rendering component according to the second view component, wherein the second view component and the second rendering component have a corresponding relationship;

[0265] Add the second render component to the view tree.

[0266] The device provided in the embodiment of the present application can display specific content related to the mini-program page in a floating window by generating a second view component and a second rendering component, thereby increasing the diversity and interactivity of the interface and providing a more flexible interface display method; users can conveniently access relevant information or perform other operations through the floating window without leaving the current mini-program page, thereby improving user convenience and satisfaction and enhancing user experience; the device provided in the embodiment of the present application enables the mini-program to manage and display multiple windows at the same time, improving the multi-tasking processing capability and efficiency of the application and enhancing the multi-window processing capability of the mini-program.

[0267] In another implementation of the embodiment of the present application, the second component generation module is further configured to:

[0268] Creating a second rendering canvas, wherein the second rendering canvas is a memory area used to display and store drawing data corresponding to the second window, and the drawing data is used to generate the second window;

[0269] When the second rendering canvas is successfully created, obtaining a second rendering canvas instance object corresponding to the second rendering canvas, wherein the second rendering canvas instance object is generated according to the drawing data;

[0270] Construct a second rendering component according to the second rendering canvas instance object;

[0271] An association relationship between the second rendering canvas and the second rendering component is established.

[0272] The device provided in the embodiment of the present application provides an independent rendering area for the second window by creating a second rendering canvas, so that the content of the second window can be distinguished from other parts of the mini-program page, and independent drawing and display can be achieved. The second rendering canvas can utilize graphics hardware acceleration technology to improve the efficiency and performance of graphics rendering, so that the graphics content in the second window can be displayed in a smoother manner; constructing a second rendering component based on the second rendering canvas instance object makes it possible to customize the display and interaction methods of the second window according to specific needs, providing greater flexibility and scalability; establishing an association relationship between the second rendering canvas and the second rendering component ensures that the drawing and rendering of the second window are closely coordinated with the display and interaction of the component, maintaining the consistency and maintainability of the interface; through the above steps, an independent, efficient and flexible second window interface can be provided to users, improving the user experience and operation efficiency in the mini-program.

[0273] In another implementation of the embodiment of the present application, the second component generation module is further configured to:

[0274] In the view tree, search for a first rendering component corresponding to the first window, wherein the first rendering component is a node in the view tree, and the first rendering component is used to render the first window;

[0275] According to the first rendering component, obtain a first rendering canvas instance object corresponding to the first rendering component;

[0276] The first rendering canvas instance object is replaced with the second rendering canvas instance object to construct a second rendering component.

[0277] The device provided in the embodiment of the present application can ensure that the rendering and interaction of each window are performed independently without interfering with each other, thereby achieving independence between windows; by associating the second rendering component with the second rendering canvas instance object, the performance advantages of the second rendering canvas can be utilized to improve the rendering efficiency and smoothness of the second window; the independent rendering component and rendering canvas instance object make the maintenance and expansion of the window easier; through the independent rendering component and rendering canvas instance object, a better window interaction experience can be provided to the user, and each window can perform independent animation effects, transition effects, etc. as needed, thereby improving the smoothness and visual effects of the user interface.

[0278] In another implementation of the embodiment of the present application, the second component generation module is further configured to:

[0279] Constructing an event acquisition component corresponding to the second rendering canvas, wherein the event acquisition component is used to acquire an event indicating that the second rendering canvas is successfully created;

[0280] An association relationship is established between the second view component and the event acquisition component corresponding to the second rendering canvas.

[0281] The device provided in the embodiment of the present application, by creating an event acquisition component and establishing an association relationship, can ensure that the second view component can promptly obtain the event of the successful creation of the second rendering canvas, so that it can quickly respond and perform corresponding processing; when the second rendering canvas is successfully created, the second view component can update the interface according to the event information transmitted by the event acquisition component to display the latest rendering content; the creation of the event acquisition component provides a flexible way to handle the creation event of the second rendering canvas. Custom event processing logic can be defined in the event acquisition component according to specific needs to meet different business needs; separating the second view component from the event acquisition component makes them more functionally independent and reusable.

[0282] In another implementation of the embodiment of the present application, the video playback device further includes: a first component state setting module; the first component state setting module is configured to:

[0283] In the view tree, search for a first view component and a first rendering component corresponding to the first window, wherein the first view component and the first rendering component are nodes in the view tree, the first view component is used to display the first window, and the first rendering component is used to render the first window;

[0284] The state of the first view component is set to an invisible state, and the state of the first rendering component is set to an invisible state.

[0285] The device provided in the embodiment of the present application allows the user to pay more clear attention to the second window currently being displayed by hiding the first window, avoiding the confusion and confusion caused by the simultaneous display of multiple windows; stopping the rendering operation of the first window can free up system resources, improve the overall performance and responsiveness of the mini program, and help to achieve more precise control over the visibility and status of the mini program interface, making interface management more flexible and efficient.

[0286] In another implementation of the embodiment of the present application, the second window display module is further configured to:

[0287] Determining size information of the first view component based on the first view component, and determining size information of the first rendering component based on the first rendering component;

[0288] Adjusting the size information of the second view component and the size information of the second rendering component according to the size information of the first view component and the size information of the first rendering component;

[0289] Determining a ratio value between the second window and the second interface according to the adjusted size information of the second view component and the adjusted size information of the second rendering component;

[0290] The second window is displayed on the second interface according to the ratio between the second window and the second interface.

[0291] The device provided in the embodiment of the present application can achieve adaptive layout under different screen sizes or device orientations by adjusting the size of the second window according to the size information of the first window. This enables the mini program to display content in the best way on different devices, providing a better user experience; determining the ratio value of the second window to the second interface helps to maintain the consistency of the layout and proportion of the interface elements in the second window. Regardless of the operation or adjustment performed by the user in the first window, the interface layout in the second window will remain relatively stable, reducing the user's confusion and discomfort; through automated size adjustment and ratio calculation, the developer's duplication of work when dealing with different screen sizes and device orientations is reduced. This improves development efficiency and makes it easier to maintain and update the interface layout.

[0292] In another implementation of the embodiment of the present application, the first window switching instruction receiving module is further configured to:

[0293] Obtaining status information corresponding to the mini program's page, where the status information is used to indicate the mini program's page visibility status;

[0294] When the visibility information indicates that the page of the mini program is changed from a visible state to an invisible state, it is considered that the first window switching instruction is received.

[0295] The device provided in the embodiment of the present application can respond accordingly to the user's operation by timely sensing the changes in the visibility state of the mini-program page, providing a smoother and more natural user experience. When the mini-program page becomes invisible, related resources can be released or certain unnecessary operations can be suspended to save system resources and improve performance. Triggering the first window switching instruction based on the change in the page visibility state helps to maintain the consistency and predictability of interface interaction.

[0296] In another implementation of the embodiment of the present application, the video playback device further includes: a second window switching instruction receiving module, a second information acquisition module, a first component search module, a first window display module, and a first window video playback module; specifically:

[0297] a second window switching instruction receiving module, configured to receive a second window switching instruction, wherein the second window switching instruction is used to instruct to adjust the video playback through the second window to playback through the first window;

[0298] A second information acquisition module is used to obtain the second video playback information played in the second window, and obtain the view tree corresponding to the mini program page;

[0299] A first component search module is configured to search the view tree for a first view component and a first rendering component corresponding to the first window, wherein the first view component and the first rendering component are nodes in the view tree, the first view component is configured to display the first window, and the first rendering component is configured to render the first window;

[0300] A first window display module, configured to display a first window on the mini-program page based on the first view component and the first rendering component;

[0301] The first window video playback module is used to play the video in the first window according to the second video playback information.

[0302] The device provided in the embodiment of the present application allows the user to switch video playback between the first window and the second window, providing more flexibility and control; during the window switching process, by obtaining the second video playback information and continuing to play it in the first window, the continuity of the video playback is maintained, and interruption or reloading is avoided; by displaying the first window in the mini-program page and playing the video, a consistent user interface and operation experience are provided, thereby enhancing the user experience.

[0303] In another implementation of the embodiment of the present application, the first component search module is further used to set the state of the second view component to an invisible state, and to set the state of the second rendering component to an invisible state.

[0304] The device provided in the embodiment of the present application allows the user to focus more clearly on the first window currently being displayed by hiding the second window, avoiding the confusion and confusion caused by the simultaneous display of multiple windows; stopping the rendering operation of the second window can free up system resources, improve the overall performance and responsiveness of the mini program, and help to achieve more refined control over the visibility and status of the mini program interface, making interface management more flexible and efficient.

[0305] In another implementation of the embodiment of the present application, the second window switching instruction receiving module is further configured to:

[0306] Obtaining status information corresponding to the mini program's page, where the status information is used to indicate the mini program's page visibility status;

[0307] When the visibility information indicates that the page of the mini program has changed from an invisible state to a visible state, it is considered that the second window switching instruction has been received.

[0308] The device provided in the embodiment of the present application can respond accordingly to the user's operation by timely sensing the changes in the visibility state of the mini-program page, providing a smoother and more natural user experience. When the mini-program page becomes visible, related resources can be released or certain unnecessary operations can be suspended to save system resources and improve performance. Triggering the second window switching instruction based on the change in the page visibility state helps to maintain the consistency and predictability of interface interaction.

[0309] In another implementation of the embodiment of the present application, the video playback device further includes a rendering component switching module, which is configured to:

[0310] Obtaining first playback information corresponding to the video, wherein the first playback information is used to indicate that the video is played in a first window;

[0311] Rendering the video using a first rendering component to obtain a first rendered video;

[0312] The first rendered video is played through the first rendering canvas.

[0313] Obtaining second playback information corresponding to the video, wherein the second playback information is used to indicate that the video is played in the second window;

[0314] Rendering the video using a second rendering component to obtain a second rendered video;

[0315] The second rendered video is played through the second rendering canvas.

[0316] The device provided in the embodiment of the present application adopts a multi-rendering component distribution device to implement the switching operation between the first rendering component and the second rendering component, thereby improving the efficiency of switching between different playback scenes.

[0317] Figure 24 : This is a schematic diagram of a server structure provided in an embodiment of the present application. The server 300 may have relatively large differences due to different configurations or performances, and may include one or more central processing units (CPUs) 322 (for example, one or more processors) and memories 332, and one or more storage media 330 (for example, one or more massive storage devices) for storing application programs 342 or data 344. Among them, the memories 332 and the storage media 330 may be temporary storage or permanent storage. The program stored in the storage medium 330 may include one or more modules (not shown in the figure), and each module may include a series of instruction operations on the server. Furthermore, the central processing unit 322 may be configured to communicate with the storage medium 330 to execute a series of instruction operations in the storage medium 330 on the server 300.

[0318] The server 300 may also include one or more power supplies 326, one or more wired or wireless network interfaces 350, one or more input and output interfaces 358, and / or one or more operating systems 341, such as Windows Server 2003 or Windows Server 2003R. TM , Mac OS X TM , Unix TM ,Linux TM , FreeBSD TM etc.

[0319] The steps performed by the server in the above embodiment can be based on the Figure 24 The server structure shown.

[0320] Those skilled in the art will clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0321] In the several embodiments provided in this application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are merely schematic. For example, the division of units is only a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interface, device or unit, which can be electrical, mechanical or other forms.

[0322] Units described as separate components may or may not be physically separate, and components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of these units may be selected to achieve the purpose of this embodiment according to actual needs.

[0323] In addition, the functional units in the various embodiments of the present application may be integrated into a single processing unit, or each unit may exist physically separately, or two or more units may be integrated into a single unit. The aforementioned integrated units may be implemented in the form of hardware or software functional units.

[0324] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for enabling a computer device (which can be a personal computer, server, or network device, etc.) to execute all or part of the steps of the various embodiments of the present application. The aforementioned storage medium includes various media that can store program codes, such as 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.

[0325] The above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the above embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the above embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application.

Claims

1. A video playback method, characterized in that: include: Receive a first window switching instruction, wherein the first window switching instruction is used to instruct to adjust the video playback through the first window to be played through the second window, the first window is the video playback window in the mini program page, and the second window is the window for video playback on the second interface; Obtaining first video playback information for video playback in the first window, and obtaining a view tree corresponding to the mini-program page; Searching, in the view tree, for a second view component and a second rendering component corresponding to the second window, wherein the second view component and the second rendering component are nodes in the view tree, the second view component is used to display the second window, and the second rendering component is used to render the second window; Based on the second view component and the second rendering component, displaying the second window on the second interface; Play the video in the second window according to the first video playback information.

2. The video playback method according to claim 1, wherein: Before searching for the second view component and the second rendering component corresponding to the second window, the method further includes: Obtaining context information corresponding to the mini-program page, wherein the context information is information for generating the mini-program page, Calling a view component constructor to generate the second view component according to the context information, wherein the type of the second view component is a floating window view type; Adding the second view component to the view tree; generating the second rendering component according to the second view component, wherein the second view component and the second rendering component have a corresponding relationship; Add the second rendering component to the view tree.

3. The video playback method according to claim 2, wherein: Generating the second rendering component according to the second view component includes: Creating a second rendering canvas, wherein the second rendering canvas is a memory area used to display and store drawing data corresponding to the second window, the drawing data being used to generate the second window; When the second rendering canvas is successfully created, obtaining a second rendering canvas instance object corresponding to the second rendering canvas, wherein the second rendering canvas instance object is generated according to the drawing data; Construct the second rendering component according to the second rendering canvas instance object; An association relationship between the second rendering canvas and the second rendering component is established.

4. The video playback method according to claim 3, wherein: The constructing the second rendering component according to the second rendering canvas instance object includes: Searching for a first rendering component corresponding to the first window in the view tree, wherein the first rendering component is a node in the view tree, and the first rendering component is used to render the first window; According to the first rendering component, obtaining a first rendering canvas instance object corresponding to the first rendering component; The first rendering canvas instance object is replaced with the second rendering canvas instance object to construct the second rendering component.

5. The video playback method according to claim 3, wherein: After calling the view component constructor and generating the second view component according to the context information, the method further includes: Constructing an event acquisition component corresponding to the second rendering canvas, wherein the event acquisition component is used to acquire an event indicating that the second rendering canvas is successfully created; An association relationship is established between the second view component and the event acquisition component corresponding to the second rendering canvas.

6. The video playback method according to claim 1, wherein: After searching for the second view component and the second rendering component corresponding to the second window, the method further includes: Searching, in the view tree, for a first view component and a first rendering component corresponding to the first window, wherein the first view component and the first rendering component are nodes in the view tree, the first view component is used to display the first window, and the first rendering component is used to render the first window; The state of the first view component is set to an invisible state, and the state of the first rendering component is set to an invisible state.

7. The video playback method according to claim 6, wherein: The displaying the second window on the second interface based on the second view component and the second rendering component includes: Determining size information of the first view component based on the first view component, and determining size information of the first rendering component based on the first rendering component; Adjusting the size information of the second view component and the size information of the second rendering component according to the size information of the first view component and the size information of the first rendering component; Determining a ratio value between the second window and the second interface according to the adjusted size information of the second view component and the adjusted size information of the second rendering component; The second window is displayed on the second interface according to a ratio between the second window and the second interface.

8. The video playback method according to claim 1, wherein: The receiving the first window switching instruction includes: Obtaining status information corresponding to the page of the mini program, wherein the status information is used to indicate the page visibility status of the mini program; When the visibility information indicates that the page of the mini program is changed from a visible state to an invisible state, it is regarded as receiving the first window switching instruction.

9. The video playback method according to any one of claims 1 to 8, wherein: The method further comprises: Receiving a second window switching instruction, wherein the second window switching instruction is used to instruct to adjust the video playback through the second window to playback through the first window; Obtaining second video playback information for video playback in the second window, and obtaining a view tree corresponding to the mini-program page; Searching, in the view tree, for a first view component and a first rendering component corresponding to the first window, wherein the first view component and the first rendering component are nodes in the view tree, the first view component is used to display the first window, and the first rendering component is used to render the first window; Based on the first view component and the first rendering component, display the first window in the mini-program page; Play the video in the first window according to the second video playback information.

10. The video playback method according to claim 9, wherein: The method further comprises: The state of the second view component is set to an invisible state, and the state of the second rendering component is set to an invisible state.

11. The video playback method according to claim 9, wherein: The receiving the second window switching instruction includes: Obtaining status information corresponding to the page of the mini program, wherein the status information is used to indicate the page visibility status of the mini program; When the visibility information indicates that the page of the mini program is changed from an invisible state to a visible state, it is regarded as receiving the second window switching instruction.

12. The video playback method according to claim 9, wherein: The method further comprises: Obtaining first playback information corresponding to the video, wherein the first playback information is used to indicate that the video is played in the first window; Rendering the video by the first rendering component to obtain a first rendered video; The first rendered video is played through the first rendering canvas.

13. The video playback method according to claim 12, wherein: The method further comprises: Obtaining second playback information corresponding to the video, wherein the second playback information is used to indicate that the video is played in the second window; Rendering the video by the second rendering component to obtain a second rendered video; The second rendered video is played through the second rendering canvas.

14. A video playback device, characterized in that: include: A first window switching instruction receiving module, configured to receive a first window switching instruction, wherein the first window switching instruction is used to instruct to adjust the video playback through the first window to be played through the second window, the first window being the video playback window in the mini-program page, and the second window being the window for video playback on the second interface; A first information acquisition module is used to obtain first video playback information of the video played in the first window, and obtain a view tree corresponding to the mini program page; A second component search module is configured to search, in the view tree, for a second view component and a second rendering component corresponding to the second window, wherein the second view component and the second rendering component are nodes in the view tree, the second view component is configured to display the second window, and the second rendering component is configured to render the second window; A second window display module, configured to display the second window on the second interface based on the second view component and the second rendering component; The second window video playback module is used to play the video in the second window according to the first video playback information.

15. A computer device, characterized in that: include: Memory, processor, and bus system; Wherein, the memory is used to store programs; The processor is configured to execute the program in the memory, including executing the video playback method according to any one of claims 1 to 13; The bus system is used to connect the memory and the processor so that the memory and the processor can communicate with each other.

16. A computer-readable storage medium comprising instructions, characterized in that: When the method is run on a computer, the computer is enabled to execute the video playing method according to any one of claims 1 to 13.

17. A computer program product comprising a computer program, characterized in that The computer program is executed by a processor to implement the video playback method according to any one of claims 1 to 13.

Images