Method and apparatus for interactive display, device, storage medium, and program product

Abstract

Embodiments of the present disclosure provide a method and apparatus for interactive display, a device, a storage medium, and a program product. The method comprises: presenting media content and a plurality of interface elements in a first interactive interface; in response to receiving an interface creation request on the first interactive interface, presenting a second interactive interface, wherein the second interactive interface presents the media content and at least one interface element among the plurality of interface elements; and updating the state of the at least one interface element in the second interactive interface on the basis of the state of the at least one interface element in the first interactive interface.

Description

Methods, apparatus, devices, storage media, and program products for interactive displays

[0001] This application claims priority to Chinese Patent Application No. 202411644183.0, filed on November 15, 2024, entitled “Method, Apparatus, Device, Storage Medium and Program Product for Interactive Display”, the entire contents of which are incorporated herein by reference. Technical Field

[0002] The exemplary embodiments disclosed herein generally relate to the field of computers, and particularly to methods, apparatuses, devices, storage media, and program products for interactive display. Background Technology

[0003] In existing internet applications, with the increasing demand for video playback, multi-window display and interactive technologies have gradually become an important means of optimizing user experience. Traditional picture-in-picture (PiP) technology allows users to place video content in a separate small window, enabling them to continue watching the video while browsing other content. However, traditional PiP technology has certain limitations in some complex video playback scenarios. Especially in emerging interactive display scenarios such as live video streaming, improving the application of PiP technology in interactive display scenarios remains a technical challenge. Summary of the Invention

[0004] In a first aspect of this disclosure, a method for interactive display is provided. The method may include: presenting media content and a plurality of interface elements in a first interactive interface; presenting a second interactive interface in response to receiving an interface creation request in the first interactive interface, the second interactive interface being presented with media content and at least one of the plurality of interface elements; and updating the state of the at least one interface element in the second interactive interface based on the state of the at least one interface element in the first interactive interface.

[0005] In a second aspect of this disclosure, an apparatus for interactive display is provided. The apparatus may include: a first presentation module configured to present media content and a plurality of interface elements in a first interactive interface; an interface creation module configured to present a second interactive interface in response to receiving an interface creation request in the first interactive interface, the second interactive interface displaying media content and at least one of the plurality of interface elements; and a state synchronization module configured to update the state of at least one interface element in the second interactive interface based on the state of at least one interface element in the first interactive interface.

[0006] In a third aspect of this disclosure, an electronic device is provided. The device includes at least one processor; and at least one memory coupled to the at least one processor and storing instructions for execution by the at least one processor. When executed by the at least one processor, the instructions cause the electronic device to perform the method of the first aspect.

[0007] In a fourth aspect of this disclosure, a computer-readable storage medium is provided. The medium stores computer-executable instructions that, when executed by a processor, implement the method of the first aspect.

[0008] In a fifth aspect of this disclosure, a computer program product is provided. The computer program product includes computer-executable instructions that, when executed by a processor, implement the method of the first aspect.

[0009] It should be understood that the description in this section is not intended to limit the key or essential features of the embodiments of this disclosure, nor is it intended to restrict the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description

[0010] The above and other features, advantages, and aspects of the embodiments of this disclosure will become more apparent from the accompanying drawings and the following detailed description. In the drawings, the same or similar reference numerals denote the same or similar elements, wherein:

[0011] Figure 1 shows a schematic diagram of an example environment in which embodiments of the present disclosure can be implemented;

[0012] Figure 2 illustrates a schematic diagram of a process for interactive display according to some embodiments of the present disclosure;

[0013] Figure 3 shows a flowchart of a method for interactive display according to some embodiments of the present disclosure;

[0014] Figure 4 shows an example diagram of a configuration example of an interactive interface according to some embodiments of the present disclosure;

[0015] Figure 5 shows a schematic diagram of an interactive interface according to some embodiments of the present disclosure;

[0016] Figure 6 illustrates a schematic diagram of the rendering principle of a second interactive interface according to some embodiments of the present disclosure;

[0017] Figure 7 shows a schematic diagram illustrating the principle of the state update principle of a first interface element according to some embodiments of the present disclosure;

[0018] Figure 8 illustrates a schematic diagram of the principle of synchronization of interactive functions according to some embodiments of the present disclosure;

[0019] Figure 9 shows a schematic structural block diagram of an apparatus for video generation according to some embodiments of the present disclosure; and

[0020] Figure 10 shows a block diagram of an electronic device that can implement one or more embodiments of the present disclosure. Detailed Implementation

[0021] Embodiments of this disclosure will now be described in more detail with reference to the accompanying drawings. While some embodiments of this disclosure are shown in the drawings, it should be understood that this disclosure can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.

[0022] In the description of embodiments of this disclosure, the term "comprising" and similar terms should be understood as open-ended inclusion, i.e., "including but not limited to". The term "based on" should be understood as "at least partially based on". The term "one embodiment" or "the embodiment" should be understood as "at least one embodiment". The term "some embodiments" should be understood as "at least some embodiments". Other explicit and implicit definitions may also be included below.

[0023] In this document, unless explicitly stated otherwise, performing a step in response to A does not mean that the step is performed immediately after A, but may include one or more intermediate steps.

[0024] It is understood that the data involved in this technical solution (including but not limited to the data itself, the acquisition, use, storage or deletion of the data) shall comply with the requirements of relevant laws, regulations and related provisions.

[0025] It is understood that before using the technical solutions disclosed in the various embodiments of this disclosure, relevant users should be informed of the type, scope of use, and usage scenarios of the information involved in this disclosure through appropriate means in accordance with relevant laws and regulations, and authorization should be obtained from the relevant users. Among them, relevant users may include any type of rights holder, such as individuals, enterprises, and groups.

[0026] For example, in response to receiving an active request from a user, a prompt message is sent to the relevant user to clearly inform the user that the requested operation will require obtaining and using the user's information, thereby enabling the relevant user to choose whether to provide information to the software or hardware such as the electronic device, application, server, or storage medium that performs the operation of the technical solution disclosed herein based on the prompt message.

[0027] As an optional but non-restrictive implementation, in response to a user's active request, a prompt message can be sent to the user, such as a pop-up window, where the prompt message can be presented in text format. Furthermore, the pop-up window can also include a selection control allowing the user to choose "agree" or "disagree" to provide information to the electronic device.

[0028] It is understood that the above notification and user authorization process are merely illustrative and do not constitute a limitation on the implementation of this disclosure. Other methods that comply with relevant laws and regulations may also be applied to the implementation of this disclosure.

[0029] Figure 1 illustrates a schematic diagram of an example environment 100 in which embodiments of the present disclosure can be implemented. As shown in Figure 1, environment 100 may include electronic device 110.

[0030] In this example environment 100, user 145 can play media content through an associated electronic device 110. The media content may include video content, such as live video streaming or online video conferencing content. For example, if user 145 starts a live streaming application 120, the corresponding live streaming content can be displayed on page 142. If user 145 starts an online meeting application 120, the corresponding online video conferencing content can be displayed on page 142.

[0031] During media playback, if the electronic device 110 receives an interface creation request, it can create a second interactive page 140 on page 142. The second interactive page 140 serves as a picture-in-picture interface of the first interactive page 130. The electronic device 110 migrates the original media content and at least one interface element from the first interactive page 130 to the second interactive page 140. The second interactive page 140 can display the same style and at least one identical interface element as the first interactive page 130.

[0032] Electronic device 110 can be any type of mobile terminal, fixed terminal, or portable terminal, including mobile phones, desktop computers, laptop computers, notebook computers, netbook computers, tablet computers, media computers, multimedia tablets, personal communication system (PCS) devices, personal navigation devices, personal digital assistants (PDAs), audio / video players, digital cameras / camcorders, television receivers, radio receivers, e-book devices, gaming devices, or any combination thereof, including accessories and peripherals of these devices or any combination thereof. In some embodiments, electronic device 110 can also support any type of user-facing interface (such as "wearable" circuitry). Server-side equipment (not shown) can be various types of computing systems / servers capable of providing computing power, including but not limited to mainframes, edge computing nodes, computing devices in cloud environments, etc. Server-side equipment can, for example, provide background services for the applications of electronic device 110.

[0033] It should be understood that the structure and function of the various elements in environment 100 are described for illustrative purposes only and do not imply any limitation on the scope of this disclosure.

[0034] In conventional applications, picture-in-picture (PiP) technology is widely used in video playback scenarios. With PiP, users can separate the video from the main interface and display it as a floating window anywhere on the screen. This allows users to watch the video content while performing other tasks on their electronic devices. This technology is commonly used in video playback platforms such as video-on-demand, live video streaming, or video conferencing to enhance users' multitasking capabilities. However, current PiP functionality is mostly limited to presenting the video content itself; it only supports displaying the video stream in a small window, primarily offering basic operations such as play, pause, fast forward, and volume adjustment. While users can view the video content in the PiP window, they cannot use other interface elements normally, such as entering comments or displaying virtual gifts. This lack of interactivity limits the expansion of PiP technology into more complex business scenarios.

[0035] In embodiments of this disclosure, an improved scheme for interactive display is proposed. In this scheme, media content and multiple interface elements are presented in a first interactive interface. In response to receiving an interface creation request in the first interactive interface, a second interactive interface is presented, which displays the media content and at least one of the multiple interface elements. Based on the state of at least one interface element in the first interactive interface, the state of at least one interface element in the second interactive interface is updated.

[0036] Through the above process, media content (such as video) can be separated from the first interactive interface (main window) and displayed in the form of a second interactive interface (small window). It also supports the synchronous migration of at least one interface element to the second interactive interface while maintaining state synchronization. This means that while playing video content using the second interactive interface, users can continue to use the interface elements in the first interactive interface that perform related interactive functions, achieving consistency of interface elements. For example, interface elements performing related interactive functions can include real-time updated countdown timers or virtual gift controls, thus solving the problem of reusing interface elements between the first and second interactive interfaces and overcoming the limitation of existing picture-in-picture functions that only support video playback and cannot properly use other interface elements. In this way, the functionality of the second interactive interface is enhanced, supporting more complex interactions and operations, and improving multitasking capabilities.

[0037] Figure 2 illustrates a schematic diagram of a process 200 for interactive display according to some embodiments of the present disclosure. For ease of discussion, process 200 will be described with reference to the context of Figure 1. At block 210, electronic device 110 receives an interface creation request from first interactive interface 130 and creates a second interactive interface 140. As an example, first interactive interface 130 may be referred to as the main window, and second interactive interface 140 may be referred to as the smaller window. After the second interactive interface 140 is created, electronic device 110 can migrate the media content and some interface elements presented by first interactive interface 130 to second interactive interface 140. Second interactive interface 140 is presented in a picture-in-picture format.

[0038] In some embodiments, at block 220, the electronic device 110 can determine the style configuration information of the first interactive interface 130 based on the obtained style configuration file of the first interactive interface 130. The style configuration information of the first interactive interface 130 can be reused in the second interactive interface 140, so that the second interactive interface 140 presents the same style effect as the first interactive interface.

[0039] In box 230, electronic device 110 determines at least one interface element. The at least one interface element may include interactive components from the first interactive interface. Since the determined at least one interface element can be repeatedly presented in both the first interactive interface 130 and the second interactive interface 140, it is also referred to as a reusable interface element or a reusable interactive component. As an example, the determined at least one interface element may include at least one interface element migrated from the first interactive interface 130 to the second interactive interface 140. For example, for live streaming media content, interface elements such as live streaming content, virtual gift-giving controls, countdown timers, and online user displays can all be migrated to the second interactive interface 140 as reusable interface elements. After migration to the second interactive interface 140, these interface elements continue to function in the second interactive interface 140 without losing their state or experiencing state inconsistencies. On the other hand, some control components, toolbars, navigation bars, etc., in the first interactive interface 130 may only remain for use in the first interactive interface 130. The user 145 can see and operate these interface elements in the first interactive interface 130, but these interface elements will not appear in the second interactive interface 140 when it is presented.

[0040] In box 240, the electronic device 110 renders the second interactive interface 140 according to the style configuration information. In box 250, the electronic device 110 presents the rendered second interactive interface 140. Furthermore, in some embodiments, in box 260, during the presentation of the second interactive interface 140, the electronic device 110 needs to listen for user 145's interactive operations, especially operations to close the second interactive interface 140 (such as clicking the close control, automatically closing after completing a task, etc.). In some embodiments, if an operation to close the second interactive interface 140 is detected, the second interactive interface is closed in box 270, and the display state of the first interactive interface 130 is restored.

[0041] After illustrating the process for interactive display with Figure 2, the flowchart of the method for interactive display will be described in detail with reference to Figure 3. Figure 3 shows a flowchart of a method 300 for interactive display according to some embodiments of the present disclosure. For ease of discussion, process 300 will be described with reference to the environment of Figure 1 and the process of Figure 2. In environment 100, process 300 can be implemented in electronic device 110.

[0042] In frame 301, electronic device 110 presents media content and multiple interface elements on the first interactive interface 130.

[0043] Based on the differences in the target application 120, the first interactive interface 130 can present various forms of media content, such as live video streaming and online meetings. Taking live video streaming as an example, multiple interface elements corresponding to the live video streaming will also be displayed in the first interactive interface 130. These interface elements can include user interaction interface elements or information display interface elements. For example, user interaction interface elements can include like controls, comment input boxes, and virtual gift interaction controls. Information display interface elements can include real-time audience numbers. Taking online meetings as an example, user interaction interface elements can include speak request controls and drum controls. Information display interface elements can include a list of participants and a meeting time countdown.

[0044] In box 302, in response to receiving an interface creation request on the first interactive interface 130, a second interactive interface 140 is presented. The second interactive interface 140 is presented with media content and at least one of a plurality of interface elements. As an example, the second interactive interface 140 can be presented in a picture-in-picture format within the first interactive interface 130. The picture-in-picture format allows the user 145 to continue interacting with the media content on the second interactive interface 140 while operating other content on the first interactive interface 130, thereby improving multitasking capabilities.

[0045] The interface creation request can be related to an operation performed by user 145 in the first interactive interface 130. For example, user 145 may select to enable picture-in-picture mode, thereby switching the media content and related interface elements to be displayed in the second interactive interface 140. In addition, the interface creation request can also be a dialog box or prompt temporarily created and displayed based on a specified operation by user 145 (such as clicking a control). The temporarily created and displayed dialog box or prompt can be automatically closed, for example, automatically after a specified time.

[0046] The configuration information of the second interactive interface 140 can be pre-configured offline, and the electronic device 110 can select a suitable layout and display style of the second interactive interface 140 according to the specific scenario. The configuration can include information such as the (horizontal or vertical) display style of the second interactive interface 140, the window size, and the position of the interface elements presented in the second interactive interface 140, so as to ensure that the layout of the small window matches the user's needs and usage environment.

[0047] As an example, for presenting the second interactive interface 140, the electronic device 110 can, but is not limited to, combine the React framework and Document-pip encapsulation. Through this encapsulation, the electronic device 110 can quickly integrate the interactive display functions of the first interactive interface 130 and the second interactive interface 140 within the React architecture.

[0048] Figure 4 illustrates a schematic diagram of a configuration instance 400 of an interactive interface according to some embodiments of the present disclosure. As previously mentioned, the configuration information of the second interactive interface 140 can be pre-configured offline, and there can be multiple configuration instances 410 of the second interactive interface. Taking one of the configuration instances 411 of the second interactive interface in Figure 4 as an example, the configuration instance 411 of the second interactive interface can include at least the proprietary interface elements of the second interactive interface (small window) and placeholders. As an example, the proprietary interface elements of the second interactive interface 140 may include, for example, a close control, a resizing / positioning control, etc. Each placeholder can correspond to an interface element in the first interactive interface 130 through anchor mapping (also called position mapping), thereby ensuring that each element in the small window can be accurately displayed in the specified position.

[0049] Taking the configuration instance 412 of the first interactive interface in Figure 4 as an example, the configuration instance 412 of the first interactive interface may include at least the proprietary interface elements (main window) of the first interactive interface and reusable interface elements. Again, taking live video streaming as an example, the proprietary interface elements of the first interactive interface may include user identification information (avatar or username, etc.) of user 145, the navigation bar in the first interactive interface 130, etc. Reusable interface elements that need to be migrated to the second interactive interface 140 may include live streaming content, controls for sending virtual gifts, countdown displays, etc. As an example, the electronic device 110 maps reusable interface element 1 in the first interactive interface 130 to placeholder 1 in the second interactive interface 140 through anchor point 1 mapping 421, ensuring that the corresponding interface elements are correctly displayed in the second interactive interface 140. Through this mapping relationship, the layout in the second interactive interface 140 maintains consistency with the first interactive interface 130 or conforms to predefined display rules.

[0050] Figure 5 illustrates a schematic diagram of an interactive interface 500 according to some embodiments of the present disclosure. After the second interactive interface 140 is created, the proprietary interface elements 131 in the first interactive interface 130 remain displayed in the first interactive interface 130. Reusable interface elements 141 and media content 142 can be migrated to the second interactive interface 140 for display.

[0051] In box 303, electronic device 110 updates the state of at least one interface element in the second interactive interface based on the state of at least one interface element in the first interactive interface.

[0052] The state update process may include synchronizing the current state (such as displayed content, interaction state, etc.) of interface elements in the first interactive interface 130 to the second interactive interface 140 through a mapping mechanism, so that the interface elements seen by the user 145 in the second interactive interface 140 are consistent with the state in the first interactive interface 130. For example, when the state of a certain interface element in the first interactive interface 130 changes (such as the gifting of a virtual gift, a change in the person being connected to during a live chat, etc.), the corresponding interface element in the second interactive interface 140 will also be updated in a timely manner to ensure that the states of the two are synchronized.

[0053] Taking the countdown timer shown in Figure 5 as an example, when the countdown timer in the first interactive interface 130 starts counting down and is mapped to the second interactive interface 140, the countdown timer in the second interactive interface 140 will also be updated in real time. Regardless of whether the countdown timer is decreasing or ending, it will remain consistent in both interactive interfaces, ensuring that the user can see the latest countdown status in the second interactive interface 140.

[0054] Through the above process, not only can media content (such as video) be separated from the first interactive interface (e.g., the main window) and presented in the second interactive interface (e.g., a small window), but it also supports the synchronous migration of interface elements to the second interactive interface while maintaining state synchronization, achieving consistency of interface elements. This means that while playing video content using the second interactive interface, users can still continue to use related interactive functions in the first interactive interface, such as the real-time updated countdown timer or the control for giving virtual gifts, thus overcoming the limitation of traditional solutions where picture-in-picture functionality only supports video playback and cannot properly use other interface elements. Furthermore, the combination of the React framework and Document-pip encapsulation makes state synchronization and interactive control between the first and second interactive interfaces more efficient and storable. The React framework is a framework for building user interfaces that can be configured for modularization and reuse of interface elements. Document-pip encapsulation is a technique for implementing picture-in-picture display, which can be used to manage the creation and display of the second interactive interface (small window). React's component-based architecture improves code reusability across different interactive interfaces, ensuring smooth transitions between the first and second interactive interfaces during state changes. Document-pip simplifies the creation and management of the second interactive interface, providing stronger support for interface interactions in complex scenarios. This enhances the picture-in-picture functionality, supports interactions and operations in more complex scenarios, and improves multitasking capabilities. The state synchronization and interaction control between the first and second interactive interfaces mentioned above can be implemented, including but not limited to, by combining the React framework and Document-pip encapsulation. For example, in display interaction scenarios, other frameworks and encapsulation tools with similar functionalities can also be used.

[0055] Presenting the second interactive interface may include the presentation of media content and at least one interface element, and may also include the presentation of styles. First, the presentation of media content and at least one interface element will be introduced. Based on the interface configuration information of the second interactive interface, the electronic device 110 determines the target position in the second interactive interface 140. Based on the target position in the second interactive interface, the media content and at least one interface element in the first interactive interface are mapped to the second interactive interface.

[0056] The electronic device 110 can obtain the target position for displaying interface elements from the configuration information of the second interactive interface 140. The target position is a pre-configured display area used to determine the display position of interface elements in the second interactive interface 140. Through the position mapping mechanism, the electronic device 110 can ensure that the media content and reusable interface elements in the first interactive interface 130 are accurately presented in the second interactive interface.

[0057] Through anchor point mapping, the electronic device 110 can map interface elements in the first interactive interface 130 to corresponding positions in the second interactive interface 140, ensuring that media content and interface elements are displayed in positions that meet the user's expectations. For example, the position and scale of the video player in the first interactive interface 130 will be displayed in the second interactive interface 140 according to the layout rules of the second interactive interface through anchor point mapping. Similarly, interface elements such as countdown timers or interactive controls will also be displayed in the corresponding areas of the second interactive interface 140 according to their target positions.

[0058] In order for the second interactive interface 140 to present the same visual style as the first interactive interface 130, the electronic device 110 can render media content and at least one interface element in the second interactive interface based on the visual style of the first interactive interface 130.

[0059] The visual style of the first interactive interface 130 can at least indicate the page layout, font, color, and other related content. Based on the visual style, the electronic device 110 can render the media content and at least one interface element in the second interactive interface 140, ensuring that the visual style remains consistent with the first interactive interface 130 when switching to the second interactive interface 140. Thus, the second interactive interface 140 is created, and the style information of the first interactive interface 130 is fully applied to the second interactive interface 140, so that the user 145 obtains a consistent visual and interactive experience when operating the second interactive interface 140, without any sense of disjointedness.

[0060] The following describes the state presentation process of interface elements. Electronic device 110 maps the state of at least one interface element in the first interactive interface to a shared information carrying node, which is configured to transmit information between the second and first interactive interfaces. Through the shared information carrying node, the state of at least one interface element in the first interactive interface is synchronized to the second interactive interface.

[0061] Figure 6 illustrates a schematic diagram of the rendering principle 600 of a second interactive interface according to some embodiments of the present disclosure. The electronic device 110 maps the state of at least one interface element in the first interactive interface 130 to a shared information carrying node 601. The mounting position of the shared information carrying node 601 determines the final presentation interface of the state. The electronic device 110 mounts the shared information carrying node 601 to the second interactive interface 140, ensuring that the state of the interface element can be accurately synchronized to the second interactive interface 140.

[0062] The shared information carrying node 601 can store the state of interface elements and determine the target interface to which these states are presented based on its mounting location. The rendering module 602 can receive the state from the shared information carrying node 601 and render it onto the target interface. For example, when switching from the first interactive interface 130 to the second interactive interface 140, the rendering module 602 will ensure that the state of interface elements (such as countdown timers and audience numbers) is presented in real time on the second interactive interface 140.

[0063] As an example, the shared information carrier node 601 can manage and pass the state of these reusable UI elements through anchor elements. In the React framework, anchor elements are a mechanism for marking and reusing UI elements, ensuring that these UI elements can be passed from the first interactive interface 130 and mapped to the second interactive interface 140. As an example, through the React framework's createPortal feature, these UI elements and their states can migrate between the Document Object Model (DOM) trees of the first and second interactive interfaces 130 and ensure state synchronization. The React framework provides a component-based way to build complex user interfaces. By using the virtual DOM, the React framework can effectively handle changes in UI elements. The virtual DOM is a lightweight, in-memory DOM structure that can calculate state changes of UI elements and update only those parts that truly need to change, thereby reducing the number of operations on the real DOM and improving rendering efficiency.

[0064] When a UI element (such as a countdown timer) undergoes a state change in the first interactive interface 130, the shared information carrying node 601 records the change. When switching to the second interactive interface 140, the electronic device 110 uses the virtual DOM to identify the changed parts, such as the remaining time of the countdown timer, and transmits and maps these changes to the DOM tree of the second interactive interface 140 through the shared information carrying node 601. Dynamic elements such as the countdown timer presented in the second interactive interface 140 will remain synchronized with the first interactive interface 130. The rendering module 602 accurately presents these state changes in the second interactive interface 140, thereby ensuring the display of UI elements and the normal operation of interactive functions.

[0065] Reusable interface elements can be divided into two categories: non-interactive interface elements with dynamic states and interactive interface elements. A non-interactive interface element with a dynamic state can be used as the first interface element in at least one interface element. The electronic device 110 attaches a shared information carrying node to the second interactive interface and obtains the dynamic state of the first interface element in the first interactive interface through the shared information carrying node. Based on the dynamic state of the first interface element, the state of the first interface element is synchronously updated in the second interactive interface.

[0066] For the first interface elements, such as dynamically changing audience numbers or countdown timers, although these elements do not involve direct user interaction, their states are updated over time or with data changes. To ensure that these dynamic states can be synchronously presented in the second interactive interface 140, the electronic device 110 obtains the dynamic states of the first interface elements in the first interactive interface through the shared information carrier node 601.

[0067] Figure 7 illustrates a schematic diagram of the state update principle 700 of a first interface element according to some embodiments of the present disclosure. A shared information carrying node 601 records and transmits the dynamic state of the first interface element. For a first interface element 702 of the first interactive interface 130 that needs to be presented (e.g., the change in the number of online viewers in Figure 5), the electronic device 110 can obtain the dynamic state change through a counting function 701. If a count update is detected, triggering a re-rendering 710, the interface element in the main window is updated through the first interactive interface rendering 731.

[0068] If a UI element needs to be presented on the second interactive interface 140 (e.g., a countdown in Figure 5, which is the first UI element 703 on the second interactive interface), the electronic device 110 can obtain dynamic state changes through the counting function 701. If a count update is detected, triggering a re-render 710, the dynamic state changes are passed to the DOM tree of the second interactive interface 140 through the portal creation function 720 (corresponding to createPortal) to ensure that these dynamic state changes can be passed across the DOM tree, and rendering is completed through the second interactive interface rendering 732.

[0069] Through the above process, the electronic device 110 processes the display and update of the first interface elements in the first interactive interface 130 and the second interactive interface 140 respectively through the first interactive interface rendering 731 and the second interactive interface rendering 732 according to different interface requirements, ensuring that their states are consistent and presented synchronously.

[0070] For a second interface element, the electronic device 110, in response to detecting an interactive operation on the second interface element in the second interactive interface, executes the interactive function corresponding to the interactive operation. Based on the interaction result obtained from executing the interactive function, the state of at least one interface element in the second interactive interface is updated.

[0071] For second interface elements (such as virtual tipping or virtual gift functions), after being passed to the second interactive interface 140, these second interface elements not only maintain state synchronization, but can also respond to the user 145's interactive operations in the second interactive interface 140.

[0072] Figure 8 illustrates a schematic diagram of the principle 800 of interactive function synchronization according to some embodiments of the present disclosure. When user 145 interacts with a second interface element in the second interactive interface 140, electronic device 110 detects the interaction operation and dispatches it to the relevant logic processing module in the second interactive interface 140 through event dispatch function 810 (EventEmitter), triggering the corresponding interactive function. As an example, when user 145 clicks the virtual reward control in the second interactive interface 140, electronic device 110 can capture this event and dispatch the operation event to the logic processing module that executes the virtual reward function using event dispatch function 810. The logic processing module can perform actions such as distributing virtual gifts or changing the number of virtual gifts. After executing the interactive function, electronic device 110 synchronizes the result of the interactive function to the first interactive interface 130 through shared information carrier node 601. The changed number of virtual gifts in the first interactive interface 130 is also updated synchronously, ensuring that the state between the first interactive interface 130 and the second interactive interface 140 remains consistent.

[0073] The first interactive interface 130 can also directly send requests to the event dispatch function 810. For example, when the first interactive interface 130 needs to obtain or synchronize the state related to the operation event in the second interactive interface 140, the main window sends a corresponding request to the event dispatch function 810. The event dispatch function 810 will process these requests and dispatch them to the corresponding state processing module, thereby coordinating the state synchronization between the first interactive interface 130 and the second interactive interface 140.

[0074] In some embodiments of this disclosure, during the presentation of the second interactive interface 140, the position information of at least one interface element in the first interactive interface 130 can be maintained, for example, stored in a storage area. In response to the closing of the second interactive interface 140, the electronic device 110 resumes presentation of at least one interface element in the first interactive interface 130. In response to the presentation of the second interactive interface 140, the presentation of at least one interface element is canceled in the first interactive interface 130.

[0075] When media content and at least one interface element migrate from the first interactive interface 130 to the second interactive page 140, the electronic device 110 can use placeholders to determine the position information of the media content and at least one interface element on the first interactive interface 130. After detecting that the second interactive interface 140 is closed, the media content and at least one interface element can be restored to the original position of the main window based on this position information. The second interactive interface 140 can be closed by the user 145 clicking to close, or it can be closed automatically when specified conditions are met (e.g., reaching the display duration).

[0076] Correspondingly, after the second interface 140 is created, the electronic device 110 can cancel the display of media content and at least one interface element in the first interface 130, and migrate the media content and at least one interface element to the second interface 140 through the portal creation function. This prevents the same interface element from being displayed simultaneously in the main window and the small window, avoiding the problem of duplicate display.

[0077] Figure 9 shows a schematic structural block diagram of an interactive display device 900 according to some embodiments of the present disclosure. The device 900 may be implemented in or included in an electronic device 110, for example. The various modules / components in the device 900 may be implemented by hardware, software, firmware, or any combination thereof.

[0078] As shown in Figure 9, the device 900 may include a first presentation module 901, configured to present media content and multiple interface elements in a first interactive interface. An interface creation module 902 is configured to, in response to receiving an interface creation request in the first interactive interface, present a second interactive interface, which displays media content and at least one of the multiple interface elements. A state synchronization module 903 is configured to update the state of at least one interface element in the second interactive interface based on the state of the at least one interface element in the first interactive interface.

[0079] In some embodiments of this disclosure, the interface creation module 902 may be configured to: determine a target location in the second interactive interface based on the interface configuration information of the second interactive interface; and map the media content and at least one interface element in the first interactive interface to the second interactive interface based on the target location in the second interactive interface.

[0080] In some embodiments of this disclosure, the interface creation module 902 may be configured to render media content and at least one interface element in a second interactive interface based on the visual style of the first interactive interface.

[0081] In some embodiments of this disclosure, the shared information carrying node is configured to synchronize information between the second interactive interface and the first interactive interface. Based on this, the state synchronization module 903 can be configured to synchronize the state of at least one interface element in the first interactive interface to the second interactive interface via the shared information carrying node.

[0082] In some embodiments of this disclosure, the first interface element among at least one interface element is a non-interactive interface element with a dynamic state. Based on this, the state synchronization module 903 can be configured to dynamically update the state of at least one interface element in the second interactive interface based on the dynamic state of the first interface element.

[0083] In some embodiments of this disclosure, at least one of the interface elements is a second interface element that is interactive. Based on this, the state synchronization module 903 can be configured to: in response to detecting an interactive operation on the second interface element in the second interactive interface, execute an interactive function corresponding to the interactive operation. Based on the interaction result obtained from executing the interactive function, update the state of at least one interface element in the second interactive interface.

[0084] In some embodiments of this disclosure, the device 900 further includes a status feedback module. The status feedback module can be configured to synchronize the interaction result obtained from performing the interaction function to the first interactive interface.

[0085] In some embodiments of this disclosure, during the presentation of the second interactive interface, the position information of at least one interface element in the first interactive interface is stored. The apparatus 900 further includes an interface element restoration module. The interface element restoration module is configured to restore the presentation of at least one interface element in the first interactive interface in response to the closing of the second interactive interface.

[0086] In some embodiments of this disclosure, the apparatus 900 further includes a presentation update module. The presentation update module may be configured to: in response to the presentation of the second interactive interface, de-present at least one interface element in the first interactive interface.

[0087] In some embodiments of this disclosure, the second interactive interface is presented in a picture-in-picture format within the first interactive interface.

[0088] In some embodiments of this disclosure, the media content includes live streaming content.

[0089] Figure 10 illustrates a block diagram of an electronic device 1000 in which one or more embodiments of the present disclosure may be implemented. It should be understood that the electronic device 1000 shown in Figure 10 is merely exemplary and should not constitute any limitation on the functionality and scope of the embodiments described herein. The electronic device 1000 shown in Figure 10 may include or be implemented as the electronic device 110 of Figure 1 or the device 900 of Figure 9.

[0090] As shown in Figure 10, the electronic device 1000 is in the form of a general-purpose electronic device. Components of the electronic device 1000 may include, but are not limited to, one or more processors or processing units 1010, memory 1020, storage device 1030, one or more communication units 1040, one or more input devices 1050, and one or more output devices 1060. The processing unit 1010 may be a physical or virtual processor and is capable of performing various processes according to programs stored in memory 1020. In a multiprocessor system, multiple processing units execute computer-executable instructions in parallel to improve the parallel processing capability of the electronic device 1000.

[0091] Electronic device 1000 typically includes multiple computer storage media. Such media can be any accessible media that is accessible to electronic device 1000, including but not limited to volatile and non-volatile media, removable and non-removable media. Memory 1020 can be volatile memory (e.g., registers, cache, random access memory (RAM)), non-volatile memory (e.g., read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory), or some combination thereof. Storage device 1030 can be removable or non-removable media and may include machine-readable media, such as flash drives, disks, or any other media that can be used to store information and / or data and can be accessed within electronic device 1000.

[0092] Electronic device 1000 may further include additional removable / non-removable, volatile / non-volatile storage media. Although not shown in FIG. 10, disk drives for reading from or writing to removable, non-volatile disks (e.g., "floppy disks") and optical disk drives for reading from or writing to removable, non-volatile optical disks may be provided. In these cases, each drive may be connected to a bus (not shown) via one or more data media interfaces. Memory 1020 may include computer program product 1025 having one or more program modules configured to perform various methods or actions of various embodiments of this disclosure.

[0093] The communication unit 1040 enables communication with other electronic devices via a communication medium. Additionally, the functionality of the components of the electronic device 1000 can be implemented using a single computing cluster or multiple computing machines capable of communicating via communication connections. Therefore, the electronic device 1000 can operate in a networked environment using logical connections to one or more other servers, network personal computers (PCs), or another network node.

[0094] Input device 1050 can be one or more input devices, such as a mouse, keyboard, trackball, etc. Output device 1060 can be one or more output devices, such as a monitor, speaker, printer, etc. Electronic device 1000 can also communicate with one or more external devices (not shown) via communication unit 1040 as needed. These external devices include storage devices, display devices, etc., and can communicate with one or more devices that enable user interaction with electronic device 1000, or with any device that enables electronic device 1000 to communicate with one or more other electronic devices (e.g., network card, modem, etc.). Such communication can be performed via input / output (I / O) interface (not shown).

[0095] According to an exemplary implementation of this disclosure, a computer-readable storage medium is provided that stores computer-executable instructions thereon, wherein the computer-executable instructions are executed by a processor to implement the methods described above. According to an exemplary implementation of this disclosure, a computer program product is also provided, which is tangibly stored on a non-transitory computer-readable medium and includes computer-executable instructions, which are executed by a processor to implement the methods described above.

[0096] According to an exemplary implementation of this disclosure, a computer program product or computer program is provided, 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 executes the computer instructions, causing the computer device to perform the methods provided in the various alternative embodiments of FIG3, which will therefore not be described further herein.

[0097] Various aspects of this disclosure are described herein with reference to flowchart illustrations and / or block diagrams of methods, apparatuses, devices, and computer program products implemented according to this disclosure. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer-readable program instructions.

[0098] These computer-readable program instructions can be provided to a processing unit of a general-purpose computer, a special-purpose computer, or other programmable data processing apparatus to produce a machine such that, when executed by the processing unit of the computer or other programmable data processing apparatus, they create means for implementing the functions / actions specified in one or more blocks of the flowchart and / or block diagram. These computer-readable program instructions can also be stored in a computer-readable storage medium that causes a computer, programmable data processing apparatus, and / or other device to operate in a particular manner. Thus, the computer-readable medium storing the instructions comprises an article of manufacture that includes instructions for implementing aspects of the functions / actions specified in one or more blocks of the flowchart and / or block diagram.

[0099] Computer-readable program instructions can be loaded onto a computer, other programmable data processing apparatus, or other device to cause a series of operational steps to be performed on the computer, other programmable data processing apparatus, or other device to produce a computer-implemented process, thereby causing the instructions that execute on the computer, other programmable data processing apparatus, or other device to perform the functions / actions specified in one or more boxes of a flowchart and / or block diagram.

[0100] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of an instruction, which contains one or more executable instructions for implementing the specified logical function. In some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutive blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, may be implemented using a dedicated hardware-based system that performs the specified function or action, or using a combination of dedicated hardware and computer instructions.

[0101] Various implementations of this disclosure have been described above. These descriptions are exemplary and not exhaustive, nor are they limited to the disclosed implementations. Many modifications and variations will be apparent to those skilled in the art without departing from the scope and spirit of the described implementations. The terminology used herein is chosen to best explain the principles, practical applications, or improvements to technology in the market, or to enable others skilled in the art to understand the various implementations disclosed herein.

Claims

1. A method for interactive display, comprising: The first interactive interface presents media content and multiple interface elements; In response to receiving an interface creation request on the first interactive interface, a second interactive interface is presented, the second interactive interface being presented with the media content and at least one of the plurality of interface elements; as well as Based on the state of the at least one interface element in the first interactive interface, update the state of the at least one interface element in the second interactive interface.

2. The method according to claim 1, wherein presenting the second interactive interface includes: Based on the interface configuration information of the second interactive interface, the target location in the second interactive interface is determined; as well as Based on the target location in the second interactive interface, the media content and at least one interface element in the first interactive interface are mapped to the second interactive interface.

3. The method according to claim 1 or 2, wherein presenting the second interactive interface includes: Based on the visual style of the first interactive interface, the media content and the at least one interface element are rendered in the second interactive interface.

4. The method according to any one of claims 1 to 3, wherein the shared information carrying node is configured to synchronize information between the second interactive interface and the first interactive interface, and wherein updating the state of the at least one interface element in the second interactive interface includes: The state of at least one interface element in the first interactive interface is synchronized to the second interactive interface via the shared information carrying node.

5. The method according to any one of claims 1 to 4, wherein the first interface element among the at least one interface element is a non-interactive interface element with a dynamic state, and updating the state of the at least one interface element in the second interactive interface includes: Based on the dynamic state of the first interface element, the state of the at least one interface element in the second interactive interface is dynamically updated.

6. The method according to any one of claims 1 to 5, wherein the second interface element among the at least one interface element is an interactive interface element, and updating the state of the at least one interface element in the second interactive interface comprises: In response to detecting an interactive operation on an element of the second interface in the second interactive interface, the interactive function corresponding to the interactive operation is executed; Based on the interaction result obtained from executing the interaction function, update the state of the at least one interface element in the second interactive interface.

7. The method according to claim 6, further comprising: The interaction result obtained from executing the interactive function is synchronized to the first interactive interface.

8. The method according to any one of claims 1 to 7, wherein the position information of the at least one interface element in the first interactive interface is stored during the presentation of the second interactive interface, the method further comprising: In response to the closing of the second interactive interface, the at least one interface element is restored to be displayed in the first interactive interface.

9. The method according to claim 8, further comprising: In response to the presentation of the second interactive interface, the presentation of at least one interface element is canceled in the first interactive interface.

10. The method according to any one of claims 1 to 9, wherein the second interactive interface is presented in a picture-in-picture format within the first interactive interface.

11. The method according to any one of claims 1 to 10, wherein the media content includes live content.

12. An apparatus for interactive display, comprising: The first presentation module is configured to present media content and multiple interface elements in the first interactive interface; The interface creation module is configured to present a second interactive interface in response to receiving an interface creation request on the first interactive interface, wherein the second interactive interface presents the media content and at least one of the plurality of interface elements. as well as The state synchronization module is configured to update the state of the at least one interface element in the second interactive interface based on the state of the at least one interface element in the first interactive interface.

13. An electronic device, comprising: At least one processor; as well as At least one memory coupled to the at least one processor and storing instructions for execution by the at least one processor, the instructions causing the electronic device to perform the method according to any one of claims 1 to 11 when executed by the at least one processor.

14. A computer-readable storage medium having stored thereon computer-executable instructions that can be executed by a processor to implement the method according to any one of claims 1 to 11.

15. A computer program product comprising computer-executable instructions that, when executed by a processor, implement the method of any one of claims 1 to 11.

Images