Method and apparatus for playing media file

Abstract

This application discloses a method and apparatus for playing media files. The main technical solution includes: playing a first media file in a horizontal orientation on a portrait-oriented playback page using a first mode; simultaneously displaying a component for selecting a viewing mode while playing the first media file, the viewing mode including at least one of a second mode, a third mode, and a fourth mode; wherein, the second mode hides some page elements compared to the first mode and selects or adjusts the background of the playback page according to the content of the first media file; the third mode uses a gradient to change the background of the playback page from the edge of the first media file to the main background color; and the fourth mode uses a higher screen-to-body ratio for the first media file compared to the first mode. This application can enrich the user's viewing experience and facilitate the user's selection of viewing modes.

Description

Technical Field

[0001] This application relates to the field of Internet application technology, and in particular to a method and apparatus for playing media files. Background Technology

[0002] With the rapid development of internet and mobile communication technologies, media playback services have gradually evolved from serving primarily landscape-oriented mobile terminals such as TVs and PCs to serving primarily portrait-oriented mobile terminals such as smartphones. For example, some media playback services for smartphones primarily play portrait-oriented videos (such as short videos), but in many scenarios, landscape-oriented videos are also played on portrait-oriented devices. However, currently, the playback modes offered for playing landscape-oriented videos on portrait-oriented mobile terminals are usually quite limited, resulting in a monotonous user experience. Summary of the Invention

[0003] In view of this, this application provides a media file playback processing method and apparatus to enrich the user's viewing experience.

[0004] This application provides the following solution:

[0005] Firstly, a method for playing media files is provided, the method comprising:

[0006] On the portrait-oriented playback page, the first media file in landscape mode is played using the first mode.

[0007] While playing the first media file, a component for selecting a viewing mode is displayed, the viewing mode including at least one of a second mode, a third mode, and a fourth mode;

[0008] The second mode hides some page elements compared to the first mode and selects or adjusts the background of the playback page according to the content of the first media file. The third mode uses a gradient to change the background of the playback page from the edge of the first media file to the main background color. The fourth mode uses a higher screen ratio for the first media file compared to the first mode.

[0009] Optionally, the method further includes;

[0010] In response to an event triggered by the component for selecting a viewing mode, the first media file is played by switching to one of the viewing modes on the playback page.

[0011] Optionally, while switching to one of the viewing modes on the playback page to play the first media file, a component for triggering at least one of the other viewing modes is displayed on the playback page.

[0012] Optionally, the method further includes:

[0013] In response to an event that triggers the component for selecting the viewing mode, while playing the first media file in the first mode on the playback page, multiple first selection components corresponding to the viewing modes are displayed;

[0014] In response to an event that one of the first selection components is triggered, the playback page switches to the viewing mode corresponding to the triggered first selection component to play the first media file.

[0015] Optionally, the method further includes:

[0016] While switching to the viewing mode corresponding to the triggered first selection component on the playback page to play the first media file, a component for triggering at least one of the other viewing modes is displayed on the playback page.

[0017] Optionally, when displaying the first selection component corresponding to multiple viewing modes, the first selection component corresponding to the first mode is also displayed;

[0018] In response to an event triggered by the first selection component corresponding to the first mode, the display of each first selection component is canceled, and the component used to select the viewing mode is displayed.

[0019] Optionally, displaying components for selecting a viewing mode while playing the first media file includes:

[0020] When playing the first media file, in response to a long press gesture on the playback page, a settings panel superimposed on the playback page is displayed, the settings panel including a second selection component corresponding to multiple modes;

[0021] The plurality of modes may include the viewing mode, or the plurality of modes may include the viewing mode and the first mode.

[0022] Optionally, the method further includes:

[0023] The second selection component corresponding to the currently used mode on the settings panel is in a selected state, while the second selection component corresponding to other modes is in a deselected state.

[0024] In response to an event that triggers one of the second selection components that is in an unselected state, the playback page switches to play the first media file using the mode corresponding to the triggered second selection component.

[0025] Optionally, when playing the first media file in the fourth mode on the playback page, the screen size of the media file being played is changed in response to an operation event that triggers a change in screen size; or,

[0026] When the fourth mode and other viewing modes are used simultaneously on the playback page, in response to an operation event that triggers a change in screen size, the other viewing modes are maintained and the screen size of the media file being played is changed.

[0027] Optionally, the method further includes:

[0028] While playing the first media file in the viewing mode on the playback page, a component for exiting the viewing mode is displayed;

[0029] In response to an event triggered by the component used to exit viewing mode, the playback page switches to playing the first media file in the first mode.

[0030] Optionally, the method further includes:

[0031] When the first media file is played in viewing mode on the playback page, in response to the media switching event, the playback page switches to playing the second media file in the first mode.

[0032] Secondly, a media file playback processing apparatus is provided, the apparatus comprising:

[0033] The page display unit is configured to play a first media file in landscape mode on a portrait-oriented playback page; while playing the first media file, a component for selecting a viewing mode is displayed, the viewing mode including at least one of a second mode, a third mode, and a fourth mode;

[0034] The second mode hides some page elements compared to the first mode and selects or adjusts the background of the playback page according to the content of the first media file. The third mode uses a gradient to change the background of the playback page from the edge of the first media file to the main background color. The fourth mode uses a higher screen ratio for the first media file compared to the first mode.

[0035] Thirdly, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a processor, implements the steps of the method described in any one of the first aspects above.

[0036] Fourthly, an electronic device is provided, comprising:

[0037] One or more processors; and

[0038] A memory associated with the one or more processors, the memory being used to store program instructions that, when read and executed by the one or more processors, perform the steps of the method described in any one of the first aspects above.

[0039] Fifthly, a computer program product is provided, comprising a computer program that, when executed by a processor, implements the steps of the method described in any one of the first aspects above.

[0040] According to the specific embodiments provided in this application, the following technical effects are disclosed:

[0041] 1) This application provides new viewing modes to enrich the user's viewing experience. One new mode, compared to the first mode, hides some page elements and selects or adjusts the background of the playback page according to the content of the first media file, resulting in a more immersive and harmonious overall presentation with reduced visual clutter. Another new mode uses a gradient effect on the background of the playback page, transitioning from the edge of the first media file to the main background color. Compared to the traditional fixed black background, this creates a visual effect closer to the real physical world, making the user feel more immersed. A third new mode offers a higher screen-to-body ratio compared to the first mode, allowing users to more easily focus on the details of the first media file. Furthermore, this application provides a component for selecting the viewing mode while playing the first media file, allowing users to easily select the viewing mode by triggering this component, simplifying the operation.

[0042] 2) This application can switch to one of the viewing modes to play the first media file on the playback page when the user triggers the component used to select the viewing mode, thereby realizing the quick switching of the new mode. Moreover, this method of triggering the component makes it easier for users to quickly know the switching method, which is more in line with operating habits.

[0043] 3) While switching to one of the viewing modes to play the first media file, this application displays a component on the playback page to trigger at least one of the other viewing modes, thereby facilitating quick switching between other viewing modes for the user.

[0044] 4) When a user triggers a component for selecting a viewing mode, this application can display multiple first selection components corresponding to multiple viewing modes, thereby enabling the user to quickly select the desired viewing mode from multiple first selection components and switch quickly. This method provides users with multiple viewing modes to choose from, and it is clear at a glance, reducing the user's operating threshold.

[0045] 5) The first selection component provided in this application includes the first selection component corresponding to the first mode, thereby helping users to quickly cancel the display of each first selection component when they accidentally operate or do not want to switch viewing modes, so as to watch the video normally in the first mode.

[0046] 6) This application can display a settings panel superimposed on the playback page when the user applies a long press gesture. The settings panel provides a second selection component corresponding to multiple modes, so that the user can quickly select the viewing mode they want to switch to through the second selection component. This method reduces the components displayed in the first mode and provides the user with multiple mode options at a glance through the settings panel, thus reducing the user's operating threshold.

[0047] 7) This application can display the second selection component corresponding to the currently used mode as selected on the above settings panel, and the second selection component corresponding to other modes as unselected, thereby helping users quickly know the currently used mode and the available modes, making it convenient for users to operate and improving user efficiency.

[0048] 8) This application provides a further mechanism that allows users to further change the screen size in high screen-to-body ratio mode, thereby meeting users' more flexible viewing needs.

[0049] Of course, any product implementing this application does not necessarily need to achieve all of the advantages described above at the same time. Attached Figure Description

[0050] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0051] Figure 1 This is a system architecture diagram applicable to the embodiments of this application;

[0052] Figure 2 A flowchart illustrating a media file playback processing method provided in this application embodiment;

[0053] Figure 3 Example diagram of the playback page in the first mode provided in the embodiments of this application;

[0054] Figure 4 Example diagram of the playback page for the second mode provided in the embodiments of this application;

[0055] Figure 5 Example diagram of the playback page for the third mode provided in the embodiments of this application;

[0056] Figure 6 Example diagram of the playback page for the fourth mode provided in the embodiments of this application;

[0057] Figure 7 Example diagram of a playback page for the first triggered viewing mode provided in this application embodiment;

[0058] Figure 8 Example diagram of a playback page for the second triggering viewing mode provided in this application embodiment;

[0059] Figure 9 Example diagram of a playback page for the third triggering viewing mode provided in this application embodiment;

[0060] Figure 10 A schematic diagram of the playback page for triggering a switch back to the first mode, provided in an embodiment of this application;

[0061] Figure 11 A schematic diagram of a playback page that simultaneously triggers two viewing modes, provided as an embodiment of this application;

[0062] Figure 12 A schematic diagram of a playback page with the screen size changed in the fourth mode, provided as an embodiment of this application;

[0063] Figure 13 A schematic diagram of a playback page with altered screen size when the second and fourth modes are combined, as provided in an embodiment of this application.

[0064] Figure 14 This is a schematic diagram of a playback page for triggering the exit from viewing mode, provided in an embodiment of this application.

[0065] Figure 15 A schematic diagram of the playback page in the second mode provided in this application embodiment under different media file sources;

[0066] Figure 16 A schematic block diagram of the playback processing device provided in the embodiments of this application;

[0067] Figure 17 A schematic block diagram of an electronic device provided in an embodiment of this application. Detailed Implementation

[0068] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. All other embodiments obtained by those skilled in the art based on the embodiments of this application are within the scope of protection of this application.

[0069] The terminology used in the embodiments of this invention is for the purpose of describing particular embodiments only and is not intended to limit the invention. The singular forms “a,” “the,” and “the” as used in the embodiments of this invention and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise.

[0070] It should be understood that the term "and / or" used in this article is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, and B existing alone. Additionally, the character " / " in this article generally indicates that the preceding and following related objects have an "or" relationship.

[0071] Depending on the context, the word "if" as used here can be interpreted as "when," "when," "in response to determination," or "in response to detection." Similarly, depending on the context, the phrase "if determination" or "if detection (of the stated condition or event)" can be interpreted as "when determination," "in response to determination," "when detection (of the stated condition or event)," or "in response to detection (of the stated condition or event)."

[0072] Currently, most devices, such as mobile phones, use portrait-oriented playback pages due to user habits. Therefore, most media files pushed by media playback services are also portrait-oriented, such as short videos. However, landscape-oriented media files also account for a significant proportion, approximately 20%, making the viewing experience for landscape-oriented media files also crucial. However, to ensure the integrity of the image, landscape-oriented media files typically occupy a smaller area on the portrait playback page. Users can only enter clear screen mode using a two-finger zoom gesture (clear screen mode typically reduces the display of page elements, such as the description information at the bottom of the page and the interactive area on the right side of the page). This results in a monotonous playback experience for users, and it is difficult for users to become familiar with the gestures corresponding to switching modes.

[0073] In view of this, this application provides a new approach. To facilitate understanding of this application, the system architecture on which this application is based will first be described. Figure 1 An exemplary system architecture that can be applied to embodiments of this application is shown, such as Figure 1 As shown, the system architecture may include: user terminal, terminal device and server terminal.

[0074] In this embodiment, the user terminal is set on the terminal device. The user terminal involved in this application can be a client running on the terminal device, a mini-program, or a web application running through a browser.

[0075] Terminal devices can include, but are not limited to, smart mobile terminals, wearable devices, PCs (Personal Computers), and smart home devices. Smart mobile devices can include devices such as mobile phones, tablets, laptops, PDAs (Personal Digital Assistants), and connected car terminals. Wearable devices can include devices such as smartwatches, smart glasses, smart bracelets, VR (Virtual Reality) devices, AR (Augmented Reality) devices, and mixed reality devices (devices that support both virtual and augmented reality). Smart home devices can include devices such as smart TVs and smart refrigerators with displays.

[0076] The user client can interact with the server via the network, request and obtain media files from the server, and play them.

[0077] The server side can be a platform providing video playback services, a single server, a server cluster consisting of multiple servers, or a cloud server. A cloud server, also known as a cloud computing server or cloud host, is a hosting product within the cloud computing service system, designed to address the shortcomings of traditional physical hosts and Virtual Private Servers (VPS) services, such as high management difficulty and weak service scalability.

[0078] The server can send media files to the user terminal using streaming, allowing the user to download and play the media file simultaneously. Alternatively, a progressive delivery method can be used, sending the media file to the user terminal, which then downloads the entire video file before playback. Other methods can also be employed, such as using a CDN (Content Delivery Network) to provide and deliver media files to the user terminal.

[0079] As one possible approach, the user client can request media files from the server, and the server can then transmit the media files to the user client. The user client can then use the method provided in this application embodiment to play the media files.

[0080] It should be understood that Figure 1 The number of client terminals, terminal devices, and servers shown is merely illustrative. Depending on implementation needs, there can be any number of client terminals, terminal devices, and servers.

[0081] Figure 2 This is a flowchart of a media file playback processing method provided in an embodiment of this application. The method can be... Figure 1The user-side execution in the system shown is as follows. Figure 2 As shown, the method may include the following steps:

[0082] Step 201: Play the first media file in landscape mode on the portrait playback page using the first mode.

[0083] Step 203: While playing the first media file, display a component for selecting a viewing mode. The viewing modes include at least one of the second, third, and fourth modes. The second mode hides some page elements compared to the first mode and selects or adjusts the background of the playback page according to the content of the first media file. The third mode uses a gradient to change the background of the playback page from the edge of the first media file to the main background color. The fourth mode uses a higher screen ratio for the first media file compared to the first mode.

[0084] As can be seen, this application provides new viewing modes to enrich the user's viewing experience. One new viewing mode, compared to the first mode, hides some page elements and selects or adjusts the background of the playback page according to the content of the first media file, resulting in a more immersive and harmonious overall presentation with reduced visual clutter. Another new viewing mode uses a gradient effect on the background of the playback page, transitioning from the edge of the first media file to the main background color. Compared to the traditional fixed black background, this creates a visual effect closer to the real physical world, making the user feel more immersed. Yet another new viewing mode offers a higher screen-to-body ratio compared to the first mode, allowing users to more easily focus on the details of the first media file. Furthermore, this application provides a component for selecting the viewing mode while playing the first media file, allowing users to easily select the viewing mode by triggering this component, simplifying the operation.

[0085] The following describes in detail each step of the above process and the effects that can be further produced, with reference to the embodiments. It should be noted that the terms "first," "second," etc., used in this disclosure do not have limitations on size, order, or quantity, but are merely used to distinguish them by name. For example, "first mode," "second mode," and "third mode" are used to distinguish multiple modes by name. Similarly, "first media file" and "second media file" are used to distinguish different media files, and so on.

[0086] First, the above step 201, namely "playing the first media file in landscape mode on the portrait playback page using the first mode", will be described in detail with reference to the embodiments.

[0087] The first mode involved in this application embodiment can be the user's default mode, normal playback mode, etc. When a user opens the user's client to play a media file, the first mode is used by default.

[0088] The media files involved in the embodiments of this application may be videos, images in an image gallery, etc.

[0089] Videos can be either long or short. The distinction between long and short videos mainly lies in their length, content, and production method. Long videos are typically several tens of minutes or longer; the content is more complete and in-depth, with relatively high quality; they usually require a professional team of photographers, editors, and sound effects specialists to complete, resulting in a longer production cycle and greater resource investment; examples include movies, TV series, and documentaries. Short videos are typically a few minutes or less; the content is usually concise and refined, focusing on highlighting a specific point or quickly conveying information; production is relatively simple, often using mobile phones or other portable devices for shooting, and post-production editing is also relatively easy; short videos emphasize rapid production and dissemination, stressing timeliness; examples include some funny videos, lifestyle videos, advertising videos, and short dramas.

[0090] Furthermore, in the embodiments of this application, the media files specifically refer to landscape media files, taking videos as an example, i.e., landscape videos. A landscape video is one where the width of the video frame is greater than its height, which better matches the natural field of vision of the human eye and is more suitable for viewing on widescreen devices (such as televisions and computers). The images in the atlas refer to landscape images, i.e., images where the width of the image frame is greater than its height.

[0091] by Figure 3 For example, when playing a landscape video on a portrait playback page, because the width of the landscape video is greater than its height, a large amount of background space will exist on the playback page in order to ensure the integrity of the landscape video. This background space is usually a fixed color, such as black.

[0092] It should be noted that, in the embodiments of this application, "playback" refers to converting the content of a media file into images, sounds, or a combination of both that can be directly perceived by humans.

[0093] The following describes in detail step 203, namely, "displaying a component for selecting a viewing mode while playing the first media file, wherein the viewing mode includes at least one of a second mode, a third mode, and a fourth mode," with reference to the embodiments.

[0094] This application proposes several new viewing modes, which are described below:

[0095] Second mode: Compared to the first mode, this mode hides some page elements and selects or adjusts the background of the playback page based on the content of the first media file.

[0096] The second mode hides the page elements displayed on the playback page compared to the first mode. It's worth noting that in the second mode, you can hide all page elements except for the media file's visuals. Hiding all page elements on the playback page, except for the media content being played and essential page elements, helps users focus more on watching the media content and avoids being distracted by other page elements.

[0097] In the second mode, the hidden page elements may include page elements describing media files and / or page elements for inputting interactive information. The page elements describing media files may take the form of text, and the page elements for inputting interactive information may take the form of components.

[0098] Traditional playback pages use a fixed background, such as a black background. The second mode provided in this application can automatically select or adjust the background of the playback page according to the content of the media file being played, i.e., the first media file.

[0099] Specifically, color analysis can be performed on the first media file to extract the primary colors. This color analysis involves color quantization and color statistics, identifying the colors with the highest percentages. When the first media file is a video, since video is dynamic, color analysis needs to be performed on each frame to extract the primary colors. The duration of these primary colors during video playback is then used to further analyze the colors that appear most frequently, identifying one or more as key colors. The corresponding background color is then determined based on these key colors. Furthermore, visual strategies, such as adjusting brightness and saturation, can be incorporated to ensure harmony between the background of the playback page and the video content.

[0100] As can be seen, the background color is selected based on the content of the first media file; it can be fixed or dynamically changing. For example, if the key colors corresponding to different stages of video playback are different, the background of the playback page corresponding to each stage can be adjusted according to the key colors of each stage.

[0101] For example, such as Figure 4As shown, aside from hiding the components on the right for inputting interactive information and the text below describing the media file, if the key color of the landscape video being played is white, the background of the playback page can be set to a lighter shade, such as gray, to create a more harmonious and unified visual effect. If the key color of the first half of the landscape video is red and the key color of the second half is blue, the background of the playback page can be set to a reddish tone for the first half and a bluedish tone for the second half, creating a harmonious, unified, and variable visual effect.

[0102] The third mode: The background of the playback page uses a gradient that starts from the edge of the first media file and gradually fades to the main background color.

[0103] Traditional playback pages typically use a single main background color, such as all black. The third mode provided in this application can gradually transition to the main background color in a gradient manner. This transition method is more in line with the feeling of the real physical world, like looking at a screen in a movie theater. Although the environment in a movie theater is usually dark, the light from the screen creates a transition from strong to weak light until it turns black between the edge of the screen and the black environment. Therefore, the third mode also simulates this real environment.

[0104] Taking black as an example, such as Figure 5 As shown, in the third mode, the video image transitions from white to black starting from the edge.

[0105] Fourth Mode: In the fourth mode, a higher screen ratio is used for the first media file compared to the first mode.

[0106] For example, for Figure 3 The first media file being played in the first mode shown is illustrated in the fourth mode. A higher screen-to-body ratio can be used to display the first media file's image. Screen-to-body ratio refers to the proportion of the screen area occupied by the first media file. For example... Figure 6 As shown, in the fourth mode, the screen area of ​​the first media file is larger. In this case, the content of the central area of ​​the first media file can be displayed in the screen area and the media content formed by appropriate scaling can be displayed.

[0107] It should be noted that, in addition to the three viewing modes mentioned above, these three viewing modes can also be combined in any way to obtain new viewing modes. For example, combining the second and fourth modes can achieve a higher screen ratio for the first media file while hiding some page elements and selecting or adjusting the background of the playback page according to the content of the first media file.

[0108] In this embodiment of the application, when playing the first media content in the first mode, a component for selecting the viewing mode can be displayed on the playback page, such as... Figure 3 As shown, the component is displayed in "viewing mode".

[0109] In addition, components from other existing modes can also be displayed simultaneously on the playback page, such as Figure 3 The "Full-screen Viewing" mode shown in the image flips the screen when the user triggers the "Full-screen Viewing" mode component, displaying the first media file in landscape mode, thus achieving full-screen viewing.

[0110] In this embodiment, the user can trigger the "viewing mode" component to select a specific viewing mode, that is, select at least one of the second to fourth modes mentioned above. Specific implementation methods may include, but are not limited to, the following:

[0111] The first method: In response to the event triggered by the component used to select the viewing mode, switch to one of the viewing modes on the playback page (it should be noted that the viewing modes include the second, third and fourth modes mentioned above) and play the first media file.

[0112] Furthermore, while switching to one of the viewing modes on the playback page to play the first media file, a component is displayed on the playback page to trigger at least one of the other viewing modes.

[0113] It should be noted that the user client can pre-register callback functions or methods for the events to be listened to. These functions or methods contain the logic code to be executed in response to the event. Once the event is triggered, the user client automatically calls the corresponding callback function or method. For example, a callback function can be pre-registered for an event triggered by a component used to select a viewing mode. This callback function triggers the user client to switch to one of the viewing modes on the playback page to play the first media file. All event responses in this embodiment can be implemented in this way, and will not be detailed further below.

[0114] A component refers to an object that is simply encapsulated from data and methods; it can also be called a control. Components can include things like buttons, input boxes, drop-down menus, dialog boxes, navigation bars, cards, interactive icons, and so on.

[0115] For example, such as Figure 7 In the first mode shown in (a), users can trigger the "Viewing Mode" component by clicking, double-clicking, etc., to switch to the desired mode. Figure 7 The fourth mode shown in (b) also displays a component for another viewing mode, such as the "Third Mode" component. If the user triggers the "Third Mode" component, the mode switches to... Figure 7The third mode, as shown in (c), simultaneously displays a component for another viewing mode, such as the "Second Mode" component. If the user triggers the "Second Mode" component, the mode switches to... Figure 7 The second mode is shown in (d).

[0116] The second approach: In response to an event triggered by the component used to select the viewing mode, while playing the first media file in the first mode on the playback page, multiple first selection components corresponding to the viewing modes are displayed; in response to an event triggered by one of the first selection components, the playback page switches to playing the first media file in the viewing mode corresponding to the triggered first selection component.

[0117] like Figure 8 As shown in (a), when playing the first media file in the first mode, if the user triggers the "Viewing Mode" component by clicking or double-clicking, it can display... Figure 8 The interface shown in (b) displays multiple viewing modes corresponding to the first selection components on the playback page while playing the first media file in the first mode. For example, the "second mode", "third mode" and "fourth mode" in the figure can also further display the "first mode".

[0118] If the user triggers the "Second Mode" component, it will display... Figure 8 The interface shown in (c) uses the second mode to play the first media file. If the user triggers the "third mode" component, then... Figure 8 The interface shown in (d) uses the third mode to play the first media file. If the user triggers the "fourth mode" component, then... Figure 8 The interface shown in (e) uses the fourth mode to play the first media file.

[0119] If the user triggers the "First Mode" component, in response to the event triggered by the first selection component corresponding to the first mode, the following will be displayed: Figure 8 The interface shown in (a) returns to the first media file played in the first mode and cancels the display of each selected component, displaying the component used to select the viewing mode.

[0120] Furthermore, while switching to the viewing mode corresponding to the triggered selection component on the playback page to play the first media file, a component used to trigger at least one of the other viewing modes is displayed on the playback page. For example... Figure 8 As shown in (d), a "Second Mode" component can be displayed in the third mode, allowing the user to switch to the second mode for playing the first media file. For example, Figure 8 As shown in (e), in the fourth mode, a "Third Mode" component can be displayed. Users can trigger this component to switch to third mode to play the first media file. For example, Figure 8 As shown in (c), the "First Mode" component can be displayed in the second mode, and the user can switch back to playing the first media file in the first mode by triggering the component.

[0121] It should be noted that the components displayed on the playback page of one viewing mode that trigger other viewing modes are merely adaptive and their order can be changed within this spirit.

[0122] The third method: When playing the first media file in the first mode on the playback page, in response to a long press gesture on the playback page, a settings panel overlaid on the playback page is displayed. The settings panel includes second selection components corresponding to multiple modes; wherein, the multiple modes include a viewing mode, or, the multiple modes include the aforementioned viewing mode (one or any combination of the second, third, and fourth modes) and the first mode. A long press gesture refers to continuously pressing the screen for a preset duration.

[0123] Furthermore, the second selection component corresponding to the currently used mode on the settings panel is in a selected state, while the second selection components corresponding to other modes are in a deselected state; in response to an event that triggers one of the deselected second selection components, the playback page switches to playing the first media file using the mode corresponding to the triggered second selection component.

[0124] For example, on the touchscreen playback page, the first media file can be played in landscape mode, such as... Figure 9 As shown in (a), after the user applies a long-press gesture on the playback page, as... Figure 9 As shown in (b), a settings panel is overlaid on the playback page. This settings panel can include second selection components corresponding to the first mode, second mode, third mode, and fourth mode, namely the "first mode" option, "second mode" option, "third mode" option, and "fourth mode" option in the figure. Since the current mode is first, the "first mode" option is selected (the text in the figure is red), while the other mode options are unselected (the text in the figure is black).

[0125] If the user is Figure 9 If you select the "Second Mode" option on the settings panel shown in (b), then the "Second Mode" option is selected (not shown in the figure), as follows: Figure 9 As shown in (c), the playback page switches to the second mode to play the first media file. If the user... Figure 9 If you select the "Third Mode" option on the settings panel shown in (b), the "Third Mode" option will be selected (not shown in the figure). Figure 9As shown in (d), the playback page switches to the third mode to play the first media file. If the user... Figure 9 If you select the "Fourth Mode" option on the settings panel shown in (b), the "Fourth Mode" option will be selected (not shown in the figure). Figure 9 As shown in (e), the playback page switches to the fourth mode to play the first media file.

[0126] Furthermore, when the first media file is played in one of the viewing modes on the playback page, in response to the media switching event, the playback page switches to play the second media file in the first mode.

[0127] For example, Figure 10 The playback page shown in (a) uses the third mode to play the first media file. Users can switch media files by using gestures such as swiping up, which will display the following: Figure 10 The playback page shown in (b) uses the first mode to play the second media file. If in Figure 10 If you continue to apply gestures such as swiping down to switch back to playing the first media file on the playback page shown in (b), it will display something like... Figure 10 The playback page shown in (c) uses the first mode to play the first media file. If the user wants to switch viewing modes, they need to continue... Figure 10 Apply a long press on the playback page shown in (c) to trigger the display of the settings panel.

[0128] Additionally, it should be noted that the settings panel in the above embodiments can simultaneously trigger a combination of two viewing modes, for example, in... Figure 11 Applying a long-press gesture on the playback page in the first mode shown in (a) displays Figure 11 The settings panel shown in (b) displays the following: Selecting both the "Second Mode" and "Fourth Mode" options on this panel simultaneously will result in the following... Figure 11 The playback page shown in (c) employs a higher screen-to-body ratio while hiding some page elements and selecting or adjusting the background of the playback page based on the content of the first media file. Other combinations of viewing modes are similar and will not be listed individually.

[0129] Furthermore, in the case of the fourth mode or in combination with other viewing modes, users can further change the screen size of the media file being played.

[0130] As one possible approach, when the playback page is in a fourth mode (with a higher screen ratio), the screen size of the media file being played is changed in response to an operation event that triggers a change in screen size. This change may include zooming in or zooming out.

[0131] As another possible approach, when a fourth mode is used in combination with other viewing modes on the playback page, in response to an operation event that triggers a change in screen size, the other viewing modes are maintained and the screen size of the media file being played is changed.

[0132] Events that trigger changes in screen size can include gestures such as two-finger zoom, components that trigger changes in screen size, and so on.

[0133] like Figure 12 As shown in (a), in the fourth mode (using a higher screen ratio), if the user applies a two-finger zoom gesture on the playback page, then as shown in (a)... Figure 12 As shown in (b), a larger screen size is used to play the first media file. If in Figure 12 Applying a two-finger pinch gesture on the playback page shown in (a) will allow you to... Figure 12 As shown in (c), reducing the screen size to play the first media file is equivalent to returning to the first mode.

[0134] like Figure 13 As shown in (a), when the second mode (selecting or adjusting the background of the playback page based on the content of the first media file) and the fourth mode (using a higher screen ratio) are combined, if the user applies a two-finger zoom gesture on the playback page, then as shown in (a)... Figure 13 As shown in (b), the second mode is maintained, but a larger screen size is used to play the first media file. If in Figure 13 Applying a two-finger pinch gesture on the playback page shown in (a) will allow you to... Figure 13 As shown in (c), the second mode is maintained and the screen size is reduced to play the first media file.

[0135] Furthermore, under the above three methods, while playing the first media file in any of the above viewing modes on the playback page, a component for exiting the viewing mode can be displayed; in response to the event that triggers the component for exiting the viewing mode, the playback page switches to playing the first media file in the first mode.

[0136] For example, in such Figure 14 In the second mode shown in (a), a component for exiting viewing mode can be displayed on the playback page, such as the one in the figure. The user clicks this component to exit the current mode and return to the first mode to play the first media file. Figure 14 As shown in (b). Alternatively, the component used to exit viewing mode could also be... Figure 14 The “First Mode” component shown in (a) allows the user to exit the current mode and return to the first mode to play the first media file.

[0137] Additionally, the page elements displayed when switching to the second mode may differ slightly depending on the source of the currently playing primary media file. For example, if the currently playing primary media file originates from a second-level page, then... Figure 15 As shown in (a), the bottom navigation area can be omitted, and the playback control components and / or the component to exit the second mode can be displayed instead. If the currently playing first media file originates from the featured page or belongs to public domain traffic, then as shown... Figure 15 As shown in (b), the bottom navigation area and the component for exiting the second mode can be displayed.

[0138] The foregoing has described specific embodiments of this specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims may be performed in a different order than that shown in the embodiments and may still achieve the desired result. Furthermore, the processes depicted in the drawings do not necessarily require the specific or sequential order shown to achieve the desired result. In some embodiments, multitasking and parallel processing are possible or may be advantageous.

[0139] According to another embodiment, a media file playback processing apparatus is provided. Figure 16 A schematic block diagram of the playback processing apparatus according to one embodiment is shown, the apparatus being disposed in Figure 1 The user end in the illustrated architecture. For example... Figure 16 As shown, the device 1600 includes a page display unit 1601 and an event listening unit 1602. The main functions of each component are as follows:

[0140] Page display unit 1601 is configured to play a first media file in landscape mode on a portrait playback page; while playing the first media file, a component for selecting a viewing mode is displayed, the viewing mode including at least one of a second mode, a third mode and a fourth mode;

[0141] Among them, the second mode hides some page elements compared to the first mode and selects or adjusts the background of the playback page according to the content of the first media file; the third mode uses a gradient to change the background of the playback page from the edge of the first media file to the main background color; and the fourth mode uses a higher screen ratio for the first media file compared to the first mode.

[0142] Event listener unit 1602 is configured to listen for events on the playback page.

[0143] As one possible implementation, the page display unit 1601 can be specifically configured to switch to one of the viewing modes on the playback page and play the first media file in response to an event triggered by a component used to select a viewing mode.

[0144] Furthermore, the page display unit 1601 can also be configured to: while switching to one of the viewing modes on the playback page to play the first media file, display a component on the playback page to trigger at least one of the other viewing modes.

[0145] As another possible implementation, the page display unit 1601 can be specifically configured to: in response to an event triggered by a component for selecting a viewing mode, while playing a first media file in a first mode on the playback page, display multiple first selection components corresponding to viewing modes; in response to an event triggered by one of the first selection components, switch on the playback page to play the first media file in the viewing mode corresponding to the triggered first selection component.

[0146] Furthermore, the page display unit 1601 can also be configured to: while switching to the viewing mode corresponding to the triggered first selection component on the playback page to play the first media file, display a component on the playback page to trigger at least one of the other viewing modes.

[0147] Furthermore, the page display unit 1601 can also be configured to: when displaying multiple first selection components corresponding to viewing modes, also display the first selection component corresponding to the first mode; in response to an event triggered by the first selection component corresponding to the first mode, cancel the display of each first selection component and display the component used to select the viewing mode.

[0148] As another possible implementation, the page display unit 1601 can be specifically configured to: when playing the first media file, in response to a long press gesture on the playback page, display a settings panel superimposed on the playback page, the settings panel including second selection components corresponding to multiple modes; wherein, the multiple modes include a viewing mode, or, the multiple modes include a viewing mode and a first mode.

[0149] Furthermore, the second selection component corresponding to the currently used mode on the settings panel is in a selected state, while the second selection components corresponding to other modes are in a deselected state; the page display unit 1601 can also be configured to: in response to an event triggered by one of the deselected second selection components, switch on the playback page to play the first media file using the mode corresponding to the triggered second selection component.

[0150] Furthermore, the page display unit 1601 can also be configured to: when playing the first media file in the fourth mode on the playback page, change the screen size of the media file being played in response to a triggering operation event to change the screen size; or, when the fourth mode and other viewing modes are used simultaneously on the playback page, maintain the other viewing modes and change the screen size of the media file being played in response to a triggering operation event to change the screen size.

[0151] Furthermore, the page display unit 1601 can also be configured to: while playing the first media file in viewing mode on the playback page, display a component for exiting viewing mode; and in response to an event triggered by the component for exiting viewing mode, switch the playback page to play the first media file in the first mode.

[0152] Furthermore, the page display unit 1601 can also be configured to: when playing the first media file in viewing mode on the playback page, in response to an event that triggers media switching, switch to playing the second media file in the first mode on the playback page.

[0153] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, for system or device embodiments, since they are basically similar to method embodiments, the description is relatively simple, and relevant parts can be referred to the description of the method embodiments. The system and device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs. Those skilled in the art can understand and implement this without creative effort.

[0154] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties. Furthermore, the collection, use and processing of the relevant data must comply with the relevant laws, regulations and standards of the relevant countries and regions, and corresponding operation portals are provided for users to choose to authorize or refuse.

[0155] In addition, embodiments of this application also provide a computer-readable storage medium storing a computer program thereon, which, when executed by a processor, implements the steps of the method described in any of the foregoing method embodiments.

[0156] And an electronic device, comprising:

[0157] One or more processors; and

[0158] A memory associated with the one or more processors, the memory being used to store program instructions that, when read and executed by the one or more processors, perform the steps of the method described in any of the foregoing method embodiments.

[0159] This application also provides a computer program product, including a computer program that, when executed by a processor, implements the steps of the method described in any of the foregoing method embodiments.

[0160] in, Figure 17 An exemplary architecture of an electronic device is shown, which may include a processor 1710, a video display adapter 1711, a disk drive 1712, an input / output interface 1713, a network interface 1714, and a memory 1720. The processor 1710, video display adapter 1711, disk drive 1712, input / output interface 1713, network interface 1714, and memory 1720 can communicate with each other via a communication bus 1730.

[0161] The processor 1710 can be implemented using a general-purpose CPU, microprocessor, application-specific integrated circuit (ASIC), or one or more integrated circuits to execute relevant programs and implement the technical solution provided in this application.

[0162] The memory 1720 can be implemented in the form of ROM (Read Only Memory), RAM (Random Access Memory), static storage device, dynamic storage device, etc. The memory 1720 can store the operating system 1721 for controlling the operation of the electronic device 1700, and the basic input / output system (BIOS) 1722 for controlling the low-level operations of the electronic device 1700. Additionally, it can store a web browser 1723, a data storage management system 1724, and a media file playback processing device 1725, etc. The aforementioned media file playback processing device 1725 can be the application program that specifically implements the aforementioned steps in this embodiment. In summary, when implementing the technical solution provided in this application through software or firmware, the relevant program code is stored in the memory 1720 and is called and executed by the processor 1710.

[0163] Input / output interface 1713 is used to connect input / output modules to realize information input and output. Input / output modules can be configured as components in the device (not shown in the figure) or externally connected to the device to provide corresponding functions. Input devices may include keyboards, mice, touch screens, microphones, various sensors, etc., and output devices may include displays, speakers, vibrators, indicator lights, etc.

[0164] Network interface 1714 is used to connect a communication module (not shown in the figure) to enable communication between this device and other devices. The communication module can communicate via wired means (such as USB, Ethernet cable, etc.) or wireless means (such as mobile network, WIFI, Bluetooth, etc.).

[0165] Bus 1730 includes a pathway for transmitting information between various components of the device, such as processor 1710, video display adapter 1711, disk drive 1712, input / output interface 1713, network interface 1714, and memory 1720.

[0166] It should be noted that although the above-described device only shows the processor 1710, video display adapter 1711, disk drive 1712, input / output interface 1713, network interface 1714, memory 1720, bus 1730, etc., in specific implementations, the device may also include other components necessary for normal operation. Furthermore, those skilled in the art will understand that the above-described device may only include the components necessary for implementing the solution of this application, and does not necessarily include all the components shown in the figures.

[0167] As can be seen from the above description of the embodiments, those skilled in the art can clearly understand that this application can be implemented by means of software plus necessary general-purpose hardware platforms. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a computer program product. This computer program product can be stored in a storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute the methods described in various embodiments or some parts of the embodiments of this application.

[0168] The technical solutions provided in this application have been described in detail above. Specific examples have been used to illustrate the principles and implementation methods of this application. The descriptions of the above embodiments are only for the purpose of helping to understand the methods and core ideas of this application. Furthermore, those skilled in the art will recognize that, based on the ideas of this application, there will be changes in the specific implementation methods and application scope. Therefore, the content of this specification should not be construed as a limitation of this application.

Claims

1. A method for playing media files, characterized in that, The method includes: On the portrait-oriented playback page, the first media file in landscape mode is played using the first mode. While playing the first media file, a component for selecting a viewing mode is displayed, the viewing modes including a second mode, a third mode, and a fourth mode; Among them, the second mode hides some page elements compared to the first mode and selects or adjusts the background of the playback page according to the content of the first media file; the third mode uses a gradient to gradually change the background of the playback page from the edge of the first media file to the main background color; the fourth mode uses a higher screen ratio for the first media file compared to the first mode, and displays the media content formed by enlarging the central area of ​​the first media file in the fourth mode. When the component for selecting a viewing mode is triggered, the playback page switches to one of the viewing modes to play the first media file; if the first media file originates from a secondary page, the playback page after switching to one of the viewing modes displays a playback control component and a component for exiting the viewing mode; if the first media file originates from a featured page or belongs to public domain traffic, the playback page after switching to one of the viewing modes displays a bottom navigation area and a component for exiting the viewing mode.

2. The method according to claim 1, characterized in that, While switching to one of the viewing modes on the playback page to play the first media file, a component for triggering at least one of the other viewing modes is displayed on the playback page.

3. The method according to claim 1, characterized in that, The step of switching on the playback page to play the first media file using one of the viewing modes, triggered by the component for selecting the viewing mode, includes: In response to an event that triggers the component for selecting the viewing mode, while playing the first media file in the first mode on the playback page, multiple first selection components corresponding to the viewing modes are displayed; In response to an event that one of the first selection components is triggered, the playback page switches to the viewing mode corresponding to the triggered first selection component to play the first media file.

4. The method according to claim 3, characterized in that, The method further includes: While switching to the viewing mode corresponding to the triggered first selection component on the playback page to play the first media file, a component for triggering at least one of the other viewing modes is displayed on the playback page.

5. The method according to claim 3, characterized in that, When displaying the first selection component corresponding to multiple viewing modes, the first selection component corresponding to the first mode is also displayed; In response to an event triggered by the first selection component corresponding to the first mode, the display of each first selection component is canceled, and the component used to select the viewing mode is displayed.

6. The method according to claim 1, characterized in that, The components displayed while playing the first media file to select the viewing mode include: When playing the first media file, in response to a long press gesture on the playback page, a settings panel superimposed on the playback page is displayed, the settings panel including a second selection component corresponding to multiple modes; The plurality of modes may include the viewing mode, or the plurality of modes may include the viewing mode and the first mode.

7. The method according to claim 6, characterized in that, The step of switching on the playback page to play the first media file using one of the viewing modes, triggered by the component for selecting the viewing mode, includes: The second selection component corresponding to the currently used mode on the settings panel is in a selected state, while the second selection component corresponding to other modes is in a deselected state. In response to an event that triggers one of the second selection components that is in an unselected state, the playback page switches to play the first media file using the mode corresponding to the triggered second selection component.

8. The method according to claim 1, 3, or 7, characterized in that, When the first media file is played in the fourth mode on the playback page, the screen size of the media file being played is changed in response to an operation event that triggers a change in screen size; or, When the fourth mode and other viewing modes are used simultaneously on the playback page, in response to an operation event that triggers a change in screen size, the other viewing modes are maintained and the screen size of the media file being played is changed.

9. The method according to claim 1, characterized in that, The method further includes: In response to an event triggered by the component used to exit viewing mode, the playback page switches to playing the first media file in the first mode.

10. The method according to claim 1, characterized in that, The method further includes: When the first media file is played in viewing mode on the playback page, in response to the media switching event, the playback page switches to playing the second media file in the first mode.

11. A media file playback processing device, characterized in that, The device includes: The page display unit is configured to play a first media file in landscape mode on a portrait-oriented playback page; while playing the first media file, a component for selecting a viewing mode is displayed, the viewing modes including a second mode, a third mode and a fourth mode; Among them, the second mode hides some page elements compared to the first mode and selects or adjusts the background of the playback page according to the content of the first media file; the third mode uses a gradient to gradually change the background of the playback page from the edge of the first media file to the main background color; the fourth mode uses a higher screen ratio for the first media file compared to the first mode, and displays the media content formed by enlarging the central area of ​​the first media file in the fourth mode. The event listening unit is configured to listen for operations on the playback page; The page display unit is further configured to, if the event listening unit detects that the component for selecting the viewing mode is triggered, switch the playback page to play the first media file using one of the viewing modes; wherein, if the first media file originates from a second-level page, the playback page after switching to one of the viewing modes displays a playback control component and a component for exiting the viewing mode; if the first media file originates from a featured page or belongs to public domain traffic, the playback page after switching to one of the viewing modes displays a bottom navigation area and a component for exiting the viewing mode.

12. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the steps of the method according to any one of claims 1 to 10.

13. An electronic device, characterized in that, include: One or more processors; as well as A memory associated with the one or more processors, the memory being used to store program instructions that, when read and executed by the one or more processors, perform the steps of the method according to any one of claims 1 to 10.

14. A computer program product, comprising a computer program, characterized in that, When executed by a processor, the computer program implements the steps of the method according to any one of claims 1 to 10.

Images