WO2024037563A1 - 内容展示方法、装置、设备及存储介质 - Google Patents

内容展示方法、装置、设备及存储介质 Download PDF

Info

Publication number
WO2024037563A1
WO2024037563A1 PCT/CN2023/113323 CN2023113323W WO2024037563A1 WO 2024037563 A1 WO2024037563 A1 WO 2024037563A1 CN 2023113323 W CN2023113323 W CN 2023113323W WO 2024037563 A1 WO2024037563 A1 WO 2024037563A1
Authority
WO
WIPO (PCT)
Prior art keywords
floating control
media content
display
control
target page
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Ceased
Application number
PCT/CN2023/113323
Other languages
English (en)
French (fr)
Inventor
常为益
李亚平
陈海云
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Zitiao Network Technology Co Ltd
Original Assignee
Beijing Zitiao Network Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Zitiao Network Technology Co Ltd filed Critical Beijing Zitiao Network Technology Co Ltd
Priority to JP2024574662A priority Critical patent/JP2025522504A/ja
Priority to EP23854463.9A priority patent/EP4524733A4/en
Publication of WO2024037563A1 publication Critical patent/WO2024037563A1/zh
Priority to US18/991,251 priority patent/US20250123693A1/en
Anticipated expiration legal-status Critical
Ceased legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/017—Gesture based interaction, e.g. based on a set of recognized hand gestures
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04842—Selection of displayed objects or displayed text elements
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04886—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures by partitioning the display area of the touch-screen or the surface of the digitising tablet into independently controllable areas, e.g. virtual keyboards or menus
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04803—Split screen, i.e. subdividing the display area or the window area into separate subareas

Definitions

  • the embodiments of the present disclosure relate to the field of computer technology, such as content display methods, devices, equipment and storage media.
  • Embodiments of the present disclosure provide content display methods, devices, storage media, and equipment, which can optimize content display solutions based on suspension controls in related technologies.
  • embodiments of the present disclosure provide a content display method, including:
  • embodiments of the present disclosure also provide a content display device, including:
  • a suspension control display module is configured to display the suspension control in the target page and display the media stream in the suspension control
  • a gesture operation detection module configured to determine the touch position in response to detecting that the user touches the floating control, and detect the current gesture operation starting from the touch position;
  • the floating control control module is configured to determine the current operation type of the detected current gesture operation according to the target area where the touch position is located in the floating control, and determine the current operation type based on the current operation type and the current gesture operation. , perform corresponding control on the suspension control, where different operation types correspond to different areas in the suspension control.
  • embodiments of the present disclosure also provide an electronic device, including:
  • a storage device arranged to store at least one program
  • the at least one processor When the at least one program is executed by the at least one processor, the at least one processor is caused to implement the content display method provided by the embodiment of the present disclosure.
  • embodiments of the present disclosure also provide a storage medium containing computer-executable instructions that, when executed by a computer processor, execute the content display method provided by embodiments of the present disclosure.
  • Figure 1 is a schematic flowchart of a content display method provided by an embodiment of the present disclosure
  • Figure 2 is a schematic diagram of an interface provided by an embodiment of the present disclosure
  • Figure 3 is a schematic flowchart of a content display method provided by an embodiment of the present disclosure.
  • Figure 4 is a schematic diagram of an interface interaction provided by an embodiment of the present disclosure.
  • Figure 5 is a schematic diagram of another interface interaction provided by an embodiment of the present disclosure.
  • Figure 6 is a schematic structural diagram of a content display device provided by an embodiment of the present disclosure.
  • FIG. 7 is a schematic structural diagram of an electronic device provided by an embodiment of the present disclosure.
  • the term “include” and its variations are open-ended, ie, “including but not limited to.”
  • the term “based on” means “based at least in part on.”
  • the term “one embodiment” means “at least one embodiment”; the term “another embodiment” means “at least one additional embodiment”; and the term “some embodiments” means “at least some embodiments”. Relevant definitions of other terms will be given in the description below.
  • a prompt message is sent to the user to clearly remind the user that the operation requested by the user will require the acquisition and use of the user's personal information. Therefore, users can autonomously choose whether to provide personal information to software or hardware such as electronic devices, applications, servers or storage media that perform the operations of the technical solution of the present disclosure based on the prompt information.
  • the method of sending prompt information to the user may be, for example, a pop-up window, and the prompt information may be presented in the form of text in the pop-up window.
  • the pop-up window can also contain a selection control for the user to choose "agree” or "disagree” to provide personal information to the electronic device.
  • Figure 1 is a schematic flowchart of a content display method provided by an embodiment of the present disclosure.
  • the embodiment of the present disclosure is applicable to the situation of content display.
  • the method can be executed by a content display device, and the device can use at least one of software and hardware. It can be implemented in one form, optionally, through electronic equipment.
  • the electronic equipment can be mobile terminals such as mobile phones, smart watches, tablets, and personal digital assistants, or it can also be a personal computer (Personal Computer, PC) or server, etc. equipment.
  • the method includes:
  • Step 101 Display a floating control in the target page, and display the media stream in the floating control.
  • the target page may be a page in a default application.
  • the type of the default application is not limited.
  • it may be a video application, a live broadcast application, a shopping application or an information application. etc., it can also be other types of applications.
  • the target page can be any page in the default application, and the page type and page content it contains are not limited.
  • it can be a message interaction page, a media content display page, a product details page, or an information information display page.
  • the floating control can be understood as a view element, and displaying the floating control on the target page can be understood as overlaying and displaying the view element on the target page.
  • the properties of the floating control such as shape, size, color, transparency, display position, etc., can be set according to actual needs.
  • the floating control can be a control in the form of a floating box.
  • the media stream is displayed in the floating control, and the media content contained in the media stream may include images, graphics, audio or video, etc.
  • the media stream displayed in the floating control may be a media stream pushed to the current user.
  • a corresponding media stream determination method is generated according to the current user, and a personalized media stream for the current user is determined based on the media stream determination method.
  • the disclosed embodiments may also be applied to In the content sharing scenario, that is, the current user can share the media stream with at least one peer user, the media stream displayed in the floating control can also be a shared media stream.
  • FIG 2 is a schematic diagram of an interface provided by an embodiment of the present disclosure.
  • a floating control 202 is displayed on the target page 201.
  • the floating control 202 is located in the upper left corner of the target page 201. Display the media stream in the floating control 202.
  • Step 102 In response to detecting that the user touches the floating control, determine the touch position, and detect the current gesture operation starting from the touch position.
  • the user can touch the screen (touch screen) of the electronic device with a body part such as a finger or an object such as a stylus (hereinafter collectively referred to as a touch object).
  • a touch object For example, the user can touch a floating box displayed on the target page.
  • the touch position of the touch object can be detected through the touch screen, and the touch screen continues to detect a gesture operation starting from the touch position.
  • the gesture operation can be, for example, sliding or long pressing. Or drag etc.
  • Step 103 Determine the current operation type of the detected current gesture operation according to the target area where the touch position is located in the floating control, and based on the current operation type and the current gesture operation, perform The suspension control performs corresponding control, wherein different operation types correspond to different areas in the suspension control.
  • the floating control can be divided into at least two areas.
  • the exemplary division method is not limited, such as two upper and lower areas, two left and right areas, or a central area and a surrounding area.
  • the floating control 202 is divided into two left and right areas, which are a first area 203 and a second area 204 respectively.
  • the operation type may include moving the floating control (denoted as the first operation type), switching the media content currently displayed in the floating control (denoted as the second operation type), and adjusting the size of the floating frame (denoted as the third operation type). ) at least one.
  • Moving the floating control can be understood as adjusting the display position of the floating control in the target page; switching the media content currently displayed in the floating control can be understood as replacing the media content currently displayed in the floating control with another media content in the media stream (such as the previous media content or the next media content), etc.; adjust the floating box Size can be understood as adjusting the width, height or aspect ratio of the floating frame, etc.
  • the first area 203 corresponds to the first operation type
  • the second area 204 corresponds to the second operation type.
  • the current operation type of the current gesture operation can be determined according to the area where the touch position falls (recorded as the target area), and then based on the current operation type and the current gesture operation, the floating control Carry out corresponding control.
  • the target area is the first area 203
  • the corresponding operation type is the first operation type
  • the movement of the floating control is controlled according to the current gesture operation.
  • the touch position of the user's finger touching the floating control falls into the second area 204
  • the target area is the second area 204
  • the corresponding operation type is the second operation type. Then the media content currently displayed in the floating control is switched according to the current gesture operation.
  • the content display method provided by the embodiment of the present disclosure displays a floating control in the target page, and displays the media stream in the floating control.
  • the touch position is determined, and the touch position is detected as the starting point.
  • the current gesture operation determines the current operation type of the detected current gesture operation based on the target area of the touch position in the floating control, and controls the floating control accordingly based on the current operation type and the current gesture operation, where, Different operation types correspond to different areas in the floating control.
  • the current operation type is a first operation type
  • performing corresponding control on the floating control based on the current operation type and the current gesture operation includes: based on the first operation At least one of the type, the action direction of the current gesture operation, and the action distance and speed of the current gesture operation, and move the floating control to the corresponding display position in the target page.
  • the current gesture operation may be a sliding operation.
  • the action direction can be sliding
  • the moving direction corresponds to the moving direction of the floating control, and the two can be in the same direction
  • the action distance can be the sliding distance, corresponding to the moving distance of the floating control, and the two can be equal or positively correlated
  • the action speed can be the sliding speed, corresponding to The two can be equal to or positively correlated with the moving speed of the floating control.
  • the target page includes a preset page
  • the method further includes: in the target page, it is detected that the background play mode is triggered, and the first media content currently displayed in the floating control is Display as the background of the target page, and cancel the display of the floating control.
  • the background playback mode can be understood as a mode in which the media content in the floating control is played as the background of the preset page.
  • the preset pages may include pages in which the ratio of the display area of the page content to the total display area of the page is less than the preset ratio threshold, and the area used to display the page content may reveal background content.
  • the default page may include, for example, a message interaction page (such as a chat page or a message list page, etc.), and may also include pages such as a personal homepage.
  • the target page includes a message interaction page
  • displaying the first media content currently displayed in the floating control as the background of the target page includes: using the background of the target page Replace with the first media content currently displayed in the floating control, so that the page content of the message interaction page is displayed on the upper layer of the first media content, wherein the page content includes message content and the message content At least one of the associated contents.
  • the page content may include message content and associated content of the message content.
  • the associated content may be the object identifier of the message interaction object (such as user name or user avatar, etc.).
  • users can view media content in full screen (when the target page is in full screen display) while sending and receiving messages, taking into account both the message interaction experience and the media content viewing experience.
  • detecting that the background play mode is triggered in the target page includes: receiving a preset gesture operation in the target page, then determining that the background play mode is triggered, wherein , the preset gesture operation is set to trigger the background play mode.
  • the preset gesture operation may be, for example, a two-finger zoom-in operation on the floating control, that is, two fingers touch the floating control and move in opposite directions.
  • the operation type includes a first operation type, and the first operation type is to move the suspended control; wherein the current operation type is the first operation type, and the operation type is based on the current operation type. and the current gesture operation, performing corresponding control on the floating control, including: based on the first operation type and the current gesture operation, moving the floating control to the corresponding display position in the target page; Wherein, in the target page, detecting that the background play mode is triggered includes: detecting that the user stops touching the screen, determining whether the current display position of the floating control is the target display position; responding to the floating control The current display position of the control is the target display position, and it is determined that the background playback mode is detected and triggered.
  • the advantage of this setting is that the first operation type can be reused, and the background playback mode can be easily triggered during the process of moving the floating frame.
  • the target display position can be set according to actual needs.
  • the target display position includes a position within a preset range in the target page.
  • the preset range includes the center point of the target page.
  • at least one boundary of the preset range coincides with a boundary of the target page.
  • determining whether the current display position of the floating control is the target display position, and if the current display position of the floating control is the target display position, determining that the background playback mode is triggered may include: determining whether the background playback mode is triggered. Whether the current display position of the floating control is the target display position, and if the current display position of the floating control is the target display position, continue to determine whether the duration of the current display position remaining at the target display position is greater than the preset duration threshold , if it is greater than the preset duration threshold, it is determined that the background playback mode is detected to be triggered.
  • the advantage of this setting is that it can make the user's operation of moving the floating control smoother. When there is no need to display media content in the background, there is no need to avoid the preset range of the target display position, which can prevent misoperations.
  • the method includes: checking When it is detected that the current media content has been played, it will automatically switch to display the next media content in the media stream, or automatically repeat the current media content.
  • the advantage of this setting is that it can reduce the user's active operations and automatically perform continuous playback or loop playback.
  • the automatic playback method can be set independently by the user in advance.
  • the method includes: responding to the user The first preset operation acting on the target page is to switch to a hidden state playback mode to display the first media content, wherein in the hidden state playback mode, the target page in the background playback mode is hidden.
  • the page content displayed above the background is that by hiding the display of page content, you can quickly switch to full-screen display of media content, thereby obtaining a purer media content viewing experience.
  • the page content that needs to be hidden may include the message content described above and associated content of the message content.
  • the first preset operation may be a triggering operation on a preset hidden button, or may be a sliding operation.
  • the sliding operation generally has a different direction from the sliding operation used for browsing message content.
  • the up and down swipe operation can be set to browse the message content
  • the left swipe operation or right swipe operation can be set to hide the page content.
  • the method further includes: in response to a second preset operation performed by the user on the target page, switching the target The media content currently displayed on the page.
  • the advantage of this setting is that during the process of displaying the media content in the hidden play mode, the user can be allowed to switch the media content by inputting the second preset operation, thereby improving the viewing experience.
  • the second preset operation may be, for example, a sliding operation, such as sliding up or sliding down.
  • the method further includes: in response to a third preset operation performed by the user on the target page, switching to the background media content. scene playback mode.
  • the advantage of this setting is that you can easily switch back to the display of page content, such as restoring the display of chat content.
  • the third preset operation may be a triggering operation on a preset display button, or may be a sliding operation.
  • the sliding operation may be in the opposite direction to the first preset operation.
  • the first preset operation is sliding to the right, and the third preset operation may be a sliding operation.
  • the default action can be swipe left.
  • the method further includes: displaying a preset control in the target page.
  • the preset control is configured to perform at least one of the following: control the media content displayed on the target page; interact with the media content displayed on the target page; and trigger the display of the floating control And switch the media content displayed on the target page to the floating control for display.
  • the number of preset controls may be at least one, and the display modes of different preset controls may be different.
  • the first preset control may be automatically displayed after hiding the page content
  • the second preset control may be displayed in response to the user targeting the target. Displayed when the page triggers an operation (such as clicking on the target page, etc.).
  • controlling the media content may include switching the media content, pausing the playback of the media content, or blocking the sound of the media content, etc.
  • Interacting with the media content displayed on the target page may include inputting a like operation, inputting a favorite operation, inputting a forwarding operation, or inputting comment content, etc.
  • the current operation type is a second operation type
  • performing corresponding control on the floating control based on the current operation type and the current gesture operation includes: based on the second operation
  • the type and the action direction of the current gesture operation are used to switch the second media content currently displayed in the floating control to the third media content, where the third media content is the second media in the media stream.
  • the previous media content or the next media content of the content is the advantage of this setting.
  • the media content to be switched can be quickly determined based on the direction of the gesture operation, improving content switching efficiency.
  • the second media content may be the same as or different from the first media content.
  • Figure 3 is a schematic flowchart of a content display method provided by an embodiment of the present disclosure.
  • the embodiment of the present disclosure is optimized based on multiple optional solutions in the above embodiments.
  • the method includes the following steps:
  • Step 301 Display the floating control in the target page, and display the media stream in the floating control.
  • FIG 4 is a schematic diagram of an interface interaction provided by an embodiment of the present disclosure.
  • a floating control 402 is displayed in the target page 401.
  • the target page 401 can be, for example, a message interaction page, and a video stream can be displayed in the floating control 402.
  • the bottom of the target page 401 can display relevant controls for triggering message input, such as the microphone control, input box control and expression control in the figure.
  • the video stream can include video works published by different users.
  • Step 302 When it is detected that the user touches the floating control, determine the touch position, and detect a gesture operation starting from the touch position.
  • the user can touch the screen with a finger.
  • the touch position of the finger is determined, and a gesture operation starting from the touch position is continued.
  • the gesture operation may be a sliding operation, for example.
  • Step 303 Determine the current operation type of the detected current gesture operation according to the target area of the touch position in the floating control.
  • the floating control 402 can be divided into two areas, the first area 403 and the second area (which can be areas in the floating control 402 except the first area 403).
  • the area identifier can be displayed in the first area 403, such as the horizontal line in Figure 4.
  • the first area 403 corresponds to the first operation type
  • the second area corresponds to the second operation type
  • the first operation type is moving the suspension control
  • the second operation type is switching the media content currently displayed in the suspension control. Assuming that the touch position falls within the first area 403, it is determined that the current detected gesture operation is the first operation type.
  • Step 304 Determine whether the current operation type is the first operation type. If the current operation type is the first operation type, perform step 305; if the current operation type is not the first operation type, perform step 310.
  • Step 305 Based on at least one of the first operation type, the action direction of the current gesture operation, the action distance and the action speed of the current gesture operation, move the floating control to the corresponding display position in the target page.
  • the current operation type is the first operation type
  • the current gesture operation dynamically moves the floating control to the corresponding display position in the target page.
  • Step 306 It is detected that the user stops touching the screen, and determines whether the current display position of the floating control is the target display position. If the current display position of the floating control is the target display position, perform step 307; if the current display position of the floating control is not the target display position, position to end the process.
  • the current display position of the floating control is the target display position. If the floating control is If the current display position is the target display position, prompt information can be displayed.
  • the prompt information is set to prompt the current user to let go of the media content in the floating control in the background.
  • the current display position can be considered as the target display position, and the prompt message "Release to play in the background" 404 can be displayed on the floating control.
  • Step 307 Determine that the background play mode is detected to be triggered, display the first media content currently displayed in the floating control as the background of the target page, and cancel the display of the floating control.
  • the media content in the floating control can continue to be displayed in the background of the target page.
  • the scenery video (first media content) is playing in the floating control. After the user lets go, the scenery video can continue to play in the background of the target page, and the floating control disappears.
  • Step 308 In response to the user's first preset operation on the target page, switch to the hidden state playback mode to display the first media content, hide the page content displayed on the upper layer of the background in the background playback mode, and display the preset media content on the target page. Set controls.
  • the first preset operation may be a sliding operation.
  • the user can browse the message content by sliding up and down, and the first preset operation can be sliding left and right.
  • the page content such as the message content and related controls used to trigger the message input are hidden.
  • the preset controls may include at least one interactive control, such as the four interactive controls 405 in the figure.
  • the preset controls may also include a floating control, for example. Switch control, such as switch button 406 in the figure.
  • Step 309 In response to the user's second preset operation on the target page, switch the media content currently displayed in the target page.
  • the user can switch the media content in the target page.
  • the user can switch the video content by inputting an upward sliding operation, switching the landscape video to a clown video.
  • the user can also trigger the display of the floating box by triggering the switch button 406 and switch the clown video currently displayed on the target page to the floating control to continue playing.
  • Step 310 Based on the second operation type and the action direction of the current gesture operation, switch the second media content currently displayed in the floating control to the third media content.
  • the third media content is the previous media content or the next media content of the second media content in the media stream.
  • FIG. 5 is a schematic diagram of another interface interaction provided by an embodiment of the present disclosure.
  • the user inputs a downward sliding operation to switch the landscape video (second media content) currently displayed in the floating control to a character video. (Third media content).
  • the content display method provided by the embodiment of the present disclosure displays a floating control for displaying media content in a message interaction page, which can realize chatting and viewing media content, and can accurately identify the operation type of the user's gesture operation, and according to different operation types Move the floating control used to display the media stream or switch the media content, making the control of the floating control more flexible.
  • a variety of preset controls are provided to facilitate users to control or interact based on media content. They can switch back to floating controls for playback, making the display of media content more flexible, meeting users' diverse media content viewing needs, and improving user experience.
  • displaying the first media content currently displayed in the floating control as the background of the target page and canceling the display of the floating control includes: removing the canvas switching component from the Unbind from the floating control, and bind the canvas switching component to the background view of the target page, where the canvas switching component contains multiple canvases, and the canvas is configured with a media player.
  • the player is set to play the first media content currently displayed in the floating control; obtains the association information of the first media content from the preset database, and switches based on the canvas in the background view based on the association information
  • the component continues to display the first media content and cancels the display of the floating control, wherein the associated information includes at least one of media identification, playback progress, and playback status.
  • the canvas switching component is also called a page switching component or a view switching component (ViewPager).
  • the canvas switching component contains multiple canvases.
  • the canvases are also called view holders (ViewHolder).
  • Each canvas can be set to cache a media. content. Among them, multiple media contents can be pulled from the server in batches through the canvas switching component. The number of media contents pulled at one time can be consistent with the number of canvases in the canvas switching component. For example, if 5 videos are pulled at one time, there can be 5 canvases.
  • the canvas is configured with a media player, and the media player is set to play the media content currently displayed in the floating control.
  • Each canvas can be configured with a media player independently, or multiple canvases can share a media player, which is not limited here.
  • both the floating control and the background view can be regarded as containers of the canvas switching component.
  • the canvas switching component can be removed from the canvas switching component. Take it out from the floating control (for example, you can call the remove view function) and put it into the background view.
  • the process of taking it out can be regarded as unbinding (for example, you can call the addview function), and the process of putting it in can be regarded as binding.
  • the associated information of the currently displayed media content can be stored in the preset database in real time. identity, its form is not limited), playback At least one of progress and playback status (can include playing, paused playback, etc.).
  • the latest association information can be obtained from the preset database, and based on the obtained association information Continue to display media content through the canvas switching component in the background view.
  • the preset parameters of the media player can be reconfigured to adapt to the background view.
  • the preset parameters may include, for example, the size of the media player.
  • a canvas switching component is bound to the floating control, and the canvas switching component contains multiple canvases.
  • the canvas is configured with a media player, and the media player is set to play the content loaded in the corresponding canvas.
  • media content to display the media content in the floating control; wherein, based on the second operation type and the action direction of the current gesture operation, the second media content currently displayed in the floating control is Switching to the third media content includes: based on the second operation type, passing the current gesture operation to the canvas switching component, so that the canvas switching component operates according to the action direction of the current gesture operation and the The first content identifier of the second media content currently displayed in the floating control determines the second content identifier of the third media content to be switched; the second content identifier is broadcast to multiple canvases through the canvas switching component, so that The canvas matching the second content identifier plays the second media content through a corresponding media player.
  • the advantage of this setting is that it can accurately switch media content within the floating control.
  • the media content loaded in multiple canvases can be numbered, which can be recorded as a content identifier.
  • Determine the second content identifier and apply the observer mode of the event bus (EventBus, which can be understood as a broadcast mechanism)
  • notify all canvases in the canvas switching component and match the content identifier of its own cached video with the second content identifier , to determine whether it should be handled by itself.
  • EventBus which can be understood as a broadcast mechanism
  • Figure 6 is a schematic structural diagram of a content display device provided by an embodiment of the present disclosure. As shown in Figure 6, the device includes: a floating control display module 601, a gesture operation detection module 602, and a floating control control module 603.
  • the suspension control display module 601 is configured to display the suspension control in the target page and display the media stream in the suspension control;
  • the gesture operation detection module 602 is configured to determine the touch position in response to detecting that the user touches the floating control, and detect the current gesture operation starting from the touch position;
  • the floating control control module 603 is configured to determine the current operation type of the detected current gesture operation according to the target area where the touch position is located in the floating control, and based on the current operation type and the current gesture Operation, perform corresponding control on the suspension control, where different operation types correspond to different areas in the suspension control.
  • the content display device displays the floating control in the target page and displays the media stream in the floating control.
  • the touch position is determined and the touch position is used as the starting point.
  • the current gesture operation determine the current operation type of the detected current gesture operation according to the target area of the touch position in the floating control, and perform corresponding control on the floating control based on the current operation type and the current gesture operation, where , different operation types correspond to different areas in the floating control.
  • the operation type includes at least one of a first operation type and a second operation type.
  • the first operation type is to move the suspension control
  • the second operation type is to switch the current one in the suspension control.
  • the action direction of the current gesture operation and at least one of the action distance and action speed of the current gesture operation, move the floating control to the corresponding display position in the target page .
  • the target page includes a preset page; the device further includes:
  • the background play mode triggering module is configured to detect that the background play mode is triggered in the target page, display the first media content currently displayed in the floating control as the background of the target page, and cancel the Describes the display of floating controls.
  • detecting that the background play mode is triggered in the target page includes: receiving a preset gesture operation in the target page, then determining that the background play mode is triggered, wherein the The preset gesture operation is set to trigger the background play mode.
  • the operation type includes a first operation type, and the first operation type is to move the suspension control;
  • the suspension control control module in response to the current operation type being the first operation type, executes the Based on the current operation type and the current gesture operation, when performing corresponding control on the floating control, it is set to: based on the first operation type and the current gesture operation, move the floating control to the The corresponding display position in the target page;
  • the background play mode is triggered, including:
  • the target display position includes a position within a preset range in the target page, and the preset range contains the center point of the target page.
  • the target page includes a message interaction page; and displaying the first media content currently displayed in the floating control as the background of the target page includes:
  • the device may also include:
  • the hidden state playback mode switching module is configured to switch to the hidden state playback mode to display the first media content in response to the user's first preset operation on the target page, wherein, In the hidden state playback mode, the page content displayed on the upper layer of the background in the background playback mode is hidden.
  • the device may also include:
  • a content switching module configured to, after switching to the hidden state playback mode to display the first media content, switch the current content in the target page in response to the user's second preset operation on the target page. Media content displayed.
  • the device may also include:
  • the default control display module is configured to display the default control in the target page after switching to the hidden state play mode to display the first media content; wherein the default control is configured to perform at least the following: One item: controlling the media content displayed on the target page; interacting with the media content displayed on the target page; and triggering the display of the floating control and switching the media content displayed on the target page to the floating control for display.
  • the background display module displays the first media content currently displayed in the floating control as the background of the target page and cancels the display of the floating control, it is set to:
  • the associated information of the first media content from the preset database, continue to display the first media content based on the canvas switching component in the background view based on the associated information, and cancel the display of the floating control.
  • the associated information includes at least one of media identification, playback progress and playback status.
  • the floating control control module performs corresponding control on the floating control based on the current operation type and the current gesture operation. ,Set as:
  • the second media content currently displayed in the floating control is switched to a third media content, wherein the third media content is the media stream The previous media content or the next media content of the second media content described in .
  • a canvas switching component is bound to the floating control.
  • the canvas switching component contains multiple canvases.
  • the canvas is configured with a media player, and the media player is set to play media loaded in the corresponding canvas. content to display media content in the floating control;
  • switching the second media content currently displayed in the floating control to the third media content includes:
  • the current gesture operation is transferred to the canvas switching component, so that the canvas switching component operates according to the action direction of the current gesture operation and the second media currently displayed in the floating control.
  • the first content identifier of the content determines the second content identifier of the third media content to be switched;
  • the second content identification is broadcast to multiple canvases through the canvas switching component, so that the canvas matching the second content identification plays the second media content through the corresponding media player.
  • the content display device provided by the embodiments of the present disclosure can execute the content display method provided by any embodiment of the present disclosure, and has corresponding functional modules and effects for executing the method.
  • FIG. 7 is a schematic structural diagram of an electronic device provided by an embodiment of the present disclosure.
  • FIG. 7 shows a schematic structural diagram of an electronic device (such as the terminal device or server in FIG. 7 ) 700 suitable for implementing embodiments of the present disclosure.
  • Terminal devices in embodiments of the present disclosure may include, but are not limited to, mobile phones, notebook computers, digital broadcast receivers, personal digital assistants (Personal Digital Assistants, PDAs), tablet computers (PAD), portable multimedia players (Portable Media Players), etc. , PMP), mobile terminals such as vehicle-mounted terminals (such as vehicle-mounted navigation terminals), and fixed terminals such as digital TVs, desktop computers, etc.
  • PDAs Personal Digital Assistants
  • PAD tablet computers
  • PMP portable multimedia players
  • mobile terminals such as vehicle-mounted terminals (such as vehicle-mounted navigation terminals)
  • fixed terminals such as digital TVs, desktop computers, etc.
  • the electronic device shown in Figure 7 is only an example and should not be used in this disclosure. There are no limitations on
  • the electronic device 700 may include a processor (such as a central processing unit, a graphics processor, etc.) 701.
  • the processor 701 may be configured according to a program stored in a read-only memory (Read-Only Memory, ROM) 702 or from a program.
  • the storage device 708 loads the program in the random access memory (Random Access Memory, RAM) 703 to perform various appropriate actions and processes.
  • RAM Random Access Memory
  • various programs and data required for the operation of the electronic device 700 are also stored.
  • the processor 701, ROM 702 and RAM 703 are connected to each other through a bus 704.
  • An input/output (I/O) interface 705 is also connected to bus 704.
  • input devices 706 including, for example, a touch screen, touch pad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, etc.; including, for example, a Liquid Crystal Display (LCD) , an output device 707 such as a speaker, a vibrator, etc.; a storage device 708 including a magnetic tape, a hard disk, etc.; and a communication device 709.
  • Communication device 709 may allow electronic device 700 to communicate wirelessly or wiredly with other devices to exchange data.
  • FIG. 7 illustrates an electronic device 700 having various means, it should be understood that implementation or availability of all illustrated means is not required. More or fewer means may alternatively be implemented or provided.
  • embodiments of the present disclosure include a computer program product including a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the method illustrated in the flowchart.
  • the computer program may be downloaded and installed from the network via communication device 709, or from storage device 708, or from ROM 702.
  • the processor 701 When the computer program is executed by the processor 701, the above functions defined in the method of the embodiment of the present disclosure are performed.
  • the electronic device provided by the embodiments of the present disclosure and the content display method provided by the above embodiments belong to the same concept.
  • Technical details that are not described in detail in this embodiment can be referred to the above embodiments, and this embodiment has the same effect as the above embodiments. .
  • Embodiments of the present disclosure provide a computer-readable storage medium with a computer program stored thereon, When the program is executed by the processor, the content display method provided in the above embodiment is implemented.
  • the computer-readable storage medium mentioned above in the present disclosure may be a computer-readable signal medium or a computer-readable storage medium, or any combination of the above two.
  • the computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination thereof.
  • Examples of computer readable storage media may include, but are not limited to: an electrical connection having at least one conductor, a portable computer disk, a hard drive, random access memory (RAM), read only memory (ROM), erasable programmable read only memory ( Erasable Programmable Read-Only Memory (EPROM), flash memory, optical fiber, portable compact disk read-only memory (Compact Disc Read-Only Memory, CD-ROM), optical storage device, magnetic storage device, or any suitable combination of the above.
  • a computer-readable storage medium may be any tangible medium that contains or stores a program for use by or in connection with an instruction execution system, apparatus, or device.
  • a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code therein. Such propagated data signals may take many forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above.
  • a computer-readable signal medium may also be any computer-readable storage medium other than a computer-readable storage medium that can be sent, propagated, or transmitted for use by or in connection with an instruction execution system, apparatus, or device program.
  • Program code contained on a computer-readable storage medium can be transmitted using any appropriate medium, including but not limited to: wires, optical cables, radio frequency (Radio Frequency, RF), etc., or any suitable combination of the above.
  • the client and server can communicate using any currently known or future developed network protocol, such as HyperText Transfer Protocol (HTTP), and can communicate with digital data in any form or medium.
  • HTTP HyperText Transfer Protocol
  • Communications e.g., communications network
  • Examples of communication networks include Local Area Networks (LANs), Wide Area Networks (WANs), the Internet (e.g., the Internet), and end-to-end networks (e.g., ad hoc end-to-end networks), as well as any current network for knowledge or future research and development.
  • LANs Local Area Networks
  • WANs Wide Area Networks
  • the Internet e.g., the Internet
  • end-to-end networks e.g., ad hoc end-to-end networks
  • the above-mentioned computer-readable storage medium may be included in the above-mentioned electronic device; it may also be a separate exists without being incorporated into the electronic device.
  • the computer-readable storage medium carries at least one program.
  • the electronic device displays a floating control in the target page and displays the media stream in the floating control; upon detection When the user touches the floating control, the touch position is determined, and the current gesture operation starting from the touch position is detected; according to the target area where the touch position is located in the floating control, the detected The current operation type of the current gesture operation, and based on the current operation type and the current gesture operation, perform corresponding control on the floating control, where different operation types correspond to different areas in the floating control.
  • Computer program code for performing the operations of the present disclosure may be written in at least one programming language, including but not limited to object-oriented programming languages such as Java, Smalltalk, C++, and conventional programming languages, or a combination thereof.
  • a procedural programming language such as "C” or a similar programming language.
  • the program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server.
  • the remote computer can be connected to the user's computer through any kind of network, including a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computer (such as an Internet service provider through Internet connection).
  • LAN local area network
  • WAN wide area network
  • Internet service provider such as an Internet service provider through Internet connection
  • each block in the flowchart or block diagrams may represent a module, segment, or portion of code that contains at least one operable function for implementing the specified logical function.
  • Execute instructions may also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown one after another may actually execute substantially in parallel, or they may sometimes execute in the reverse order, depending on the functionality involved.
  • each block in the block diagrams and flowchart illustrations, and combinations of blocks in the block diagrams and flowchart illustrations can be implemented by special purpose hardware-based systems that perform the specified functions or operations, or may be implemented by special purpose hardware-based systems that perform the specified functions or operations.
  • the units involved in the embodiments of the present disclosure can be implemented in software or hardware.
  • the name of the module does not constitute a limitation on the module itself.
  • the suspension control display module can also be described as "a module that displays a suspension control in the target page and displays the media stream in the suspension control.”
  • exemplary types of hardware logic components include: field programmable gate array (Field Programmable Gate Array, FPGA), application specific integrated circuit (Application Specific Integrated Circuit, ASIC), application specific standard product (Application Specific Standard Parts (ASSP), System on Chip (SOC), Complex Programmable Logic Device (CPLD), etc.
  • a machine-readable storage medium may be a tangible medium that may contain or store a program for use by or in connection with an instruction execution system, apparatus, or device.
  • the machine-readable storage medium may be a machine-readable signal medium or a machine-readable storage medium.
  • Machine-readable storage media may include, but are not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices or devices, or any suitable combination of the foregoing.
  • machine-readable storage media include an electrical connection based on at least one wire, a portable computer disk, a hard disk, random access memory (RAM), read only memory (ROM), erasable programmable read only memory (EPROM), flash memory Flash memory, optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination of the above.
  • RAM random access memory
  • ROM read only memory
  • EPROM erasable programmable read only memory
  • flash memory Flash memory flash memory Flash memory
  • optical fiber portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination of the above.
  • a content display method including:
  • the suspension control is controlled accordingly, where different operation types correspond to different areas in the suspension control.
  • the operation type includes at least one of a first operation type and a second operation type.
  • the first operation type is to move the suspension control
  • the second operation type is Switch the media content currently displayed in the floating control.
  • the current operation type is a first operation type
  • performing corresponding control on the floating control based on the current operation type and the current gesture operation includes:
  • the action direction of the current gesture operation and at least one of the action distance and action speed of the current gesture operation, move the floating control to the corresponding display position in the target page .
  • the target page includes a preset page; the method further includes:
  • the background playback mode is triggered, the first media content currently displayed in the floating control is displayed as the background of the target page, and the display of the floating control is cancelled.
  • detecting that the background play mode is triggered in the target page includes:
  • a preset gesture operation is received, it is determined that the background play mode is detected to be triggered, wherein the preset gesture operation is set to trigger the background play mode.
  • the operation type includes a first operation type, and the first operation type is moving the suspension control;
  • the current operation type is the first operation type
  • performing corresponding control on the floating control based on the current operation type and the current gesture operation includes:
  • the background play mode is triggered, including:
  • the current display position of the floating control is the target display position, it is determined that the background playback mode is detected to be triggered.
  • the target display position includes a position within a preset range in the target page, and the preset range contains a center point of the target page.
  • the target page includes a message interaction page, and displaying the first media content currently displayed in the floating control as the background of the target page includes:
  • the method after displaying the first media content currently displayed in the floating control as the background of the target page and canceling the display of the floating control, the method includes:
  • the method after switching to the hidden state play mode to display the first media content, the method further includes:
  • the media content currently displayed in the target page is switched.
  • the method after switching to the hidden state play mode to display the first media content, the method further includes:
  • the preset control is set to at least one of the following:
  • displaying the first media content currently displayed in the floating control as the background of the target page and canceling the display of the floating control includes:
  • the associated information of the first media content from the preset database, continue to display the first media content based on the canvas switching component in the background view based on the associated information, and cancel the display of the floating control.
  • the associated information includes at least one of media identification, playback progress and playback status.
  • the current operation type is a second operation type
  • performing corresponding control on the floating control based on the current operation type and the current gesture operation includes:
  • the second media content currently displayed in the floating control is switched to a third media content, wherein the third media content is the media stream The previous media content or the next media content of the second media content described in .
  • a canvas switching component is bound to the floating control, the canvas switching component contains multiple canvases, the canvas is configured with a media player, and the media player is set to Play the media content loaded in the corresponding canvas to display the media content in the floating control;
  • switching the second media content currently displayed in the floating control to the third media content includes:
  • the current gesture operation is transferred to the canvas switching component, so that the canvas switching component operates according to the action direction of the current gesture operation and the second media currently displayed in the floating control.
  • the first content identifier of the content determines the second content identifier of the third media content to be switched;
  • the second content identification is broadcast to multiple canvases through the canvas switching component, so that the canvas matching the second content identification plays the second media content through the corresponding media player.
  • a content display device including:
  • a suspension control display module is configured to display the suspension control in the target page and display the media stream in the suspension control
  • a gesture operation detection module configured to determine the touch position in response to detecting that the user touches the floating control, and detect the current gesture operation starting from the touch position;
  • the floating control control module is configured to determine the current operation type of the detected current gesture operation according to the target area where the touch position is located in the floating control, and determine the current operation type based on the current operation type and the current gesture operation. , perform corresponding control on the suspension control, where different operation types correspond to different areas in the suspension control.
  • an electronic device including:
  • a storage device arranged to store at least one program
  • the at least one processor When the at least one program is executed by the at least one processor, the at least one processor is caused to implement the content display method provided by the embodiment of the present disclosure.
  • a storage medium containing computer-executable instructions is provided.
  • the computer-executable instructions when executed by a computer processor, perform the content display method provided by the embodiment of the present disclosure.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)
  • Position Input By Displaying (AREA)
  • Stored Programmes (AREA)
  • Two-Way Televisions, Distribution Of Moving Picture Or The Like (AREA)

Abstract

本公开实施例公开了内容展示方法、装置、设备及存储介质，涉及计算机技术领域。该方法包括：在目标页面中显示悬浮控件，并在悬浮控件中展示媒体流，响应于检测到用户触摸悬浮控件，确定触摸位置，并检测以触摸位置为起点的当前手势操作，根据触摸位置在悬浮控件中所处的目标区域，确定所检测到的当前手势操作的当前操作类型，并基于当前操作类型和当前手势操作，对悬浮控件进行相应的控制，其中，不同操作类型对应悬浮控件中的不同区域。

Description

内容展示方法、装置、设备及存储介质
本申请要求在2022年8月19日提交中国专利局、申请号为202210999813.0的中国专利申请的优先权，该申请的全部内容通过引用结合在本申请中。
技术领域
本公开实施例涉及计算机技术领域，例如涉及内容展示方法、装置、设备及存储介质。
背景技术
随着互联网技术和终端技术的快速发展，应用程序中能够展示的内容越来越丰富。
目前，很多应用程序支持在应用页面中显示悬浮窗等悬浮控件，在应用页面和悬浮窗中分别显示不同的内容，使得用户可以同时观看不同的内容。然而，为了提升用户体验，需要针对基于悬浮窗的内容显示方案进行优化。
发明内容
本公开实施例提供了内容展示方法、装置、存储介质及设备，可以优化相关技术的基于悬浮控件的内容展示方案。
第一方面，本公开实施例提供了内容展示方法，包括：
在目标页面中显示悬浮控件，并在所述悬浮控件中展示媒体流；
响应于检测到用户触摸所述悬浮控件，确定触摸位置，并检测以所述触摸位置为起点的当前手势操作；
根据所述触摸位置在所述悬浮控件中所处的目标区域，确定所检测到的当前手势操作的当前操作类型，并基于所述当前操作类型和所述当前手势操作，对所述悬浮控件进行相应的控制，其中，不同操作类型对应所述悬浮控件中的 不同区域。
第二方面，本公开实施例还提供了内容展示装置，包括：
悬浮控件显示模块，设置为在目标页面中显示悬浮控件，并在所述悬浮控件中展示媒体流；
手势操作检测模块，设置为响应于检测到用户触摸所述悬浮控件，确定触摸位置，并检测以所述触摸位置为起点的当前手势操作；
悬浮控件控制模块，设置为根据所述触摸位置在所述悬浮控件中所处的目标区域，确定所检测到的当前手势操作的当前操作类型，并基于所述当前操作类型和所述当前手势操作，对所述悬浮控件进行相应的控制，其中，不同操作类型对应所述悬浮控件中的不同区域。
第三方面，本公开实施例还提供了一种电子设备，包括：
至少一个处理器；
存储装置，设置为存储至少一个程序，
当所述至少一个程序被所述至少一个处理器执行，使得所述至少一个处理器实现本公开实施例提供的内容展示方法。
第四方面，本公开实施例还提供了一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时执行本公开实施例提供的内容展示方法。
附图说明
图1为本公开实施例所提供的一种内容展示方法的流程示意图；
图2为本公开实施例所提供的一种界面示意图；
图3为本公开实施例所提供的一种内容展示方法的流程示意图；
图4为本公开实施例所提供的一种界面交互示意图；
图5为本公开实施例所提供的另一种界面交互示意图；
图6为本公开实施例所提供的一种内容展示装置的结构示意图；
图7为本公开实施例所提供的一种电子设备的结构示意图。
具体实施方式
本文使用的术语“包括”及其变形是开放性包括，即“包括但不限于”。术语“基于”是“至少部分地基于”。术语“一个实施例”表示“至少一个实施例”；术语“另一实施例”表示“至少一个另外的实施例”；术语“一些实施例”表示“至少一些实施例”。其他术语的相关定义将在下文描述中给出。
需要注意，本公开中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分，并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系。
需要注意，本公开中提及的“一个”、“多个”的修饰是示意性而非限制性的，本领域技术人员应当理解，除非在上下文另有明确指出，否则应该理解为“至少一个”。
本公开实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明，而并不是用于对这些消息或信息的范围进行限制。
可以理解的是，在使用本公开实施例公开的技术方案之前，均应当依据相关法律法规通过恰当的方式对本公开所涉及个人信息的类型、使用范围、使用场景等告知用户并获得用户的授权。
例如，在响应于接收到用户的主动请求时，向用户发送提示信息，以明确地提示用户，用户请求执行的操作将需要获取和使用到用户的个人信息。从而，使得用户可以根据提示信息来自主地选择是否向执行本公开技术方案的操作的电子设备、应用程序、服务器或存储介质等软件或硬件提供个人信息。
作为一种可选的但非限定性的实现方式，响应于接收到用户的主动请求，向用户发送提示信息的方式例如可以是弹窗的方式，弹窗中可以以文字的方式呈现提示信息。此外，弹窗中还可以承载供用户选择“同意”或者“不同意”向电子设备提供个人信息的选择控件。
可以理解的是，上述通知和获取用户授权过程仅是示意性的，不对本公开的实现方式构成限定，其它满足相关法律法规的方式也可应用于本公开的实现方式中。
可以理解的是，本技术方案所涉及的数据(包括但不限于数据本身、数据的获取或使用)应当遵循相应法律法规及相关规定的要求。
图1为本公开实施例所提供的一种内容展示方法的流程示意图，本公开实施例适用于内容展示的情形，该方法可以由内容展示装置来执行，该装置可以通过软件和硬件中至少之一的形式实现，可选的，通过电子设备来实现，该电子设备可以是手机、智能手表、平板电脑以及个人数字助理等移动终端，也可以为个人计算机(Personal Computer，PC)端或服务器等设备。
如图1所示，所述方法包括：
步骤101、在目标页面中显示悬浮控件，并在所述悬浮控件中展示媒体流。
本公开实施例中，目标页面可以是预设应用程序中的页面，预设应用程序的类型不做限定，例如可以是视频类应用程序、直播类应用程序、购物类应用程序或资讯类应用程序等，还可以是其他类型的应用程序。目标页面可以是预设应用程序中的任意页面，页面类型以及所包含的页面内容不做限定，例如可以是消息交互页面、媒体内容展示页面、商品详情页面或资讯信息显示页面等。
示例性的，悬浮控件可理解为视图元素，在目标页面中显示悬浮控件，可理解为在目标页面上层叠加显示该视图元素。其中，悬浮控件的属性，如形状、尺寸、颜色、透明度以及显示位置等，可根据实际需求设置，例如悬浮控件可以是悬浮框形态的控件。
本公开实施例中，在悬浮控件中展示媒体流，媒体流中包含的媒体内容可以包括图像、图文、音频或视频等。悬浮控件中展示的媒体流可以是向当前用户推送的媒体流，例如，根据当前用户生成相应的媒体流确定方式，根据该媒体流确定方式来确定针对当前用户的个性化的媒体流。本公开实施例还可适用 于内容共享场景，也即当前用户可以与至少一个对端用户进行媒体流的共享，悬浮控件中展示的媒体流还可以是共享媒体流。
图2为本公开实施例所提供的一种界面示意图，如图2所示，在目标页面201中显示悬浮控件202。可选的，悬浮控件202位于目标页面201的左上角。在悬浮控件202中展示媒体流。
步骤102、响应于检测到用户触摸所述悬浮控件，确定触摸位置，并检测以所述触摸位置为起点的当前手势操作。
示例性的，用户可以通过手指等身体部位或触控笔等物体(以下统称触摸物)来触摸电子设备的屏幕(触摸屏)，例如可以触摸目标页面中显示的悬浮框。当用户通过触摸物接触触摸屏中显示的悬浮控件时，通过触摸屏可以检测到触摸物的触摸位置，并通过触摸屏继续检测以该触摸位置为起点的手势操作，该手势操作例如可以是滑动、长按或拖动等。
步骤103、根据所述触摸位置在所述悬浮控件中所处的目标区域，确定所检测到的当前手势操作的当前操作类型，并基于所述当前操作类型和所述当前手势操作，对所述悬浮控件进行相应的控制，其中，不同操作类型对应所述悬浮控件中的不同区域。
示例性的，可以将悬浮控件划分为至少两个区域，示例性的划分方式不做限定，如上下两个区域，左右两个区域，或者中心区域和周围区域等。如图2所示，悬浮控件202划分为左右两个区域，分别为第一区域203和第二区域204。
其中，不同区域对应于同一种手势操作的不同操作类型，不同操作类型设置为以不同的方式对悬浮控件进行控制。示例性的，操作类型可以包括移动悬浮控件(记为第一操作类型)、切换悬浮控件中当前展示的媒体内容(记为第二操作类型)、以及调整悬浮框尺寸(记为第三操作类型)中的至少一个。移动悬浮控件可以理解为调整悬浮控件在目标页面中的显示位置；切换悬浮控件中当前展示的媒体内容，可以理解为将悬浮控件中当前展示的媒体内容更换为媒体流中的另一媒体内容(如上一个媒体内容或下一个媒体内容)等；调整悬浮框 尺寸可理解为调整悬浮框的宽度、高度或宽高比等。
例如，如图2所示，第一区域203对应于第一操作类型，第二区域204对应于第二操作类型。
示例性的，在检测到当前手势操作时，可以根据触摸位置所落入的区域(记为目标区域)来确定当前手势操作的当前操作类型，进而基于当前操作类型和当前手势操作，对悬浮控件进行相应的控制。
如图2所示，用户手指触摸悬浮控件的触摸位置落入第一区域203，则目标区域为第一区域203，对应的操作类型为第一操作类型，则根据当前手势操作控制悬浮控件移动。假设用户手指触摸悬浮控件的触摸位置落入第二区域204，则目标区域为第二区域204，对应的操作类型为第二操作类型，则根据当前手势操作切换悬浮控件中当前展示的媒体内容。
本公开实施例提供的内容展示方法，在目标页面中显示悬浮控件，并在悬浮控件中展示媒体流，在检测到用户触摸悬浮控件的情况下，确定触摸位置，并检测以触摸位置为起点的当前手势操作，根据触摸位置在悬浮控件中所处的目标区域，确定所检测到的当前手势操作的当前操作类型，并基于当前操作类型和当前手势操作，对悬浮控件进行相应的控制，其中，不同操作类型对应悬浮控件中的不同区域。通过采用上述技术方案，可以精准识别用户手势操作的操作类型，并根据不同的操作类型对用于展示媒体流的悬浮控件进行不同控制，使得对悬浮控件的控制更加灵活，也使得媒体内容的展示更加灵活，满足用户多样化的媒体内容观看需求，提升用户体验。
在一些实施例中，所述当前操作类型为第一操作类型，所述基于所述当前操作类型和所述当前手势操作，对所述悬浮控件进行相应的控制，包括：基于所述第一操作类型、所述当前手势操作的作用方向、以及所述当前手势操作的作用距离和作用速度中至少之一，将所述悬浮控件移动至所述目标页面中相应的显示位置。这样设置的好处在于，可以精准地控制悬浮控件的移动。
示例性的，当前手势操作例如可以是滑动操作。其中，作用方向可以是滑 动方向，对应于悬浮控件的移动方向，两者可以是同方向；作用距离可以是滑动距离，对应于悬浮控件的移动距离，两者可以相等或成正相关关系；作用速度可以是滑动速度，对应于悬浮控件的移动速度，两者可以相等或成正相关关系。
在一些实施例中，所述目标页面包括预设页面，所述方法还包括：在所述目标页面中，检测到背景播放模式被触发，将所述悬浮控件中当前展示的第一媒体内容，作为所述目标页面的背景进行展示，并取消所述悬浮控件的显示。这样设置的好处在于，可以灵活切换媒体内容的展示方式，使用户能够以不同的方式查看预设页面的页面内容以及媒体流中的媒体内容。
示例性的，背景播放模式可以理解为将悬浮控件中的媒体内容作为预设页面的背景进行播放的模式。预设页面可以包括页面内容的显示面积占页面总显示面积的比例小于预设比例阈值的页面，用于显示页面内容之外的区域可以显露出背景内容。预设页面例如可以包括消息交互页面(如聊天页面或消息列表页面等)，还可以包括个人主页等页面。
在一些实施例中，所述目标页面包括消息交互页面，所述将所述悬浮控件中当前展示的第一媒体内容，作为所述目标页面的背景进行展示，包括：将所述目标页面的背景替换为所述悬浮控件中当前展示的第一媒体内容，以使所述消息交互页面的页面内容显示于所述第一媒体内容的上层，其中，所述页面内容包括消息内容和所述消息内容的关联内容中至少之一。
示例性的，以消息交互页面为例，页面内容可以包括消息内容以及消息内容的关联内容，关联内容可以是消息交互对象的对象标识(如用户名称或用户头像等)等。这样，用户可以边收发消息边全屏(目标页面处于全屏显示状态的情况)查看媒体内容，兼顾消息交互体验和媒体内容观看体验。
在一些实施例中，所述在所述目标页面中，检测到背景播放模式被触发，包括：在所述目标页面中，接收到预设手势操作，则确定检测到背景播放模式被触发，其中，所述预设手势操作设置为触发所述背景播放模式。这样设置的 好处在于，可以便捷地通过输入预设手势操作，来触发背景播放模式。其中，预设手势操作例如可以是作用于悬浮控件的双指放大操作，也即两个手指触摸悬浮控件并向相反的方向移动。
在一些实施例中，所述操作类型包括第一操作类型，所述第一操作类型为移动所述悬浮控件；其中，所述当前操作类型为第一操作类型，所述基于所述当前操作类型和所述当前手势操作，对所述悬浮控件进行相应的控制，包括：基于所述第一操作类型和所述当前手势操作，将所述悬浮控件移动至所述目标页面中相应的显示位置；其中，所述在所述目标页面中，检测到背景播放模式被触发，包括：检测到所述用户停止触摸屏幕，判断所述悬浮控件的当前显示位置是否为目标显示位置；响应于所述悬浮控件的当前显示位置是目标显示位置，确定检测到背景播放模式被触发。这样设置的好处在于，可以复用第一操作类型，在移动悬浮框的过程中便捷地实现触发背景播放模式。
示例性的，目标显示位置可以根据实际需求设置。例如，目标显示位置包括所述目标页面中的预设范围内的位置。可选的，所述预设范围含有所述目标页面的中心点。可选的，所述预设范围的至少一个边界与所述目标页面的边界重合。
在一些实施例中，判断所述悬浮控件的当前显示位置是否为目标显示位置，若所述悬浮控件的当前显示位置是目标显示位置，则确定检测到背景播放模式被触发，可包括：判断所述悬浮控件的当前显示位置是否为目标显示位置，若所述悬浮控件的当前显示位置是目标显示位置，则继续判断所述当前显示位置保持为所述目标显示位置的时长是否大于预设时长阈值，若大于预设时长阈值，则确定检测到背景播放模式被触发。这样设置的好处在于，可以使得用户移动悬浮控件的操作更加顺滑，在不需要在背景展示媒体内容时，不需要避开目标显示位置所处预设范围，可以防止误操作。
在一些实施例中，在所述将所述悬浮控件中当前展示的第一媒体内容，作为所述目标页面的背景进行展示，并取消所述悬浮控件的显示之后，包括：检 测到当前媒体内容播放完毕，则自动切换至展示媒体流中的下一个媒体内容，或自动重复播放当前媒体内容。这样设置的好处在于，可以减少用户的主动操作，自动进行连续播放或循环播放，自动播放方式可以由用户预先自主设置。
在一些实施例中，在所述将所述悬浮控件中当前展示的第一媒体内容，作为所述目标页面的背景进行展示，并取消所述悬浮控件的显示之后，包括：响应于所述用户作用于所述目标页面的第一预设操作，切换至隐藏状态播放模式以展示所述第一媒体内容，其中，在所述隐藏状态播放模式下，隐藏所述背景播放模式中所述目标页面中显示于所述背景上层的页面内容。这样设置的好处在于，通过隐藏页面内容的显示，可以快速切换为全屏方式展示媒体内容，从而获得更纯净的媒体内容观看体验。
示例性的，以消息交互页面为例，需要隐藏的页面内容可以包括上文所述的消息内容以及消息内容的关联内容等。这样，用户可以获得更加纯净的媒体内容观看页面。其中，第一预设操作可以是对预设隐藏按钮的触发操作，也可以是滑动操作，该滑动操作一般与用于浏览消息内容的滑动操作方向不同。例如，上下滑动操作设置为浏览消息内容，左滑操作或右滑操作可以设置为隐藏页面内容。可选的，若通过滑动操作触发隐藏页面内容，可以设定页面内容的隐藏过程的动态效果，如页面内容跟随滑动操作在预设页面中移动，并逐渐从预设页面中消失，以达到隐藏效果。
在一些实施例中，在所述切换至隐藏状态播放模式以展示所述第一媒体内容之后，还包括：响应于所述用户作用于所述目标页面的第二预设操作，切换所述目标页面中当前展示的媒体内容。这样设置的好处在于，在以隐藏状态播放模式展示媒体内容的过程中，可以允许用户通过输入第二预设操作的方式切换媒体内容，提升观看体验。其中，第二预设操作例如可以是滑动操作，如向上滑动或向下滑动等。
可选的，在所述切换至隐藏状态播放模式以展示所述第一媒体内容之后，还包括：响应于所述用户作用于所述目标页面的第三预设操作，切换至所述背 景播放模式。这样设置的好处在于，可以便捷地切换回页面内容的展示，如恢复聊天内容的显示。其中，第三预设操作可以是对预设显示按钮的触发操作，也可以是滑动操作，该滑动操作可以与第一预设操作方向相反，如第一预设操作为向右滑动，第三预设操作可以为向左滑动。
在一些实施例中，在所述切换至隐藏状态播放模式以展示所述第一媒体内容之后，还包括：在所述目标页面中显示预设控件。其中，所述预设控件设置为执行以下至少一项：对所述目标页面中展示的媒体内容进行控制；针对所述目标页面中展示的媒体内容进行交互；以及，触发所述悬浮控件的显示并将所述目标页面中展示的媒体内容切换至所述悬浮控件中进行展示。
可选的，预设控件的数量可以是至少一个，不同预设控件的显示方式可以不同，例如，第一预设控件可以在隐藏页面内容之后自动显示，第二预设控件响应于用户针对目标页面的触发操作(如点击目标页面等)而显示。示例性的，对媒体内容进行控制可包括切换媒体内容、暂停媒体内容的播放、或屏蔽媒体内容声音等。针对所述目标页面中展示的媒体内容进行交互，可包括输入点赞操作、输入收藏操作、输入转发操作或输入评论内容等。
在一些实施例中，所述当前操作类型为第二操作类型，所述基于所述当前操作类型和所述当前手势操作，对所述悬浮控件进行相应的控制，包括：基于所述第二操作类型和所述当前手势操作的作用方向，将所述悬浮控件中当前展示的第二媒体内容切换为第三媒体内容，其中，所述第三媒体内容为所述媒体流中所述第二媒体内容的上一个媒体内容或下一个媒体内容。这样设置的好处在于，无需切换至全屏模式，也无需在悬浮控件中显示控件，即可根据手势操作的作用方向快速确定待切换的媒体内容，提高内容切换效率。可选的，第二媒体内容可以与第一媒体内容相同或不同。
图3为本公开实施例所提供的一种内容展示方法的流程示意图，本公开实施例以上述实施例中多个可选方案为基础进行优化，示例性的，该方法包括如下步骤：
步骤301、在目标页面中显示悬浮控件，并在悬浮控件中展示媒体流。
图4为本公开实施例所提供的一种界面交互示意图，如图4所示，在目标页面401中显示悬浮控件402，目标页面401例如可以是消息交互页面，悬浮控件402中可以展示视频流，目标页面401底部可以显示用于触发消息输入的相关控件，如图中的话筒控件、输入框控件和表情控件。其中，视频流中可以包括不同用户发布的视频作品。
步骤302、在检测到用户触摸悬浮控件的情况下，确定触摸位置，并检测以触摸位置为起点的手势操作。
如图4所示，用户可以以手指触摸屏幕，当用户手指触摸悬浮控件402时，确定手指的触摸位置，并继续检测以该触摸位置为起点的手势操作，该手势操作例如可以是滑动操作。
步骤303、根据触摸位置在悬浮控件中所处的目标区域，确定所检测到的当前手势操作的当前操作类型。
示例性的，如图4所示，悬浮控件402中可以划分两个区域，第一区域403和第二区域(可以是悬浮控件402中除第一区域403之外的区域)，为了便于用户视觉上快速明确第一区域的位置，可以在第一区域403内显示区域标识，如图4中的横线。其中，第一区域403对应于第一操作类型，第二区域对应于第二操作类型，第一操作类型为移动悬浮控件，第二操作类型为切换悬浮控件中当前展示的媒体内容。假设触摸位置落入第一区域403内，则确定所检测到的当前手势操作为第一操作类型。
步骤304、判断当前操作类型是否为第一操作类型，若当前操作类型是第一操作类型，则执行步骤305；若当前操作类型不是第一操作类型，执行步骤310。
步骤305、基于第一操作类型、当前手势操作的作用方向、当前手势操作的作用距离和作用速度中至少之一，将悬浮控件移动至目标页面中相应的显示位置。
示例性的，在确定当前操作类型为第一操作类型的情况下，可认为当前用户想要移动悬浮控件，则根据当前手势操作的作用方向、以及当前手势操作的作用距离和作用速度等，跟随当前手势操作将悬浮控件动态移动至目标页面中相应的显示位置。
步骤306、检测到用户停止触摸屏幕，判断悬浮控件的当前显示位置是否为目标显示位置，若悬浮控件的当前显示位置是目标显示位置，则执行步骤307；若悬浮控件的当前显示位置不是目标显示位置，结束流程。
示例性的，在将悬浮控件移动至目标页面中相应的显示位置的过程中，也即在用户停止触摸屏幕之前，也可实时判断悬浮控件的当前显示位置是否为目标显示位置，若悬浮控件的当前显示位置是目标显示位置，则可以显示提示信息，提示信息设置为提示当前用户若此时松手，可在背景播放悬浮控件内的媒体内容。如图4所示，用户将悬浮控件移动至目标页面中央时，可认为当前显示位置为目标显示位置，可在悬浮控件显示提示信息“松开在背景播放”404。
步骤307、确定检测到背景播放模式被触发，将悬浮控件中当前展示的第一媒体内容，作为目标页面的背景进行展示，并取消悬浮控件的显示。
示例性的，若用户松开手指时，悬浮控件的当前显示位置为目标显示位置，则可在目标页面的背景中继续展示悬浮控件中的媒体内容。
如图4所示，用户松手之前，悬浮控件内正在播放风景视频(第一媒体内容)，用户松手后，该风景视频可继续在目标页面的背景中继续播放，且悬浮控件消失。
步骤308、响应于用户作用于目标页面的第一预设操作，切换至隐藏状态播放模式以展示第一媒体内容，以隐藏背景播放模式中显示于背景上层的页面内容，在目标页面中显示预设控件。
示例性的，第一预设操作可以滑动操作。在目标页面中，用户可以通过上下滑动来浏览消息内容，第一预设操作可以是左右滑动。如图4所示，用户输入向右滑动操作，消息内容和用于触发消息输入的相关控件等页面内容被隐藏， 在目标页面中继续播放风景视频，并可在目标页面中显示预设控件，预设控件例如可包括至少一个交互控件，如图中的4个交互控件405，预设控件例如还可包括悬浮控件切换控件，如图中的切换按钮406。
步骤309、响应于用户作用于目标页面的第二预设操作，切换目标页面中当前展示的媒体内容。
示例性的，页面内容隐藏后，用户可以在目标页面中切换媒体内容。如图4所示，用户可以通过输入向上滑动操作，来切换视频内容，将风景视频切换为小丑视频。
可选的，如图4所示，用户还可以通过触发切换按钮406，来触发悬浮框的显示并将目标页面中当前展示的小丑视频切换至悬浮控件中继续播放。
步骤310、基于第二操作类型和当前手势操作的作用方向，将悬浮控件中当前展示的第二媒体内容切换为第三媒体内容。
其中，第三媒体内容为媒体流中第二媒体内容的上一个媒体内容或下一个媒体内容。
示例性的，假设用户手指触摸屏幕时确定的触摸位置落入第二区域，则对应的操作类型为第二操作类型，可认为当前用户想要切换悬浮控件内的媒体内容。图5为本公开实施例所提供的另一种界面交互示意图，如图5所示，用户输入向下滑动操作，可将悬浮控件中当前展示的风景视频(第二媒体内容)切换为人物视频(第三媒体内容)。通过在悬浮控件中输入向上滑动操作或向下滑动操作，可以便捷地实现媒体内容的切换。
本公开实施例提供的内容展示方法，在消息交互页面中显示用于展示媒体内容的悬浮控件，可以实现边聊天边观看媒体内容，能够精准识别用户手势操作的操作类型，并根据不同的操作类型对用于展示媒体流的悬浮控件进行移动或切换媒体内容，使得对悬浮控件的控制更加灵活，在移动悬浮控件的过程中，还可以将媒体内容切换至页面背景中继续播放，并在目标页面中提供隐藏页面内容的功能，使得用户可以便捷地切换至全屏观看媒体内容，并在全屏播放过 程中，提供多种预设控件，方便用户基于媒体内容进行控制或交互，可切换回悬浮控件播放，使得媒体内容的展示更加灵活，满足用户多样化的媒体内容观看需求，提升用户体验。
在一些实施例中，所述将所述悬浮控件中当前展示的第一媒体内容，作为所述目标页面的背景进行展示，并取消所述悬浮控件的显示，包括：将画布切换组件从所述悬浮控件中解绑，并将所述画布切换组件绑定至所述目标页面的背景视图上，其中，所述画布切换组件中包含多个画布，所述画布配置有媒体播放器，所述媒体播放器设置为播放所述悬浮控件中当前展示的第一媒体内容；从预设数据库中获取所述第一媒体内容的关联信息，基于所述关联信息在所述背景视图中基于所述画布切换组件继续展示所述第一媒体内容，并取消所述悬浮控件的显示，其中，所述关联信息包括媒体标识、播放进度和播放状态中的至少一种。这样设置的好处在于，可以保证媒体内容展示切换的流畅性。
示例性的，画布切换组件又称页面切换组件或视图切换组件(ViewPager)，画布切换组件中包含多个画布，画布又称为视图持有者(ViewHolder)，每个画布可以设置为缓存一个媒体内容。其中，可以通过画布切换组件批量从服务端拉取多个媒体内容，一次拉取的媒体内容的数量可以与画布切换组件中画布的数量一致，例如，若一次拉取5个视频，则可以有5个画布。画布配置有媒体播放器，媒体播放器设置为播放悬浮控件中当前展示的媒体内容，每个画布可独立配置媒体播放器，也可多个画布共用一个媒体播放器，在此不做限定。
本公开实施例中，悬浮控件和背景视图均可视为画布切换组件的容器，在需要将悬浮控件中当前展示的第一媒体内容，作为目标页面的背景进行展示时，可以将画布切换组件从悬浮控件中取出(例如可调用remove view函数)，并放入背景视图中，取出的过程可视为解绑(例如可调用addview函数)，放入的过程可视为绑定。为了保证更换容器前后媒体内容播放的连续性，在悬浮控件中展示媒体内容的过程中，可以实时向预设数据库中存入当前展示的媒体内容的关联信息，如媒体标识(设置为表示媒体内容的身份，其形式不做限定)、播放 进度和播放状态(可包括正在播放和暂停播放等)中的至少一种，在画布切换组件绑定至背景视图后，可从预设数据库中获取最新的关联信息，并基于所获取的关联信息在背景视图中通过画布切换组件继续展示媒体内容。可选的，将画布切换组件绑定至目标页面的背景视图后，可以重新配置媒体播放器的预设参数，以适配背景视图，预设参数例如可包括媒体播放器的尺寸等。
在一些实施例中，所述悬浮控件中绑定有画布切换组件，所述画布切换组件中包含多个画布，所述画布配置有媒体播放器，所述媒体播放器设置为播放对应画布中加载的媒体内容，以实现在所述悬浮控件中展示媒体内容；其中，所述基于所述第二操作类型和所述当前手势操作的作用方向，将所述悬浮控件中当前展示的第二媒体内容切换为第三媒体内容，包括：基于所述第二操作类型，将所述当前手势操作传递至所述画布切换组件，以使所述画布切换组件根据所述当前手势操作的作用方向以及所述悬浮控件中当前展示的第二媒体内容的第一内容标识，确定待切换的第三媒体内容的第二内容标识；通过所述画布切换组件向多个画布广播所述第二内容标识，以使与所述第二内容标识相匹配的画布通过对应的媒体播放器播放所述第二媒体内容。这样设置的好处在于，可以精准地实现悬浮控件内的媒体内容切换。
示例性的，在画布切换组件中，可以为多个画布中加载的媒体内容进行编号，可记为内容标识，在检测到第二操作类型的手势操作后，根据作用方向和第一内容标识，确定第二内容标识，并应用事件总线(EventBus，可理解为一种广播机制)的观察者模式，通知画布切换组件中的所有画布，将自身缓存的视频的内容标识与第二内容标识进行匹配，以判断是否应由自己处理，对于匹配成功的画布，对相应的媒体内容进行加载以及渲染画面等操作，并通过媒体播放器进行播放。
图6为本公开实施例所提供的一种内容展示装置结构示意图，如图6所示，所述装置包括：悬浮控件显示模块601、手势操作检测模块602以及悬浮控件控制模块603。
悬浮控件显示模块601，设置为在目标页面中显示悬浮控件，并在所述悬浮控件中展示媒体流；
手势操作检测模块602，设置为响应于检测到用户触摸所述悬浮控件，确定触摸位置，并检测以所述触摸位置为起点的当前手势操作；
悬浮控件控制模块603，设置为根据所述触摸位置在所述悬浮控件中所处的目标区域，确定所检测到的当前手势操作的当前操作类型，并基于所述当前操作类型和所述当前手势操作，对所述悬浮控件进行相应的控制，其中，不同操作类型对应所述悬浮控件中的不同区域。
本公开实施例所提供的内容展示装置，在目标页面中显示悬浮控件，并在悬浮控件中展示媒体流，在检测到用户触摸悬浮控件的情况下，确定触摸位置，并检测以触摸位置为起点的当前手势操作，根据触摸位置在悬浮控件中所处的目标区域，确定所检测到的当前手势操作的当前操作类型，并基于当前操作类型和当前手势操作，对悬浮控件进行相应的控制，其中，不同操作类型对应悬浮控件中的不同区域。通过采用上述技术方案，可以精准识别用户手势操作的操作类型，并根据不同的操作类型对用于展示媒体流的悬浮控件进行不同控制，使得对悬浮控件的控制更加灵活，也使得媒体内容的展示更加灵活，满足用户多样化的媒体内容观看需求，提升用户体验。
可选的，所述操作类型包括第一操作类型和第二操作类型中至少之一，所述第一操作类型为移动所述悬浮控件，所述第二操作类型为切换所述悬浮控件中当前展示的媒体内容。
可选的，所述悬浮控件控制模块响应于所述当前操作类型为第一操作类型，执行所述基于所述当前操作类型和所述当前手势操作，对所述悬浮控件进行相应的控制时，设置为：
基于所述第一操作类型、所述当前手势操作的作用方向、以及所述当前手势操作的作用距离和作用速度中至少之一，将所述悬浮控件移动至所述目标页面中相应的显示位置。
可选的，所述目标页面包括预设页面；所述装置还包括：
背景播放模式触发模块，设置为在所述目标页面中，检测到背景播放模式被触发，将所述悬浮控件中当前展示的第一媒体内容，作为所述目标页面的背景进行展示，并取消所述悬浮控件的显示。
可选的，所述在所述目标页面中，检测到背景播放模式被触发，包括：在所述目标页面中，接收到预设手势操作，则确定检测到背景播放模式被触发，其中，所述预设手势操作设置为触发所述背景播放模式。
可选的，所述操作类型包括第一操作类型，所述第一操作类型为移动所述悬浮控件；所述悬浮控件控制模块，响应于所述当前操作类型为第一操作类型，执行所述基于所述当前操作类型和所述当前手势操作，对所述悬浮控件进行相应的控制时，设置为：基于所述第一操作类型和所述当前手势操作，将所述悬浮控件移动至所述目标页面中相应的显示位置；
其中，所述在所述目标页面中，检测到背景播放模式被触发，包括：
检测到所述用户停止触摸屏幕，判断所述悬浮控件的当前显示位置是否为目标显示位置；响应于所述悬浮控件的当前显示位置是目标显示位置，确定检测到背景播放模式被触发。
可选的，所述目标显示位置包括所述目标页面中的预设范围内的位置，所述预设范围含有所述目标页面的中心点。
可选的，所述目标页面包括消息交互页面；所述将所述悬浮控件中当前展示的第一媒体内容，作为所述目标页面的背景进行展示，包括：
将所述目标页面的背景替换为所述悬浮控件中当前展示的第一媒体内容，以使所述消息交互页面的页面内容显示于所述第一媒体内容的上层，其中，所述页面内容包括消息内容和所述消息内容的关联内容中至少之一。
可选的，该装置还可包括：
隐藏状态播放模式切换模块，设置为响应于所述用户作用于所述目标页面的第一预设操作，切换至隐藏状态播放模式以展示所述第一媒体内容，其中， 在所述隐藏状态播放模式下，隐藏所述背景播放模式中显示于所述背景上层的页面内容。
可选的，该装置还可包括：
内容切换模块，设置为在所述切换至隐藏状态播放模式以展示所述第一媒体内容之后，响应于所述用户作用于所述目标页面的第二预设操作，切换所述目标页面中当前展示的媒体内容。
可选的，该装置还可包括：
预设控件显示模块，设置为在所述切换至隐藏状态播放模式以展示所述第一媒体内容之后，在所述目标页面中显示预设控件；其中，所述预设控件设置为执行以下至少一项：对所述目标页面中展示的媒体内容进行控制；针对所述目标页面中展示的媒体内容进行交互；以及，触发所述悬浮控件的显示并将所述目标页面中展示的媒体内容切换至所述悬浮控件中进行展示。
可选的，所述背景展示模块在执行将所述悬浮控件中当前展示的第一媒体内容，作为所述目标页面的背景进行展示，并取消所述悬浮控件的显示时，设置为：
将画布切换组件从所述悬浮控件中解绑，并将所述画布切换组件绑定至所述目标页面的背景视图上，其中，所述画布切换组件中包含多个画布，所述画布配置有媒体播放器，所述媒体播放器设置为播放所述悬浮控件中当前展示的第一媒体内容；
从预设数据库中获取所述第一媒体内容的关联信息，基于所述关联信息在所述背景视图中基于所述画布切换组件继续展示所述第一媒体内容，并取消所述悬浮控件的显示，其中，所述关联信息包括媒体标识、播放进度和播放状态中的至少一种。
可选的，所述悬浮控件控制模块响应于所述当前操作类型为第二操作类型，在执行所述基于所述当前操作类型和所述当前手势操作，对所述悬浮控件进行相应的控制时，设置为：
基于所述第二操作类型和所述当前手势操作的作用方向，将所述悬浮控件中当前展示的第二媒体内容切换为第三媒体内容，其中，所述第三媒体内容为所述媒体流中所述第二媒体内容的上一个媒体内容或下一个媒体内容。
可选的，所述悬浮控件中绑定有画布切换组件，所述画布切换组件中包含多个画布，所述画布配置有媒体播放器，所述媒体播放器设置为播放对应画布中加载的媒体内容，以实现在所述悬浮控件中展示媒体内容；
其中，所述基于所述第二操作类型和所述当前手势操作的作用方向，将所述悬浮控件中当前展示的第二媒体内容切换为第三媒体内容，包括：
基于所述第二操作类型，将所述当前手势操作传递至所述画布切换组件，以使所述画布切换组件根据所述当前手势操作的作用方向以及所述悬浮控件中当前展示的第二媒体内容的第一内容标识，确定待切换的第三媒体内容的第二内容标识；
通过所述画布切换组件向多个画布广播所述第二内容标识，以使与所述第二内容标识相匹配的画布通过对应的媒体播放器播放所述第二媒体内容。
本公开实施例所提供的内容展示装置可执行本公开任意实施例所提供的内容展示方法，具备执行方法相应的功能模块和效果。
值得注意的是，上述装置所包括的单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，功能单元的名称也只是为了便于相互区分，并不用于限制本公开实施例的保护范围。
图7为本公开实施例所提供的一种电子设备的结构示意图。下面参考图7，图7示出了适于用来实现本公开实施例的电子设备(例如图7中的终端设备或服务器)700的结构示意图。本公开实施例中的终端设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、个人数字助理(Personal Digital Assistant，PDA)、平板电脑(PAD)、便携式多媒体播放器(Portable Media Player，PMP)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图7示出的电子设备仅仅是一个示例，不应对本公 开实施例的功能和使用范围带来任何限制。
如图7所示，电子设备700可以包括处理器(例如中央处理器、图形处理器等)701，处理器701可以根据存储在只读存储器(Read-Only Memory，ROM)702中的程序或者从存储装置708加载到随机访问存储器(Random Access Memory，RAM)703中的程序而执行各种适当的动作和处理。在RAM 703中，还存储有电子设备700操作所需的各种程序和数据。处理器701、ROM 702以及RAM 703通过总线704彼此相连。输入/输出(I/O)接口705也连接至总线704。
通常，以下装置可以连接至I/O接口705：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置706；包括例如液晶显示器(Liquid Crystal Display，LCD)、扬声器、振动器等的输出装置707；包括例如磁带、硬盘等的存储装置708；以及通信装置709。通信装置709可以允许电子设备700与其他设备进行无线或有线通信以交换数据。虽然图7示出了具有各种装置的电子设备700，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。
特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在非暂态计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置709从网络上被下载和安装，或者从存储装置708被安装，或者从ROM 702被安装。在该计算机程序被处理器701执行时，执行本公开实施例的方法中限定的上述功能。
本公开实施例提供的电子设备与上述实施例提供的内容展示方法属于同一构思，未在本实施例中详尽描述的技术细节可参见上述实施例，并且本实施例与上述实施例具有相同的效果。
本公开实施例提供了一种计算机可读存储介质，其上存储有计算机程序， 该程序被处理器执行时实现上述实施例所提供的内容展示方法。
需要说明的是，本公开上述的计算机可读存储介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的例子可以包括但不限于：具有至少一个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(Erasable Programmable Read-Only Memory，EPROM)、闪存、光纤、便携式紧凑磁盘只读存储器(Compact Disc Read-Only Memory，CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读存储介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、射频(Radio Frequency，RF)等等，或者上述的任意合适的组合。
在一些实施方式中，客户端、服务器可以利用诸如超文本传输协议(HyperText Transfer Protocol，HTTP)之类的任何当前已知或未来研发的网络协议进行通信，并且可以与任意形式或介质的数字数据通信(例如，通信网络)互连。通信网络的示例包括局域网(Local Area Network，LAN)，广域网(Wide Area Network，WAN)，网际网(例如，互联网)以及端对端网络(例如，ad hoc端对端网络)，以及任何当前已知或未来研发的网络。
上述计算机可读存储介质可以是上述电子设备中所包含的；也可以是单独 存在，而未装配入该电子设备中。
上述计算机可读存储介质承载有至少一个程序，当上述至少一个程序被该电子设备执行时，使得该电子设备：在目标页面中显示悬浮控件，并在所述悬浮控件中展示媒体流；在检测到用户触摸所述悬浮控件的情况下，确定触摸位置，并检测以所述触摸位置为起点的当前手势操作；根据所述触摸位置在所述悬浮控件中所处的目标区域，确定所检测到的当前手势操作的当前操作类型，并基于所述当前操作类型和所述当前手势操作，对所述悬浮控件进行相应的控制，其中，不同操作类型对应所述悬浮控件中的不同区域。
可以以至少一种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括但不限于面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含至少一个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和流程图中的每个方框、以及框图和流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计 算机指令的组合来实现。
描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，模块的名称并不构成对该模块本身的限定，例如，悬浮控件显示模块还可以被描述为“在目标页面中显示悬浮控件，并在所述悬浮控件中展示媒体流的模块”。
本文中以上描述的功能可以至少部分地由至少一个硬件逻辑部件来执行。例如，非限制性地，可以使用的示范类型的硬件逻辑部件包括：现场可编程门阵列(Field Programmable Gate Array，FPGA)、专用集成电路(Application Specific Integrated Circuit，ASIC)、专用标准产品(Application Specific Standard Parts，ASSP)、片上系统(System on Chip，SOC)、复杂可编程逻辑设备(Complex Programmable Logic Device，CPLD)等等。
在本公开的上下文中，机器可读存储介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读存储介质可以是机器可读信号介质或机器可读储存介质。机器可读存储介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的示例包括基于至少一个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM)、快闪存储器、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
根据本公开的一个或多个实施例，提供了一种内容展示方法，包括：
在目标页面中显示悬浮控件，并在所述悬浮控件中展示媒体流；
响应于检测到用户触摸所述悬浮控件，确定触摸位置，并检测以所述触摸位置为起点的当前手势操作；
根据所述触摸位置在所述悬浮控件中所处的目标区域，确定所检测到的当前手势操作的当前操作类型，并基于所述当前操作类型和所述当前手势操作， 对所述悬浮控件进行相应的控制，其中，不同操作类型对应所述悬浮控件中的不同区域。
根据本公开的一个或多个实施例，所述操作类型包括第一操作类型和第二操作类型中至少之一，所述第一操作类型为移动所述悬浮控件，所述第二操作类型为切换所述悬浮控件中当前展示的媒体内容。
根据本公开的一个或多个实施例，所述当前操作类型为第一操作类型，所述基于所述当前操作类型和所述当前手势操作，对所述悬浮控件进行相应的控制，包括：
基于所述第一操作类型、所述当前手势操作的作用方向、以及所述当前手势操作的作用距离和作用速度中至少之一，将所述悬浮控件移动至所述目标页面中相应的显示位置。
根据本公开的一个或多个实施例，所述目标页面包括预设页面；所述方法还包括：
在所述目标页面中，检测到背景播放模式被触发，将所述悬浮控件中当前展示的第一媒体内容，作为所述目标页面的背景进行展示，并取消所述悬浮控件的显示。
根据本公开的一个或多个实施例，所述在所述目标页面中，检测到背景播放模式被触发，包括：
在所述目标页面中，接收到预设手势操作，则确定检测到背景播放模式被触发，其中，所述预设手势操作设置为触发所述背景播放模式。
根据本公开的一个或多个实施例，所述操作类型包括第一操作类型，所述第一操作类型为移动所述悬浮控件；
其中，所述当前操作类型为第一操作类型，所述基于所述当前操作类型和所述当前手势操作，对所述悬浮控件进行相应的控制，包括：
基于所述第一操作类型和所述当前手势操作，将所述悬浮控件移动至所述目标页面中相应的显示位置；
其中，所述在所述目标页面中，检测到背景播放模式被触发，包括：
检测到所述用户停止触摸屏幕，判断所述悬浮控件的当前显示位置是否为目标显示位置；
若所述悬浮控件的当前显示位置是目标显示位置，则确定检测到背景播放模式被触发。
根据本公开的一个或多个实施例，所述目标显示位置包括所述目标页面中的预设范围内的位置，所述预设范围含有所述目标页面的中心点。
根据本公开的一个或多个实施例，所述目标页面包括消息交互页面，所述将所述悬浮控件中当前展示的第一媒体内容，作为所述目标页面的背景进行展示，包括：
将所述目标页面的背景替换为所述悬浮控件中当前展示的第一媒体内容，以使所述消息交互页面的页面内容显示于所述第一媒体内容的上层，其中，所述页面内容包括消息内容和所述消息内容的关联内容中至少之一。
根据本公开的一个或多个实施例，在所述将所述悬浮控件中当前展示的第一媒体内容，作为所述目标页面的背景进行展示，并取消所述悬浮控件的显示之后，包括：
响应于所述用户作用于所述目标页面的第一预设操作，切换至隐藏状态播放模式以展示所述第一媒体内容，其中，在所述隐藏状态播放模式下，隐藏所述背景播放模式中显示于所述背景上层的页面内容。
根据本公开的一个或多个实施例，在所述切换至隐藏状态播放模式以展示所述第一媒体内容之后，还包括：
响应于所述用户作用于所述目标页面的第二预设操作，切换所述目标页面中当前展示的媒体内容。
根据本公开的一个或多个实施例，在所述切换至隐藏状态播放模式以展示所述第一媒体内容之后，还包括：
在所述目标页面中显示预设控件；
其中，所述预设控件设置为以下至少一项：
对所述目标页面中展示的媒体内容进行控制；
针对所述目标页面中展示的媒体内容进行交互；以及，
触发所述悬浮控件的显示并将所述目标页面中展示的媒体内容切换至所述悬浮控件中进行展示。
根据本公开的一个或多个实施例，所述将所述悬浮控件中当前展示的第一媒体内容，作为所述目标页面的背景进行展示，并取消所述悬浮控件的显示，包括：
将画布切换组件从所述悬浮控件中解绑，并将所述画布切换组件绑定至所述目标页面的背景视图上，其中，所述画布切换组件中包含多个画布，所述画布配置有媒体播放器，所述媒体播放器设置为播放所述悬浮控件中当前展示的第一媒体内容；
从预设数据库中获取所述第一媒体内容的关联信息，基于所述关联信息在所述背景视图中基于所述画布切换组件继续展示所述第一媒体内容，并取消所述悬浮控件的显示，其中，所述关联信息包括媒体标识、播放进度和播放状态中的至少一种。
根据本公开的一个或多个实施例，所述当前操作类型为第二操作类型，所述基于所述当前操作类型和所述当前手势操作，对所述悬浮控件进行相应的控制，包括：
基于所述第二操作类型和所述当前手势操作的作用方向，将所述悬浮控件中当前展示的第二媒体内容切换为第三媒体内容，其中，所述第三媒体内容为所述媒体流中所述第二媒体内容的上一个媒体内容或下一个媒体内容。
根据本公开的一个或多个实施例，所述悬浮控件中绑定有画布切换组件，所述画布切换组件中包含多个画布，所述画布配置有媒体播放器，所述媒体播放器设置为播放对应画布中加载的媒体内容，以实现在所述悬浮控件中展示媒体内容；
其中，所述基于所述第二操作类型和所述当前手势操作的作用方向，将所述悬浮控件中当前展示的第二媒体内容切换为第三媒体内容，包括：
基于所述第二操作类型，将所述当前手势操作传递至所述画布切换组件，以使所述画布切换组件根据所述当前手势操作的作用方向以及所述悬浮控件中当前展示的第二媒体内容的第一内容标识，确定待切换的第三媒体内容的第二内容标识；
通过所述画布切换组件向多个画布广播所述第二内容标识，以使与所述第二内容标识相匹配的画布通过对应的媒体播放器播放所述第二媒体内容。
根据本公开的一个或多个实施例，提供了一种内容展示装置，包括：
悬浮控件显示模块，设置为在目标页面中显示悬浮控件，并在所述悬浮控件中展示媒体流；
手势操作检测模块，设置为响应于检测到用户触摸所述悬浮控件，确定触摸位置，并检测以所述触摸位置为起点的当前手势操作；
悬浮控件控制模块，设置为根据所述触摸位置在所述悬浮控件中所处的目标区域，确定所检测到的当前手势操作的当前操作类型，并基于所述当前操作类型和所述当前手势操作，对所述悬浮控件进行相应的控制，其中，不同操作类型对应所述悬浮控件中的不同区域。
根据本公开的一个或多个实施例，提供了一种电子设备，包括：
至少一个处理器；
存储装置，设置为存储至少一个程序，
当所述至少一个程序被所述至少一个处理器执行，使得所述至少一个处理器实现本公开实施例提供的内容展示方法。
根据本公开的至少一个实施例，提供了一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时执行本公开实施例提供的内容展示方法。

Claims (18)

  1. 一种内容展示方法，包括：
    在目标页面中显示悬浮控件，并在所述悬浮控件中展示媒体流；
    响应于检测到用户触摸所述悬浮控件，确定触摸位置，并检测以所述触摸位置为起点的当前手势操作；
    根据所述触摸位置在所述悬浮控件中所处的目标区域，确定所检测到的当前手势操作的当前操作类型，并基于所述当前操作类型和所述当前手势操作，对所述悬浮控件进行相应的控制，其中，不同操作类型对应所述悬浮控件中的不同区域。
  2. 根据权利要求1所述的方法，其中，所述操作类型包括第一操作类型和第二操作类型中至少之一，所述第一操作类型为移动所述悬浮控件，所述第二操作类型为切换所述悬浮控件中当前展示的媒体内容。
  3. 根据权利要求2所述的方法，其中，所述当前操作类型为第一操作类型，所述基于所述当前操作类型和所述当前手势操作，对所述悬浮控件进行相应的控制，包括：
    基于所述第一操作类型、所述当前手势操作的作用方向、以及所述当前手势操作的作用距离和作用速度中至少之一，将所述悬浮控件移动至所述目标页面中相应的显示位置。
  4. 根据权利要求1所述的方法，其中，所述目标页面包括预设页面；所述方法还包括：
    在所述目标页面中，检测到背景播放模式被触发，将所述悬浮控件中当前展示的第一媒体内容，作为所述目标页面的背景进行展示，并取消所述悬浮控件的显示。
  5. 根据权利要求4所述的方法，其中，所述在所述目标页面中，检测到背景播放模式被触发，包括：
    在所述目标页面中，响应于接收到预设手势操作，确定检测到背景播放模式被触发，其中，所述预设手势操作设置为触发所述背景播放模式。
  6. 根据权利要求4所述的方法，其中，所述操作类型包括第一操作类型，所述第一操作类型为移动所述悬浮控件；
    其中，所述当前操作类型为第一操作类型，所述基于所述当前操作类型和所述当前手势操作，对所述悬浮控件进行相应的控制，包括：
    基于所述第一操作类型和所述当前手势操作，将所述悬浮控件移动至所述目标页面中相应的显示位置；
    其中，所述在所述目标页面中，检测到背景播放模式被触发，包括：
    检测到所述用户停止触摸屏幕，判断所述悬浮控件的当前显示位置是否为目标显示位置；
    响应于所述悬浮控件的当前显示位置是目标显示位置，确定检测到背景播放模式被触发。
  7. 根据权利要求6所述的方法，其中，所述目标显示位置包括所述目标页面中的预设范围内的位置，所述预设范围含有所述目标页面的中心点。
  8. 根据权利要求4所述的方法，其中，所述目标页面包括消息交互页面，所述将所述悬浮控件中当前展示的第一媒体内容，作为所述目标页面的背景进行展示，包括：
    将所述目标页面的背景替换为所述悬浮控件中当前展示的第一媒体内容，以使所述消息交互页面的页面内容显示于所述第一媒体内容的上层，其中，所述页面内容包括消息内容和所述消息内容的关联内容中至少之一。
  9. 根据权利要求4所述的方法，其中，在所述将所述悬浮控件中当前展示的第一媒体内容，作为所述目标页面的背景进行展示，并取消所述悬浮控件的显示之后，包括：
    响应于所述用户作用于所述目标页面的第一预设操作，切换至隐藏状态播放模式以展示所述第一媒体内容，其中，在所述隐藏状态播放模式下，隐藏所述背景播放模式中显示于所述第一媒体内容上层的页面内容。
  10. 根据权利要求9所述的方法，其中，在所述切换至隐藏状态播放模式 以展示所述第一媒体内容之后，还包括：
    响应于所述用户作用于所述目标页面的第二预设操作，切换所述目标页面中当前展示的媒体内容。
  11. 根据权利要求9所述的方法，其中，在所述切换至隐藏状态播放模式以展示所述第一媒体内容之后，还包括：
    在所述目标页面中显示预设控件；
    其中，所述预设控件设置为执行以下至少一项：
    对所述目标页面中展示的媒体内容进行控制；
    针对所述目标页面中展示的媒体内容进行交互；以及，
    触发所述悬浮控件的显示并将所述目标页面中展示的媒体内容切换至所述悬浮控件中进行展示。
  12. 根据权利要求4-11任一所述的方法，其中，所述将所述悬浮控件中当前展示的第一媒体内容，作为所述目标页面的背景进行展示，并取消所述悬浮控件的显示，包括：
    将画布切换组件从所述悬浮控件中解绑，并将所述画布切换组件绑定至所述目标页面的背景视图上，其中，所述画布切换组件中包含多个画布，所述画布配置有媒体播放器，所述媒体播放器设置为播放所述悬浮控件中当前展示的第一媒体内容；
    从预设数据库中获取所述第一媒体内容的关联信息，基于所述关联信息在所述背景视图中基于所述画布切换组件继续展示所述第一媒体内容，并取消所述悬浮控件的显示，其中，所述关联信息包括媒体标识、播放进度和播放状态中的至少一种。
  13. 根据权利要求2所述的方法，其中，所述当前操作类型为第二操作类型，所述基于所述当前操作类型和所述当前手势操作，对所述悬浮控件进行相应的控制，包括：
    基于所述第二操作类型和所述当前手势操作的作用方向，将所述悬浮控件 中当前展示的第二媒体内容切换为第三媒体内容，其中，所述第三媒体内容为所述媒体流中所述第二媒体内容的上一个媒体内容或下一个媒体内容。
  14. 根据权利要求13所述的方法，其中，所述悬浮控件中绑定有画布切换组件，所述画布切换组件中包含多个画布，所述画布配置有媒体播放器，所述媒体播放器设置为播放对应画布中加载的媒体内容，以实现在所述悬浮控件中展示媒体内容；
    其中，所述基于所述第二操作类型和所述当前手势操作的作用方向，将所述悬浮控件中当前展示的第二媒体内容切换为第三媒体内容，包括：
    基于所述第二操作类型，将所述当前手势操作传递至所述画布切换组件，以使所述画布切换组件根据所述当前手势操作的作用方向以及所述悬浮控件中当前展示的第二媒体内容的第一内容标识，确定待切换的第三媒体内容的第二内容标识；
    通过所述画布切换组件向多个画布广播所述第二内容标识，以使与所述第二内容标识相匹配的画布通过对应的媒体播放器播放所述第二媒体内容。
  15. 一种内容展示装置，包括：
    悬浮控件显示模块(601)，设置为在目标页面中显示悬浮控件，并在所述悬浮控件中展示媒体流；
    手势操作检测模块(602)，设置为响应于检测到用户触摸所述悬浮控件，确定触摸位置，并检测以所述触摸位置为起点的当前手势操作；
    悬浮控件控制模块(603)，设置为根据所述触摸位置在所述悬浮控件中所处的目标区域，确定所检测到的当前手势操作的当前操作类型，并基于所述当前操作类型和所述当前手势操作，对所述悬浮控件进行相应的控制，其中，不同操作类型对应所述悬浮控件中的不同区域。
  16. 根据权利要求15所述的装置，其中，包括：用于执行如权利要求2-14任一项所述的方法的模块。
  17. 一种电子设备，包括：
    至少一个处理器；
    存储装置，设置为存储至少一个程序，
    当所述至少一个程序被所述至少一个处理器执行，使得所述至少一个处理器实现如权利要求1-14中任一所述的内容展示方法。
  18. 一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时执行如权利要求1-14中任一所述的内容展示方法。
PCT/CN2023/113323 2022-08-19 2023-08-16 内容展示方法、装置、设备及存储介质 Ceased WO2024037563A1 (zh)

Priority Applications (3)

Application Number Priority Date Filing Date Title
JP2024574662A JP2025522504A (ja) 2022-08-19 2023-08-16 コンテンツ表示方法、装置、機器、記憶媒体及びプログラム
EP23854463.9A EP4524733A4 (en) 2022-08-19 2023-08-16 CONTENT DISPLAY METHOD AND APPARATUS, AND STORAGE DEVICE AND MEDIUM
US18/991,251 US20250123693A1 (en) 2022-08-19 2024-12-20 Content display method and apparatus, and device and storage medium

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202210999813.0 2022-08-19
CN202210999813.0A CN115269105A (zh) 2022-08-19 2022-08-19 内容展示方法、装置、设备及存储介质

Related Child Applications (1)

Application Number Title Priority Date Filing Date
US18/991,251 Continuation US20250123693A1 (en) 2022-08-19 2024-12-20 Content display method and apparatus, and device and storage medium

Publications (1)

Publication Number Publication Date
WO2024037563A1 true WO2024037563A1 (zh) 2024-02-22

Family

ID=83753750

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2023/113323 Ceased WO2024037563A1 (zh) 2022-08-19 2023-08-16 内容展示方法、装置、设备及存储介质

Country Status (5)

Country Link
US (1) US20250123693A1 (zh)
EP (1) EP4524733A4 (zh)
JP (1) JP2025522504A (zh)
CN (1) CN115269105A (zh)
WO (1) WO2024037563A1 (zh)

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115269105A (zh) * 2022-08-19 2022-11-01 北京字跳网络技术有限公司 内容展示方法、装置、设备及存储介质
CN116360655A (zh) * 2023-04-04 2023-06-30 北京字跳网络技术有限公司 内容展示方法、装置、设备、计算机可读存储介质及产品
CN116627562B (zh) * 2023-05-15 2024-07-19 重庆赛力斯凤凰智创科技有限公司 悬浮窗口的切换方法、装置、电子设备及计算机可读存储介质
CN119854558B (zh) * 2024-08-30 2025-10-28 聚好看科技股份有限公司 一种显示设备及推荐媒资显示方法

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2016023319A1 (zh) * 2014-08-12 2016-02-18 广州华多网络科技有限公司 控制多媒体播放器的方法、装置及终端
CN106980441A (zh) * 2017-03-29 2017-07-25 杭州弗凡科技有限公司 车载导航终端的悬浮窗口交互方法及车载导航终端
US20210149535A1 (en) * 2019-11-20 2021-05-20 Beijing Xiaomi Mobile Software Co., Ltd. Method and device for displaying interface of multimedia information application, user equipment, and storage medium
CN113126839A (zh) * 2021-03-16 2021-07-16 北京达佳互联信息技术有限公司 一种对象播放方法、装置、电子设备及存储介质
CN115269105A (zh) * 2022-08-19 2022-11-01 北京字跳网络技术有限公司 内容展示方法、装置、设备及存储介质

Family Cites Families (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6262724B1 (en) * 1999-04-15 2001-07-17 Apple Computer, Inc. User interface for presenting media information
KR102057629B1 (ko) * 2013-02-19 2020-01-22 엘지전자 주식회사 이동 단말기 및 이동 단말기의 제어 방법
CN105554553B (zh) * 2015-12-15 2019-02-15 腾讯科技（深圳）有限公司 通过悬浮窗口播放视频的方法及装置
CN105867762A (zh) * 2015-12-31 2016-08-17 乐视网信息技术（北京）股份有限公司 播放中视频的显示方法及装置
US10397632B2 (en) * 2016-02-16 2019-08-27 Google Llc Touch gesture control of video playback
CN108228020B (zh) * 2016-12-12 2021-09-07 腾讯科技（深圳）有限公司 一种信息处理方法及终端
CN108089786B (zh) * 2017-12-14 2019-12-31 Oppo广东移动通信有限公司 用户界面显示方法、装置、设备及存储介质
AU2018415397B2 (en) * 2018-03-28 2022-04-21 Huawei Technologies Co., Ltd. Video preview method and electronic device
CN109445572B (zh) * 2018-09-10 2023-12-08 华为技术有限公司 全屏显示视频中快速调出小窗口的方法、图形用户接口及终端
CN111176506A (zh) * 2019-12-25 2020-05-19 华为技术有限公司 一种屏幕显示方法及电子设备
CN112346639B (zh) * 2020-11-04 2023-01-10 北京小米移动软件有限公司 一种显示应用界面的方法、装置、设备及存储介质
CN112584224B (zh) * 2020-12-08 2024-01-02 北京字节跳动网络技术有限公司 信息显示及处理方法、装置、设备、介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2016023319A1 (zh) * 2014-08-12 2016-02-18 广州华多网络科技有限公司 控制多媒体播放器的方法、装置及终端
CN106980441A (zh) * 2017-03-29 2017-07-25 杭州弗凡科技有限公司 车载导航终端的悬浮窗口交互方法及车载导航终端
US20210149535A1 (en) * 2019-11-20 2021-05-20 Beijing Xiaomi Mobile Software Co., Ltd. Method and device for displaying interface of multimedia information application, user equipment, and storage medium
CN113126839A (zh) * 2021-03-16 2021-07-16 北京达佳互联信息技术有限公司 一种对象播放方法、装置、电子设备及存储介质
CN115269105A (zh) * 2022-08-19 2022-11-01 北京字跳网络技术有限公司 内容展示方法、装置、设备及存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
See also references of EP4524733A4

Also Published As

Publication number Publication date
EP4524733A4 (en) 2025-07-30
EP4524733A1 (en) 2025-03-19
CN115269105A (zh) 2022-11-01
US20250123693A1 (en) 2025-04-17
JP2025522504A (ja) 2025-07-15

Similar Documents

Publication Publication Date Title
JP7585517B2 (ja) コントロールの表示方法、装置、電子機器および記憶媒体
JP7597314B2 (ja) 動画共有方法、装置、機器及び媒体
WO2024037563A1 (zh) 内容展示方法、装置、设备及存储介质
US12353704B2 (en) Page display method and apparatus, electronic device, storage medium and program product
CN114168250B (zh) 页面显示方法、装置、电子设备和存储介质
US20250130695A1 (en) Interaction method and apparatus, electronic device, and storage medium
EP4125274A1 (en) Method and apparatus for playing videos
WO2022077994A1 (zh) 信息处理方法、装置及介质
WO2023216936A1 (zh) 视频播放方法、装置、电子设备、存储介质和程序产品
CN118042205A (zh) 界面交互方法、装置、介质、电子设备及程序产品
CN114968038A (zh) 多媒体内容显示方法、装置、设备及介质
US20250156042A1 (en) Method and apparatus, electronic device, and storage medium for object interaction
WO2024061063A1 (zh) 通知消息的显示方法、装置、电子设备和存储介质
WO2024060942A1 (zh) 会话列表的显示方法、装置、电子设备和存储介质
WO2023174139A1 (zh) 作品的显示方法、装置、电子设备、存储介质和程序产品
JP7613676B2 (ja) 作品の展示方法、装置、電子機器および記憶媒体
US12248672B2 (en) Progress adjustment method and apparatus, electronic device and storage medium
US20240411438A1 (en) Display method and apparatus, electronic device, and storage medium
JP2026500199A (ja) プッシュ処理方法と装置、機器、コンピュータ可読記憶媒体及びコンピュータプログラム
CN114489457B (zh) 虚拟对象的控制方法、装置、可读介质和电子设备
US20230289051A1 (en) Interacting method and apparatus, device and medium
CN113342440A (zh) 一种拼屏方法、装置、电子设备和存储介质
CN111294656A (zh) 用于调节视频播放的方法、装置和电子设备
US20240106928A1 (en) Media content sharing method, apparatus, electronic device and storage medium
WO2024051601A1 (zh) 多媒体组件触发方法、装置、电子设备及存储介质

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 23854463

Country of ref document: EP

Kind code of ref document: A1

WWE Wipo information: entry into national phase

Ref document number: 2023854463

Country of ref document: EP

ENP Entry into the national phase

Ref document number: 2023854463

Country of ref document: EP

Effective date: 20241211

WWE Wipo information: entry into national phase

Ref document number: 2024574662

Country of ref document: JP

NENP Non-entry into the national phase

Ref country code: DE