Display method and device of interactive picture, storage medium and electronic equipment

Abstract

The invention discloses an interactive picture display method and device, a storage medium and electronic equipment. The method comprises the following steps: acquiring a target media resource to be displayed; under the condition that the first display state of the display interface is not matched with the second display state corresponding to the target media resource, creating a first display layer in the display interface according to the second display state, and creating a second display layer on the first display layer; the target interaction picture is displayed in a display interface in an overlapped mode according to the media picture of the target media resource and the interaction element, the media picture is displayed in a full screen mode in the first display layer according to the display mode indicated by the second display state, and the interaction element is displayed in the second display layer corresponding to the media picture; and in response to the interaction operation, updating and displaying the target interaction picture in the display interface according to the adjusted interaction element. According to the method and the device, the technical problem of relatively poor interaction effect in the process of displaying the interaction picture in related technologies is solved.

Description

Technical Field

[0001] The present invention relates to the field of computers, and in particular to a method and device for displaying an interactive screen, a storage medium and an electronic device. Background Art

[0002] With the advancement of technology, users can obtain and watch interactive videos, and interact with the interactive video screen through interactive operations during the video viewing process. In the process of local playback of interactive videos, the relevant technology usually determines the playback state of the interactive video according to the current display state of the user terminal. For example, if the current user terminal is in a horizontal screen display state, the interactive video is played in a horizontal screen style; if the current user terminal is in a vertical screen display state, the interactive video is played in a vertical screen display state.

[0003] However, the screen display state of the interactive video itself and the display state of the user terminal may easily become inconsistent, which may lead to the playing of vertical screen video in the horizontal screen display state of the terminal, or the playing of horizontal screen video in the vertical screen display state, which seriously affects the actual display area of ​​the interactive video and causes technical problems such as poor interaction effect when the user interacts with the interactive screen.

[0004] To address the above-mentioned problems, no effective solution has been proposed yet. Summary of the invention

[0005] The embodiments of the present invention provide a method and device for displaying an interactive screen, a storage medium and an electronic device, so as to at least solve the technical problem of poor interactive effect existing in the process of displaying an interactive screen in the related art.

[0006] According to one aspect of an embodiment of the present invention, a method for displaying an interactive screen is provided, comprising: acquiring a target media resource to be displayed; when a first display state of a display interface does not match a second display state corresponding to the target media resource, creating a first display layer in the display interface according to the second display state, and creating a second display layer on top of the first display layer, wherein the first display state and the second display state include a horizontal screen state and a vertical screen state; displaying a target interactive screen in the display interface by superimposing a media screen and an interactive element of the target media resource, wherein the media screen is displayed in full screen in the first display layer according to a display mode indicated by the second display state, and the interactive element is displayed in the second display layer corresponding to the media screen; in response to an interactive operation, updating and displaying the target interactive screen in the display interface according to the adjusted interactive element.

[0007] According to another aspect of an embodiment of the present invention, a display device for an interactive screen is also provided, including: an acquisition unit, used to acquire a target media resource to be displayed; a creation unit, used to create a first display layer in the display interface according to the second display state, and create a second display layer on the first display layer when a first display state of the display interface does not match a second display state corresponding to the target media resource, wherein the first display state and the second display state include a horizontal screen state and a vertical screen state; an overlay display unit, used to overlay and display a target interactive screen in the display interface according to the media screen and interactive elements of the target media resource, wherein the media screen is displayed in full screen in the first display layer according to the display mode indicated by the second display state, and the interactive elements are displayed in the second display layer corresponding to the media screen; an update unit, used to update and display the target interactive screen in the display interface according to the adjusted interactive elements in response to an interactive operation.

[0008] According to another aspect of the embodiments of the present invention, a computer-readable storage medium is provided, in which a computer program is stored, wherein the computer program is configured to execute the above-mentioned interactive screen display method when running.

[0009] According to another aspect of the embodiments of the present application, a computer program product is provided, the computer program product comprising a computer program / instruction, the computer instruction being stored in a computer-readable storage medium. A processor of a computer device reads the computer program / instruction from the computer-readable storage medium, and the processor executes the computer program / instruction, so that the computer device executes the above interactive screen display method.

[0010] According to another aspect of an embodiment of the present invention, there is provided an electronic device, including a memory and a processor, wherein the memory stores a computer program, and the processor is configured to execute the interactive screen display method through the computer program.

[0011] In an embodiment of the present invention, a target media resource to be displayed is obtained; when a first display state of a display interface does not match a second display state corresponding to the target media resource, a first display layer is created in the display interface according to the second display state, and a second display layer is created on top of the first display layer, wherein the first display state and the second display state include a horizontal screen state and a vertical screen state; a target interactive screen is displayed in the display interface in an overlay manner according to a media screen and interactive elements of the target media resource, wherein the media screen is displayed in full screen in the first display layer according to a display mode indicated by the second display state, and the interactive elements are displayed in the second display layer corresponding to the media screen; in response to an interactive operation, the target interactive screen is updated and displayed in the display interface according to the adjusted interactive elements, thereby achieving the creation of a corresponding display layer according to the display state corresponding to the target media resource when the display state of the current display interface is inconsistent with the display state corresponding to the target media resource, thereby achieving the effect of displaying the media resource in the application interface according to the display mode corresponding to the target media resource.

[0012] Through the above-mentioned implementation mode of the present application, when the display state of the current display interface is inconsistent with the display state corresponding to the target media resource, a first display layer for displaying the media screen is created according to the display state actually corresponding to the target media resource, and a second display layer for displaying the interactive elements matching the media screen is created on the first display layer, thereby achieving full-screen display of the media screen and the interactive elements on the terminal according to the display state corresponding to the target media resource, thereby improving the utilization rate of the display interface, facilitating the user to trigger the display of updated and adjusted interactive elements through the entire display interface, solving the technical problem of poor interactive effect in the display process of the existing interactive screen, and improving the interactive effect in the process of displaying the target media resources. BRIEF DESCRIPTION OF THE DRAWINGS

[0013] The drawings described herein are used to provide a further understanding of the present invention and constitute a part of this application. The exemplary embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation of the present invention. In the drawings:

[0014] Figure 1 is a schematic diagram of a hardware environment of an optional method for displaying an interactive screen according to an embodiment of the present invention;

[0015] Figure 2 is a flow chart of an optional method for displaying an interactive screen according to an embodiment of the present invention;

[0016] Figure 3 is a schematic diagram of an optional method for displaying an interactive screen according to an embodiment of the present invention;

[0017] Figure 4is a schematic diagram of another optional method for displaying an interactive screen according to an embodiment of the present invention;

[0018] Figure 5 is a schematic diagram of another optional method for displaying an interactive screen according to an embodiment of the present invention;

[0019] Figure 6 is a schematic diagram of another optional method for displaying an interactive screen according to an embodiment of the present invention;

[0020] Figure 7 is a schematic diagram of another optional method for displaying an interactive screen according to an embodiment of the present invention;

[0021] Figure 8 is a schematic diagram of another optional method for displaying an interactive screen according to an embodiment of the present invention;

[0022] Fig. 9 is a schematic diagram of another optional method for displaying an interactive screen according to an embodiment of the present invention;

[0023] Fig.10 is a flowchart of another optional method for displaying an interactive screen according to an embodiment of the present invention;

[0024] Fig.11 is a schematic diagram of another optional method for displaying an interactive screen according to an embodiment of the present invention;

[0025] Fig.12 is a schematic structural diagram of an optional interactive screen display device according to an embodiment of the present invention;

[0026] Fig.13 It is a schematic diagram of the structure of an optional electronic device according to an embodiment of the present invention. DETAILED DESCRIPTION

[0027] In order to enable those skilled in the art to better understand the scheme of the present invention, the technical scheme in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of the present invention.

[0028] It should be noted that the terms "first", "second", etc. in the specification and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" 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 that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0029] According to one aspect of an embodiment of the present invention, a method for displaying an interactive screen is provided. As an optional implementation, the method for displaying an interactive screen can be applied to, but is not limited to, Figure 1 The interactive screen display system in the hardware environment shown in FIG. 1 includes, but is not limited to, a terminal device 102, a network 104, a server 106, and a database 108. The terminal device 102 runs a target media playback client (such as Figure 1 As shown, the target client is an interactive media resource player. The terminal device 102 includes a human-computer interaction screen, a processor and a memory. The human-computer interaction screen is used to display the application interface and the interactive operation results (such as Figure 1 The processor is used to generate an interactive instruction in response to the above human-computer interactive operation and send the interactive instruction to the server. The memory is used to store relevant attribute data.

[0030] In addition, the server 106 includes a processing engine, which is used to perform a storage or reading operation on the database 108. Specifically, the processing engine reads the target media resource corresponding to the resource acquisition request from the database 108.

[0031] Assumptions Figure 1 The terminal device 102 is a terminal running the above-mentioned target media playback client. The specific process of this embodiment is as follows: in step S102, the terminal device 102 sends a media resource acquisition request to the server 106 through the network 104; then the server 106 executes step S104 and sends the target media resource to the terminal device 102 through the network 104;

[0032] Then the terminal device 102 executes steps S106 to S112 to obtain the target media resource to be displayed; when the first display state of the display interface does not match the second display state corresponding to the target media resource, a first display layer is created in the display interface according to the second display state, and a second display layer is created on the first display layer, wherein the first display state and the second display state include a horizontal screen state and a vertical screen state; in the display interface, a target interactive screen is displayed by superimposing the media screen and interactive elements of the target media resource, wherein the media screen is displayed in full screen in the first display layer according to the display mode indicated by the second display state, and the interactive elements are displayed in the second display layer corresponding to the media screen; in response to the interactive operation, the target interactive screen is updated and displayed in the display interface according to the adjusted interactive elements.

[0033] As an optional implementation, when the terminal device 102 has relatively powerful computing and storage capabilities, the target media resources may also be media resources locally acquired by the terminal device 102. This is an example, and this embodiment does not impose any limitation on this.

[0034] Optionally, in this embodiment, the terminal device may be a terminal device configured with a target client, which may include but is not limited to at least one of the following: a mobile phone (such as an Android phone, an iOS phone, etc.), a laptop, a tablet computer, a PDA, a MID (Mobile Internet Devices), a PAD, a desktop computer, a smart TV, etc. The target client may be a video client, an instant messaging client, a browser client. The network may include but is not limited to: a wired network, a wireless network, wherein the wired network includes: a local area network, a metropolitan area network and a wide area network, and the wireless network includes: Bluetooth, WIFI and other networks that implement wireless communication. The server may be a single server, or a server cluster consisting of multiple servers, or a cloud server. The above is only an example, and this embodiment does not impose any limitation on this.

[0035] In an embodiment of the present invention, a target media resource to be displayed is obtained; when a first display state of a display interface does not match a second display state corresponding to the target media resource, a first display layer is created in the display interface according to the second display state, and a second display layer is created on top of the first display layer, wherein the first display state and the second display state include a horizontal screen state and a vertical screen state; a target interactive screen is displayed in the display interface in an overlay manner according to a media screen and interactive elements of the target media resource, wherein the media screen is displayed in full screen in the first display layer according to a display mode indicated by the second display state, and the interactive elements are displayed in the second display layer corresponding to the media screen; in response to an interactive operation, the target interactive screen is updated and displayed in the display interface according to the adjusted interactive elements, thereby achieving the creation of a corresponding display layer according to the display state corresponding to the target media resource when the display state of the current display interface is inconsistent with the display state corresponding to the target media resource, thereby achieving the effect of displaying the media resource in the application interface according to the display mode corresponding to the target media resource.

[0036] Through the above-mentioned implementation mode of the present application, when the display state of the current display interface is inconsistent with the display state corresponding to the target media resource, a first display layer for displaying the media screen is created according to the display state actually corresponding to the target media resource, and a second display layer for displaying the interactive elements matching the media screen is created on the first display layer, thereby achieving full-screen display of the media screen and the interactive elements on the terminal according to the display state corresponding to the target media resource, thereby improving the utilization rate of the display interface, facilitating the user to trigger the display of updated and adjusted interactive elements through the entire display interface, solving the technical problem of poor interactive effect in the display process of the existing interactive screen, and improving the interactive effect in the process of displaying the target media resources.

[0037] As an optional implementation, Figure 2 As shown, the above interactive screen display method can be applied to a client for playing interactive media resources, including the following steps:

[0038] S202, obtaining a target media resource to be displayed;

[0039] S204, when the first display state of the display interface does not match the second display state corresponding to the target media resource, create a first display layer in the display interface according to the second display state, and create a second display layer on the first display layer, wherein the first display state and the second display state include a horizontal screen state and a vertical screen state;

[0040] S206, displaying the target interactive picture in the display interface in an overlay manner according to the media picture and the interactive element of the target media resource, wherein the media picture is displayed in full screen in the first display layer according to the display mode indicated by the second display state, and the interactive element is displayed in the second display layer corresponding to the media picture;

[0041] S208, in response to the interactive operation, updating and displaying the target interactive screen in the display interface according to the adjusted interactive elements.

[0042] It should be noted that, in this embodiment, the target media resource to be displayed in the above step S202 can be an interactive media resource, for example, it can be an interactive video resource, or it can be an interactive picture resource. In this embodiment, the resource type of the above target media resource is not limited.

[0043] Optionally, the above steps can be applied to, including but not limited to, game scenes. In a preferred embodiment, the above implementation steps can be applied to a film game interactive scene, in which the player can control the next media resource to be played by touching the media resources played in the display interface. For example, in a specific embodiment, when a player triggers an interactive film game, the display state of the current display interface is detected (for example, it can be detected as a vertical screen display state). When the display state of the current interface does not match the optimal display state (horizontal screen display state) corresponding to the above interactive film game, the media screen in the above interactive film game is displayed in full screen through the above steps S204 to S206. Then, in response to the interactive operation triggered by the user, the target interactive screen is updated in the above full-screen display interface according to the adjusted interactive elements, that is, the game screen displayed in full screen in the current display interface. The above interactive film game can specifically include but is not limited to a role-playing type game, a decryption type game, an adventure type game, etc. This embodiment does not limit the specific type of the above interactive film game.

[0044] In an optional manner, the target media resource may carry a media screen for direct display (such as a video screen, a picture screen) and an interactive element corresponding to the media screen, which can be updated in response to interactive operations. The target media resource may also include an update method for the interactive element in response to different interactive operations. In another optional manner, the interactive element corresponding to the media screen of the target media resource may be saved locally first, and the update method for the interactive element in response to different interactive operations may be pre-configured locally.

[0045] Furthermore, in the above step S204, the first display state of the above display interface and the second display state corresponding to the target media resource may include a horizontal screen state and a vertical screen state. For example, when the above display interface is in the vertical screen state, the display width of the above display interface may be smaller than the display height, for example, the display aspect ratio of the display interface in the vertical screen state may be 9:16; the display state corresponding to the above target media resource may be used to indicate the display state of the display interface to which the screen of the media screen included in the target media resource is adapted, for example, when the display interface to which the screen of the media screen included in the above target media resource is adapted is in the horizontal screen state, the screen aspect ratio of the media screen included in the above target media resource may be 16:9.

[0046] Furthermore, the situation where the first display state of the display interface does not match the second display state corresponding to the target media resource may include but is not limited to the following situations:

[0047] The current display interface is in a horizontal state, and the media images included in the target media resource are adapted to the display interface in a vertical state; Figure 3 As shown in FIG. (a), the display interface 301 is in a horizontal display state, and the screen corresponding to the media screen 302 is a vertical screen. Furthermore, when the display interface directly displays the media screen, as shown in the display interface 303, the media screen can only occupy a small part of the display interface 303;

[0048] The current display interface is in a vertical screen state, and the media screen included in the target media resource is adapted to the display interface in a horizontal screen state; Figure 3 As shown in FIG. (b), the display interface 304 is in a vertical display state, and the screen corresponding to the media screen 305 is a horizontal screen. Furthermore, when the display interface directly displays the media screen, as shown in the display interface 306, the media screen can only occupy a small part of the display interface 306;

[0049] Furthermore, because the target media resource is an interactive media resource, when the screen corresponding to the interactive media resource is displayed in the display interface 303 or the display interface 306, the interactive area occupies a very small part of the interface, and the interactive elements are not displayed clearly due to the compression of the interface. Therefore, there are technical problems such as inconvenient interactive operation and poor interactive effect.

[0050] In the above step S204, a first display layer for displaying the media screen may be created according to the actual display state corresponding to the target media resource, and a second display layer for displaying the interactive element may be created by overlaying the first display layer.

[0051] Next, in step S206, the target interactive screen is displayed in a display interface by overlaying the media screen and the interactive element of the target media resource.

[0052] First, the types of the above-mentioned interactive elements are described. In this embodiment, the above-mentioned interactive elements are image elements drawn and displayed in the second display layer. For example, the above-mentioned interactive elements may include but are not limited to a cartoon image, a decorative image (such as a firework image, a cloud image), etc. The above-mentioned interactive element may also be a solid color image, for example, it may be a color block set to a target grayscale. In this embodiment, the element type of the above-mentioned interactive elements is not limited.

[0053] It is understandable that, in this embodiment, the above-mentioned superimposed interactive elements can be displayed in the second display layer corresponding to the media screen. The above-mentioned corresponding relationship may include but is not limited to: the media image in the first display layer is overlaid and displayed in the second display layer; when there are multiple interactive elements, the multiple image objects included in the media image are correspondingly superimposed and displayed; in this embodiment, the specific method of the above-mentioned corresponding display is not limited.

[0054] Finally, in response to the interactive operation, the target interactive screen is updated and displayed in the display interface according to the adjusted interactive elements. It can be understood that in this embodiment, the user's interactive operation instruction can be received, and the interactive elements in the second display layer can be dynamically adjusted and displayed according to different interactive operation instructions, and then the target interactive screen responds to the change of the interactive operation by superimposing the change of the interactive elements displayed on the media image.

[0055] The following combination Figure 4 , Figure 5 A specific example of the above-mentioned embodiment will be described.

[0056] like Figure 4 As shown in FIG. 4( a ), the current display interface 401 is in a vertical state; Figure 4 As shown in FIG. 5( b) of FIG. 5 , the display state corresponding to the media screen 402 in the acquired target media resource is the horizontal screen state. In this embodiment, the first display layer 403 in the horizontal screen state is created according to the display state corresponding to the media screen 402. Figure 4 As shown in FIG. 5( c ), in order to fully display the first display layer 403 in the display interface 401 , the first display layer 403 may be rotated 90° and then superimposed on the display interface 401 ; then a corresponding second display layer 404 may be created on the first display layer 403 .

[0057] Then as Figure 5 As shown, Figure 5In FIG. 4( a ), the media screen is displayed in full screen on the first display layer 403, and the interactive element is displayed correspondingly on the second display layer 404. In this embodiment, the interactive element displayed on the second display layer 404 is a grayscale block element displayed in full screen, and its transparency is the target value; Figure 5 Figure (b) shows the display effect of the target interactive screen after the first display layer and the second display layer are sequentially superimposed on the display interface, that is, due to the occlusion of the grayscale blocks on the second display layer, the clarity of the media screen displayed on the first display layer is reduced; then in response to the interactive operation, the interface displays as shown in FIG. Figure 5 As shown in Figure (c), the transparency of the grayscale color blocks on the second display layer is adjusted, thereby improving the transparency of the grayscale color blocks on the second display layer and reducing the occlusion effect of the grayscale color blocks on the second display layer, thereby achieving an update display of the target interactive screen on the display interface in response to the interactive operation.

[0058] In an embodiment of the present invention, a target media resource to be displayed is obtained; when a first display state of a display interface does not match a second display state corresponding to the target media resource, a first display layer is created in the display interface according to the second display state, and a second display layer is created on top of the first display layer, wherein the first display state and the second display state include a horizontal screen state and a vertical screen state; a target interactive screen is displayed in the display interface in an overlay manner according to a media screen and interactive elements of the target media resource, wherein the media screen is displayed in full screen in the first display layer according to a display mode indicated by the second display state, and the interactive elements are displayed in the second display layer corresponding to the media screen; in response to an interactive operation, the target interactive screen is updated and displayed in the display interface according to the adjusted interactive elements, thereby achieving the creation of a corresponding display layer according to the display state corresponding to the target media resource when the display state of the current display interface is inconsistent with the display state corresponding to the target media resource, thereby achieving the effect of displaying the media resource in the application interface according to the display mode corresponding to the target media resource.

[0059] Through the above-mentioned implementation mode of the present application, when the display state of the current display interface is inconsistent with the display state corresponding to the target media resource, a first display layer for displaying the media screen is created according to the display state actually corresponding to the target media resource, and a second display layer for displaying the interactive elements matching the media screen is created on the first display layer, thereby achieving full-screen display of the media screen and the interactive elements on the terminal according to the display state corresponding to the target media resource, thereby improving the utilization rate of the display interface, facilitating the user to trigger the display of updated and adjusted interactive elements through the entire display interface, solving the technical problem of poor interactive effect in the display process of the existing interactive screen, and improving the interactive effect in the process of displaying the target media resources.

[0060] In an optional implementation, in response to the interactive operation, the target interactive screen is updated and displayed in the display interface according to the updated interactive element:

[0061] S1, obtaining the target display area indicated by the interactive operation;

[0062] S2, adjusting the interactive elements in the target display area in the second display layer;

[0063] S3, updating and displaying the target interactive screen in the display interface according to the adjusted interactive elements.

[0064] It is understandable that, in this embodiment, the above-mentioned method of updating and displaying the target interactive screen according to the interactive operation can be to update and adjust the display of the interactive elements in the corresponding display area according to the target display area indicated by the target interactive operation. Then, by updating and displaying the interactive elements on the second display layer on the media screen, the entire target interactive screen is updated and displayed.

[0065] In an optional implementation, the adjusting of the interactive elements in the display target display area in the second display layer includes one of the following:

[0066] Method 1: when the element transparency of the interactive element is less than or equal to the target transparency, the transparency of the interactive element in the target display area is increased in the second display layer;

[0067] Method 2: when the element transparency of the interactive element is greater than or equal to the target transparency, the transparency of the interactive element in the target display area is reduced in the second display layer.

[0068] It is understandable that, in the above-mentioned implementation, the method for adjusting the interactive element may be to adjust the transparency of the interactive element in the target display area. For example, in the above-mentioned first method, the element transparency of the above-mentioned interactive element is less than or equal to the target transparency, that is, it is a display element that can block the media screen element in the first display layer. Through the above-mentioned first adjustment method, the transparency of the interactive element in the target display area can be improved, so that the corresponding part of the originally covered media image can be highlighted or displayed more clearly; in the above-mentioned second method, the element transparency of the above-mentioned interactive element is greater than or equal to the target transparency, that is, it is a display element that can block the media screen element in the first display layer. Through the above-mentioned second adjustment method, the transparency of the interactive element in the target display area can be reduced, so as to deepen the occlusion of the corresponding image area of ​​the corresponding media image.

[0069] In an optional embodiment, the above-mentioned method for adjusting the display may also include: Mode three, adding a reference interactive element to the target display area in the second display layer; it is understandable that, in the embodiment, the target interactive screen can be adjusted by adding a reference interactive element to the target display area in response to the interactive operation; for example, the above-mentioned reference interactive element may be a newly displayed decorative element, color element, character element, object element, etc.

[0070] Method 4: Move the interactive elements in the second display layer to the target display area for display; it can be understood that, in an embodiment, the interactive elements in the second display layer can be moved to the target display area for display in response to the interactive operation, so as to achieve the adjustment and display of the target interactive screen; for example, the above-mentioned decorative elements, color elements, character elements, object elements and other display elements can be dynamically moved and displayed.

[0071] The following combination Figure 6 The first adjustment method mentioned above is explained below. Figure 6 In the figure (a), the interactive element displayed in the second display layer in this embodiment is a gray block set to a target transparency. The prompt message "Slide Display" is displayed in the current interface, indicating that the sequential display of three objects in the media image can be triggered by a slide operation.

[0072] like Figure 6 In (a), in response to the current touch indication icon being located at the current position, the image area where the first object on the left side of the media screen is located is determined as the target area, and then the transparency of the color block in the target area is adjusted to clearly and prominently display the first object;

[0073] like Figure 6 In (b), in response to the current touch indication icon being located at the current position, the image area where the second object in the media screen is located is determined as the target area, and then the transparency of the color block in the target area is adjusted to clearly and prominently display the second object;

[0074] like Figure 6 In Figure (c), in response to the current touch indication icon being located at the current position, the image area where the third object in the media screen is located is determined to be the target area, and then the transparency of the color block in the target area is adjusted to clearly and prominently display the third object.

[0075] Through the above-mentioned implementation mode of the present application, when the element transparency of the interactive element is less than or equal to the target transparency, the transparency of the interactive element in the target display area is increased in the second display layer, thereby achieving highlighting or more clear display of the part corresponding to the originally covered media image, thereby improving the interactive effect of the above-mentioned interactive screen.

[0076] In an optional embodiment, when the first display layer is created in the display interface according to the second display state and the second display layer is created above the first display layer, it also includes: creating an interactive operation layer above the second display layer, wherein the interactive operation layer is used to determine the corresponding interactive operation according to the received touch operation.

[0077] It is understandable that, in this embodiment, an interactive operation layer for receiving touch operations may be further created on the second display layer, and then the operation type of the corresponding interactive operation may be determined in response to the user's touch operation.

[0078] In an optional implementation manner, after the interactive operation layer is created on the second display layer, the method further includes:

[0079] S1, displaying interactive prompt information in a target interactive screen, wherein the interactive prompt information is used to indicate an operation type and an operation attribute of a touch operation corresponding to the interactive operation;

[0080] S2, determining the interactive operation according to the operation type and operation attribute of the touch operation received by the interactive operation layer.

[0081] It is understandable that in this embodiment, different types of touch operations received in the interactive operation layer may correspond to different interactive operations. For example, a click operation may correspond to the interactive operation "adjusting the transparency of the screen"; a sliding operation in the first direction may correspond to the interactive operation "displaying the screen objects in the media screen in sequence in the first direction"; a long press operation with a pressing force greater than the target force threshold may correspond to the interactive operation "adding an interactive element to the second display layer". In this embodiment, the specific method for determining the operation type of the interactive operation is not limited.

[0082] Through the above-mentioned implementation mode of the present application, interactive prompt information is displayed in the target interactive screen, wherein the interactive prompt information is used to indicate the operation type and operation attributes of the touch operation corresponding to the interactive operation; the interactive operation is determined according to the operation type and operation attributes of the touch operation received by the interactive operation layer, thereby accurately determining the operation type of the interactive operation according to the interactive operation layer.

[0083] In an optional embodiment, the above-mentioned response to the interactive operation, after updating the display of the target interactive screen in the display interface according to the adjusted interactive elements, also includes: in response to the adjustment operation of the display size of the target interactive screen, the display sizes of the first display layer and the second display layer are synchronously adjusted according to the adjustment operation, and the detection size of the interactive operation layer is synchronously adjusted according to the adjustment operation.

[0084] It is understandable that, in this embodiment, in addition to updating the target interactive screen by updating the interactive elements in the second display layer, the display size of the entire target interactive screen can also be adjusted as a whole, for example, increasing the display size, reducing the display size, etc. Correspondingly, in order to provide accurate interactive effects under different display sizes, in this embodiment, the display sizes of the first display layer and the second display layer can also be adjusted synchronously according to the adjustment operation, and the detection size of the interactive operation layer can be adjusted synchronously according to the adjustment operation, so as to achieve accurate response to the interactive operation after the size adjustment, and improve the interactive effect of the interactive screen.

[0085] In an optional implementation manner, before obtaining the target media resource to be displayed, the method further includes:

[0086] S1, displaying a target control for triggering the display interface to enter a target display mode, wherein the display interface in the target display mode will display the target media resource in full screen according to a display state corresponding to the target media resource to be displayed;

[0087] S2, in response to a triggering operation on a target control, determining that the display interface is in a target display mode.

[0088] It should be noted that in the above-mentioned implementation mode of the present application, two methods of triggering the above-mentioned display state can be provided; in the first method, the media screen and interactive elements can be displayed in the display interface by default according to the second display state corresponding to the target media resource; in the second method, a display target control can be provided, and the display interface can be adjusted to the display mode corresponding to the control, that is, no matter whether the orientation of the user's mobile phone is landscape or portrait, no matter whether the user turns on the function of automatically rotating the mobile phone screen, the page display is forced to be displayed in full screen according to the display mode corresponding to the media resource.

[0089] The following combination Figure 7 , 8 , 9 describes a specific implementation method of an interactive video.

[0090] like Figure 7As shown, the stacking relationship between a specific display layer is explained. In the application scenario of interactive video, the upper layer of the video layer (i.e., the first display layer) has a mask layer (i.e., the second display layer mentioned above), which draws content in the user's operation area, and an interactive operation layer, which is the user's operation area. The mask layer and the interactive operation layer area are covered and stacked according to the size of the video layer, and the content in the mask layer and the interactive operation layer and the content position in the video layer are accurately positioned.

[0091] For interactive videos, if the page that users see is a maximum visible area, then the best user experience can be provided to users. In other words, a full-screen display effect is required to ensure the interactive experience of the interactive video. Therefore, if the interactive video is a horizontal screen video, the interactive video needs to be displayed horizontally in the interface, and then displayed in the largest visible area of ​​the device. At the same time, the mask layer and the interactive operation layer should also be kept the same size as the video layer, ultimately achieving the best user experience effect.

[0092] like Figure 8 As shown, the display effect of the interactive video in the horizontal screen: when the user moves in the prompt direction (X-axis) in the interactive operation layer during the interactive experience, it will affect the transparency of the mask layer area, so as to achieve an experience effect of showing one by one in accordance with the prompt direction. For example, when the drag control 803 is in the current drag position, multiple screen elements including screen element 801 in the screen can be highlighted. The implementation method may be to increase the transparency of the interactive element (for example, a mask element) corresponding to the area where the screen element 801 is located, thereby weakening the mask of the area, and highlighting the screen element 801. It can be understood that when the drag control 803 continues to be dragged, the area corresponding to the screen element 802 can be highlighted. Figure 8 In the video, the mask layer and the video are positioned one by one. In addition, when the device size is adjusted, the video layer, mask layer, and interactive operation layer will be adjusted synchronously to achieve accurate positioning.

[0093] like Fig. 9 It is a display effect in vertical screen: when the user locks the vertical screen experience, when the interactive operation layer moves in the prompt direction (Y axis), it will affect the transparency of the mask layer area, so as to achieve the experience effect of showing one by one in line with the prompt direction. The positions of the mask layer and the video are positioned one by one. When the device size is adjusted, the video layer, mask layer, and interactive operation layer will be adjusted synchronously to achieve precise positioning.

[0094] As above Fig. 9In the example, when the user rotates the screen, the final video layer and drawing layer are always presented in a maximized full-screen format for the user. After the interactive operation layer processes the user's operation, it can operate the horizontal screen events on the vertical screen, thereby improving the interactive effect of the interactive screen.

[0095] In an optional implementation, the creating the first display layer in the display interface according to the second display state includes:

[0096] S1, creating a first display layer according to the picture aspect ratio indicated by the second display state;

[0097] S2, rotating the first display layer by 90° to obtain a first display layer that matches the display aspect ratio of the display interface.

[0098] In an optional implementation, the creating of the second display layer on the first display layer includes: creating the second display layer according to the screen aspect ratio indicated by the first display state, to obtain the second display layer on the first display layer.

[0099] Optionally, displaying the target interactive screen in the display interface based on the media screen of the target media resource and the interactive element in an overlay manner includes:

[0100] S1, obtain the initial display coordinates of the interactive element;

[0101] S2, performing coordinate transformation on the initial display coordinates according to the rotation relationship between the first display layer and the second display layer and the target display coordinates of the center point of the second display layer to obtain the target display coordinates;

[0102] S3, displaying the interactive element in the second display layer according to the target display coordinates.

[0103] In an optional implementation manner, after the interactive operation layer is created on the second display layer, the method further includes:

[0104] S1, when a first touch event in a first display direction is detected, mapping the first touch event to a second touch event in a second display direction, and determining a corresponding interactive operation according to the second touch event, wherein the first display direction and the second display direction are perpendicular to each other;

[0105] S2: When a third touch event in the second display direction is detected, the second touch event is mapped to a fourth touch event in the first display direction, and a corresponding interactive operation is determined according to the fourth touch event.

[0106] The following combination Fig.10 The process of implementing the above technology is described in detail.

[0107] In this embodiment, the above interactive screen display method can be applied to a browser. The browser can be used to display an interactive media resource in a horizontal screen. First, as in S1002, a user accesses a website address;

[0108] Next, S1004, the screen width and height of the electronic device are obtained; S1006, the screen width and height are used to determine the horizontal or vertical screen, and the vertical screen is processed in the horizontal screen state; in this step, after the screen width and height of the electronic device are obtained, the actual width and height of the electronic device are used to determine whether the current device and the current application are in the horizontal screen display state. Since the user device may be in the state of locking the "vertical screen" or locking the "horizontal screen", the above determination method is used instead of the orientation parameter to determine the direction of the mobile phone, thereby ensuring that the horizontal screen state and the vertical screen state of the current electronic device are accurately determined.

[0109] When the electronic device is in the portrait mode, S1008 is executed to force the screen to be in the landscape mode; when the electronic device is in the landscape mode, S1010 is executed to maintain the landscape mode;

[0110] It is understandable that when the user previews in landscape mode, the display is normal; however, if the user rotates the screen to portrait mode or locks the screen and the preview is in portrait mode from the beginning, the following processing needs to be done to achieve the effect of forced landscape mode:

[0111] In the video layer (i.e. the first display layer), use translate:rotate(90deg) to rotate, and assign the width and height of the current device direction to the outermost Dom to achieve a full-screen horizontal screen effect;

[0112] In the mask layer (i.e. the second display layer), the Canvas (mask layer) is kept at its original angle and does not rotate, so as to avoid the loss of user operation events; if the Canvas has rotated with the video layer, the outer Dom of the mask layer needs to be corrected to the original direction using translate:rotate(-90deg). That is, when the mask layer is first created, Fig.11 As shown in Figure (a).

[0113] Next, the virtual canvas in the mask layer is rotated 90°; since part of the rotated canvas will exceed the unrotated Canvas layer, the size of the Canvas layer needs to be adjusted. Specifically, the DOM size of the mask layer can be dynamically set according to the size of the video layer to fully display the contents of the canvas. After the virtual canvas in the mask layer is rotated 90° and the DOM size of the mask layer is dynamically set according to the size of the video layer, the mask layer and the canvas in the mask layer are shown in the figure below. Fig.11 As shown in Figure (b).

[0114] After the canvas is rotated, the original drawing method of the canvas needs to be adjusted, that is, the original drawing elements in the canvas need to be redrawn. The reason is that although the mask layer and the canvas are aligned after the size adjustment, after the canvas is rotated, the positioning of the video deviates and even appears outside the area of ​​the mask layer.

[0115] For element drawing, the offset calculation can be performed based on the canvas rotation center as the base point to pull the interactive element back to the correct position, so as to adapt the drawing of interactive elements to different canvas sizes, and accurately position them and accurately correspond to the video layer, and finally achieve the effect of horizontal screen of the mask layer. The specific coordinate conversion calculation method is as follows:

[0116] Calculate the X value (X coordinate) of the element in the mask layer:

[0117] Set the canvas width to w, the element distance from the left side of the video to x, the maximum side length of the canvas to maxX, and the original width of the video to oX;

[0118] Then determine the converted X=w / 2-maxX*((oX / 2-x) / oX);

[0119] Calculate the Y value (Y coordinate) of the element in the mask layer:

[0120] Set the canvas height to h, the distance from the top of the video to y, the minimum side length of the canvas to minY, and the original height of the video to oY;

[0121] Then determine the converted X=h / 2-(minY*(oY / 2-y)) / oY;

[0122] For the event conversion method in the interactive control layer: for events along the x and y axes, expand; if the horizontal screen is operated in the vertical screen, the x and y events are reversed, that is, the x direction triggers the y direction event, and the y direction triggers the x direction event.

[0123] Finally, S1012 is executed to display the user interface that has been processed finally, and the user continues to experience it using the horizontal version.

[0124] Through the above-mentioned implementation mode of the present application, in the application scenario of interactive video interaction experience, including the user's interactive operation layer, mask layer, and video layer, the user's interactive effect in the horizontal screen state can be improved. Through the above-mentioned implementation mode, no matter whether the orientation of the user's mobile phone is horizontal or vertical, no matter whether the user turns on the function of automatically rotating the mobile phone screen, the interactive screen is displayed in horizontal mode on the page display, thereby improving the interactive effect.

[0125] Through the above-mentioned implementation mode of the present application, when the display state of the current display interface is inconsistent with the display state corresponding to the target media resource, a first display layer for displaying the media screen is created according to the display state actually corresponding to the target media resource, and a second display layer for displaying the interactive elements matching the media screen is created on the first display layer, thereby achieving full-screen display of the media screen and the interactive elements on the terminal according to the display state corresponding to the target media resource, thereby improving the utilization rate of the display interface, facilitating the user to trigger the display of updated and adjusted interactive elements through the entire display interface, solving the technical problem of poor interactive effect in the display process of the existing interactive screen, and improving the interactive effect in the process of displaying the target media resources.

[0126] It should be noted that, for the above-mentioned method embodiments, for the sake of simplicity, they are all described as a series of action combinations, but those skilled in the art should know that the present invention is not limited by the described action sequence, because according to the present invention, certain steps can be performed in other sequences or simultaneously. Secondly, those skilled in the art should also know that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the present invention.

[0127] According to another aspect of the embodiments of the present invention, there is also provided an interactive screen display device for implementing the interactive screen display method described above. Fig.12 As shown, the device comprises:

[0128] An acquisition unit 1202 is used to acquire a target media resource to be displayed;

[0129] The creating unit 1204 is configured to create a first display layer in the display interface according to the second display state and create a second display layer on the first display layer when the first display state of the display interface does not match the second display state corresponding to the target media resource, wherein the first display state and the second display state include a horizontal screen state and a vertical screen state;

[0130] The overlay display unit 1206 is used to overlay and display a target interactive screen in the display interface according to the media screen and the interactive element of the target media resource, wherein the media screen is displayed in full screen in the first display layer according to the display mode indicated by the second display state, and the interactive element is displayed in the second display layer corresponding to the media screen;

[0131] The updating unit 1208 is used to update the target interactive screen in the display interface according to the adjusted interactive elements in response to the interactive operation.

[0132] Optionally, the updating unit 1208 includes:

[0133] An acquisition module, used to acquire a target display area indicated by an interactive operation;

[0134] An adjustment module, used for adjusting the interactive elements in the display target display area in the second display layer;

[0135] The updating module is used to update the target interactive screen in the display interface according to the adjusted interactive elements.

[0136] Optionally, the adjustment module is used to perform one of the following:

[0137] When the element transparency of the interactive element is less than or equal to the target transparency, increasing the transparency of the interactive element in the target display area in the second display layer;

[0138] When the element transparency of the interactive element is greater than or equal to the target transparency, the transparency of the interactive element in the target display area is reduced in the second display layer.

[0139] Optionally, the display device of the above-mentioned interactive screen is also used to: create an interactive operation layer on the second display layer, wherein the interactive operation layer is used to determine a corresponding interactive operation according to a received touch operation.

[0140] Optionally, the above-mentioned display device is also used to: display interactive prompt information in the target interactive screen, wherein the interactive prompt information is used to indicate the operation type and operation attributes of the touch operation corresponding to the interactive operation; determine the interactive operation according to the operation type and operation attributes of the touch operation received by the interactive operation layer.

[0141] Optionally, the above-mentioned display device is also used to: in response to an adjustment operation on the display size of the target interactive screen, synchronously adjust the display size of the first display layer and the second display layer according to the adjustment operation, and synchronously adjust the detection size of the interactive operation layer according to the adjustment operation.

[0142] Optionally, the display device of the above-mentioned interactive screen is also used to: display a target control for triggering the display interface to enter a target display mode, wherein the display interface in the target display mode will display the target media resource in full screen according to the display state corresponding to the target media resource to be displayed; in response to the triggering operation of the target control, determine that the display interface is in the target display mode.

[0143] Optionally, the creation unit 1204 is configured to: create a first display layer according to the screen aspect ratio indicated by the second display state; and rotate the first display layer by 90° to obtain a first display layer matching the display aspect ratio of the display interface.

[0144] Optionally, the creation unit 1204 is configured to: create a second display layer according to the picture aspect ratio indicated by the first display state, to obtain a second display layer above the first display layer.

[0145] Optionally, the above-mentioned overlay display unit 1206 is used to: obtain the initial display coordinates of the interactive element; perform coordinate transformation on the initial display coordinates according to the rotation relationship between the first display layer and the second display layer, and the target display coordinates of the center point of the second display layer to obtain the target display coordinates; and display the interactive element in the second display layer according to the target display coordinates.

[0146] Optionally, the display device of the above-mentioned interactive screen is also used to: when a first touch event in a first display direction is detected, map the first touch event to a second touch event in a second display direction, and determine a corresponding interactive operation based on the second touch event, wherein the first display direction and the second display direction are perpendicular to each other; when a third touch event in the second display direction is detected, map the second touch event to a fourth touch event in the first display direction, and determine a corresponding interactive operation based on the fourth touch event.

[0147] Optionally, in this embodiment, the embodiments to be implemented by the above-mentioned various unit modules can refer to the above-mentioned various method embodiments, which will not be repeated here.

[0148] According to another aspect of the embodiments of the present invention, there is also provided an electronic device for implementing the above interactive screen display method. The electronic device may be Fig.13 The terminal device or server shown in the figure. This embodiment is described by taking the electronic device as a terminal device as an example. Fig.13 As shown, the electronic device includes a memory 1302 and a processor 1304. The memory 1302 stores a computer program, and the processor 1304 is configured to execute the steps in any of the above method embodiments through the computer program.

[0149] Optionally, in this embodiment, the electronic device may be located in at least one network device among a plurality of network devices of a computer network.

[0150] Optionally, in this embodiment, the processor may be configured to perform the following steps through a computer program:

[0151] S1, obtaining the target media resource to be displayed;

[0152] S2, when the first display state of the display interface does not match the second display state corresponding to the target media resource, creating a first display layer in the display interface according to the second display state, and creating a second display layer on the first display layer, wherein the first display state and the second display state include a horizontal screen state and a vertical screen state;

[0153] S3, displaying the target interactive screen in a display interface in an overlay manner according to the media screen and the interactive element of the target media resource, wherein the media screen is displayed in full screen in the first display layer according to the display mode indicated by the second display state, and the interactive element is displayed in the second display layer corresponding to the media screen;

[0154] S4, in response to the interactive operation, updating and displaying the target interactive screen in the display interface according to the adjusted interactive elements.

[0155] Alternatively, a person skilled in the art may understand that: Fig.13 The structure shown is for illustration only, and the electronic device may also be a smart phone (such as an Android phone, an iOS phone, etc.), a tablet computer, a PDA, a mobile Internet device (MID), a PAD, and other terminal devices. Fig.13 The electronic device and the electronic equipment described above are not limited in structure. Fig.13 More or fewer components (such as network interfaces, etc.) as shown in, or with Fig.13 Different configurations are shown.

[0156] Among them, the memory 1302 can be used to store software programs and modules, such as the program instructions / modules corresponding to the method and device for displaying the interactive screen in the embodiment of the present invention. The processor 1304 executes various functional applications and data processing by running the software programs and modules stored in the memory 1302, that is, realizing the above-mentioned method for displaying the interactive screen. The memory 1302 may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 1302 may further include a memory remotely located relative to the processor 1304, and these remote memories may be connected to the terminal via a network. Examples of the above-mentioned networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof. Among them, the memory 1302 may be specifically, but not limited to, used to store information such as various elements in the scene screen, display information of the interactive screen, and so on. As an example, such as Fig.13As shown, the memory 1302 may include, but is not limited to, the acquisition unit 1202, the creation unit 1204, the overlay display unit 1206, and the update unit 1208 in the display device of the interactive screen. In addition, other module units in the display device of the interactive screen may also be included but are not limited to, which will not be repeated in this example.

[0157] Optionally, the transmission device 1306 is used to receive or send data via a network. Specific examples of the network may include a wired network and a wireless network. In one example, the transmission device 1306 includes a network adapter (Network Interface Controller, NIC), which can be connected to other network devices and routers via a network cable so as to communicate with the Internet or a local area network. In one example, the transmission device 1306 is a radio frequency (RF) module, which is used to communicate with the Internet wirelessly.

[0158] In addition, the electronic device further includes: a display 1308 for displaying a virtual scene in an interface; and a connection bus 1310 for connecting various module components in the electronic device.

[0159] In other embodiments, the terminal device or server may be a node in a distributed system, wherein the distributed system may be a blockchain system, and the blockchain system may be a distributed system formed by connecting the multiple nodes through network communication. Among them, the nodes may form a peer-to-peer (P2P, Peer To Peer) network, and any form of computing device, such as a server, terminal or other electronic device, may become a node in the blockchain system by joining the peer-to-peer network.

[0160] According to one aspect of the present application, a computer program product is provided, the computer program product comprising a computer program / instruction, the computer program / instruction comprising a program code for executing the method shown in the flow chart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication part, and / or installed from a removable medium. When the computer program is executed by a central processing unit, various functions provided by the embodiments of the present application are executed.

[0161] The serial numbers of the above embodiments of the present invention are only for description and do not represent the advantages or disadvantages of the embodiments.

[0162] According to one aspect of the present application, a computer-readable storage medium is provided, and 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 executes the above-mentioned interactive screen display method.

[0163] Optionally, in this embodiment, the computer-readable storage medium may be configured to store a computer program for performing the following steps:

[0164] S1, obtaining the target media resource to be displayed;

[0165] S2, when the first display state of the display interface does not match the second display state corresponding to the target media resource, creating a first display layer in the display interface according to the second display state, and creating a second display layer on the first display layer, wherein the first display state and the second display state include a horizontal screen state and a vertical screen state;

[0166] S3, displaying the target interactive screen in a display interface in an overlay manner according to the media screen and the interactive element of the target media resource, wherein the media screen is displayed in full screen in the first display layer according to the display mode indicated by the second display state, and the interactive element is displayed in the second display layer corresponding to the media screen;

[0167] S4, in response to the interactive operation, updating and displaying the target interactive screen in the display interface according to the adjusted interactive elements.

[0168] In other embodiments, the terminal device or server may be a node in a distributed system, wherein the distributed system may be a blockchain system, and the blockchain system may be a distributed system formed by connecting the multiple nodes through network communication. Among them, the nodes may form a peer-to-peer (P2P, Peer To Peer) network, and any form of computing device, such as a server, terminal or other electronic device, may become a node in the blockchain system by joining the peer-to-peer network.

[0169] According to one aspect of the present application, a computer program product is provided, the computer program product comprising a computer program / instruction, the computer program / instruction comprising a program code for executing the method shown in the flow chart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication part, and / or installed from a removable medium. When the computer program is executed by a central processing unit, various functions provided by the embodiments of the present application are executed.

[0170] The serial numbers of the above embodiments of the present invention are only for description and do not represent the advantages or disadvantages of the embodiments.

[0171] Optionally, in this embodiment, a person of ordinary skill in the art may understand that all or part of the steps in the various methods of the above embodiments may be completed by instructing hardware related to the terminal device through a program, and the program may be stored in a computer-readable storage medium, and the storage medium may include: a flash drive, a read-only memory (ROM), a random access memory (RAM), a disk or an optical disk, etc.

[0172] If the integrated units in the above embodiments are implemented in the form of software functional units and sold or used as independent products, they can be stored in the above computer-readable storage medium. Based on such understanding, the technical solution of the present invention is essentially 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 one or more computer devices (which can be personal computers, servers or network devices, etc.) to perform all or part of the steps of the above methods of various embodiments of the present invention.

[0173] In the above embodiments of the present invention, the description of each embodiment has its own emphasis. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0174] In the several embodiments provided in the present application, it should be understood that the disclosed client can be implemented in other ways. Among them, the device embodiments described above are only schematic. For example, the division of the above units is only a logical function division. There may be other division methods in actual implementation. For example, 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 through some interfaces, indirect coupling or communication connection of units or modules, which can be electrical or other forms.

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

[0176] In addition, each functional unit in each embodiment of the present invention may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0177] The above are only preferred embodiments of the present invention. It should be pointed out that, for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principle of the present invention. These improvements and modifications should also be regarded as the scope of protection of the present invention.

Claims

1. A method for displaying an interactive screen, It is characterized in that include: Obtain the target media resource to be displayed; When a first display state of the display interface does not match a second display state corresponding to the target media resource, creating a first display layer in the display interface according to the second display state, and creating a second display layer on top of the first display layer, wherein the first display state and the second display state include a horizontal screen state and a vertical screen state; Displaying a target interactive screen in the display interface in an overlay manner according to the media screen and interactive elements of the target media resource, wherein the media screen is displayed in full screen in the first display layer according to the display mode indicated by the second display state, and the interactive element is displayed in the second display layer corresponding to the media screen; In response to the interactive operation, the target interactive screen is updated and displayed in the display interface according to the adjusted interactive element.

2. The method according to claim 1, It is characterized in that In response to the interactive operation, updating and displaying the target interactive screen in the display interface according to the updated interactive element includes: Acquire the target display area indicated by the interactive operation; Adjusting the display of the interactive element in the target display area in the second display layer; The target interactive screen is updated and displayed in the display interface according to the adjusted interactive element.

3. The method according to claim 2, It is characterized in that The step of adjusting the display of the interactive element in the target display area in the second display layer comprises one of the following: In a case where the element transparency of the interactive element is less than or equal to the target transparency, increasing the transparency of the interactive element in the target display area in the second display layer; When the element transparency of the interactive element is greater than or equal to the target transparency, the transparency of the interactive element in the target display area is reduced in the second display layer.

4. The method according to claim 1, It is characterized in that When the first display layer is created in the display interface according to the second display state, and the second display layer is created on the first display layer, the method further includes: An interactive operation layer is created on the second display layer, wherein the interactive operation layer is used to determine the corresponding interactive operation according to the received touch operation.

5. The method according to claim 4, It is characterized in that After the interactive operation layer is created on the second display layer, the method further includes: Displaying interactive prompt information in the target interactive screen, wherein the interactive prompt information is used to indicate the operation type and operation attribute of the touch operation corresponding to the interactive operation; The interactive operation is determined according to the operation type and the operation attribute of the touch operation received by the interactive operation layer.

6. The method according to claim 4, It is characterized in that After the target interactive screen is updated and displayed in the display interface according to the adjusted interactive element in response to the interactive operation, the method further includes: In response to an adjustment operation on the display size of the target interactive screen, the display sizes of the first display layer and the second display layer are synchronously adjusted according to the adjustment operation, and the detection size of the interactive operation layer is synchronously adjusted according to the adjustment operation.

7. The method according to claim 1, It is characterized in that Before acquiring the target media resource to be displayed, the method further includes: Displaying a target control for triggering the display interface to enter a target display mode, wherein the display interface in the target display mode will display the target media resource in full screen according to a display state corresponding to the target media resource to be displayed; In response to a triggering operation on a target control, it is determined that the display interface is in the target display mode.

8. The method according to claim 1, It is characterized in that The creating a first display layer in the display interface according to the second display state comprises: creating the first display layer according to the picture aspect ratio indicated by the second display state; The first display layer is rotated 90° to obtain the first display layer matching the display aspect ratio of the display interface.

9. The method according to claim 1, It is characterized in that The creating a second display layer on the first display layer comprises: The second display layer is created according to the picture aspect ratio indicated by the first display state, so as to obtain the second display layer above the first display layer.

10. The method according to claim 9, It is characterized in that The displaying of the target interactive screen in the display interface based on the media screen of the target media resource and the interactive element overlay includes: Obtaining the initial display coordinates of the interactive element; According to the rotation relationship between the first display layer and the second display layer, and the target display coordinates of the center point of the second display layer, coordinate transformation is performed on the initial display coordinates to obtain target display coordinates; The interactive element is displayed in the second display layer according to the target display coordinates.

11. The method according to claim 4, It is characterized in that After the interactive operation layer is created on the second display layer, the method further includes: When a first touch event in a first display direction is detected, mapping the first touch event to a second touch event in a second display direction, and determining the corresponding interactive operation according to the second touch event, wherein the first display direction and the second display direction are perpendicular to each other; When a third touch event in the second display direction is detected, the second touch event is mapped to a fourth touch event in the first display direction, and the corresponding interactive operation is determined according to the fourth touch event.

12. A display device for interactive images, It is characterized in that include: An acquisition unit, used for acquiring a target media resource to be displayed; a creating unit, configured to create a first display layer in the display interface according to the second display state, and create a second display layer on top of the first display layer, when a first display state of the display interface does not match a second display state corresponding to the target media resource, wherein the first display state and the second display state include a horizontal screen state and a vertical screen state; an overlay display unit, configured to overlay and display a target interactive screen in the display interface according to the media screen and the interactive element of the target media resource, wherein the media screen is displayed in full screen in the first display layer according to the display mode indicated by the second display state, and the interactive element is displayed in the second display layer corresponding to the media screen; An updating unit is used to update and display the target interactive screen in the display interface according to the adjusted interactive elements in response to the interactive operation.

13. A computer-readable storage medium, It is characterized in that The computer-readable storage medium includes a stored program, wherein the program executes the method described in any one of claims 1 to 11 when executed.

14. A computer program product comprising a computer program / instructions, It is characterized in that When the computer program / instructions are executed by a processor, the steps of the method according to any one of claims 1 to 11 are implemented.

15. An electronic device comprising a memory and a processor, It is characterized in that A computer program is stored in the memory, and the processor is configured to execute the method according to any one of claims 1 to 11 through the computer program.

Images