Method and apparatus for browsing multimedia content

Abstract

The application provides a method and device for browsing multimedia content. The scheme introduces a function of "one recording and multiple obtaining", that is, during the process of recording a video, the content of a highlight moment, such as a highlight moment photo or a highlight moment short video, is obtained. In addition, after the video recording is completed, the photo of the highlight moment can be viewed in a gallery. For example, when a video associated with a highlight moment photo is displayed in a first area of a playing interface, a thumbnail list containing the highlight moment photo can be displayed in the first area of the playing interface, and a user can select a thumbnail from the thumbnail list, and a second area of the playing interface is refreshed from displaying a first video (i.e., an original video) to displaying the highlight moment photo associated with the video. With the scheme, the user can conveniently view the highlight moment content associated with the original video, thereby improving the convenience of the user in viewing the highlight moment content and improving the user experience.

Description

Technical Field

[0001] This application relates to the field of multimedia technology, and in particular to a method and apparatus for browsing multimedia content. Background Technology

[0002] With the widespread adoption of smart devices and the rapid development of their camera technology, photo and video recording functions have become essential features. Furthermore, users' demands and experiences regarding photo and video recording are constantly increasing. For example, in some scenarios, users expect to capture memorable moments in photos while recording video, but current smart device camera technology cannot meet this need. Summary of the Invention

[0003] In view of this, this application provides a method and apparatus for browsing multimedia content to solve the above-mentioned technical problems, and the disclosed technical solution is as follows:

[0004] Firstly, this application provides a method for browsing multimedia content. The method includes: in response to a user opening a gallery application, displaying a first interface including a thumbnail of a first video; in response to a user inputting a first thumbnail of the first video, displaying a playback interface for the first video, the playback interface including a first area and a second area, the second area displaying the first video, the first area including a thumbnail list, the thumbnail list including thumbnails of at least one highlight photo associated with the first video; in response to a user selecting a second thumbnail from the thumbnail list, displaying the first highlight photo corresponding to the second thumbnail in the second area, and no longer displaying the first video. Therefore, this solution, when displaying a video associated with highlight photos in the first area of ​​the playback interface, can also display a thumbnail list containing highlight photos in the first area of ​​the playback interface, allowing the user to select a thumbnail from the list. The second area of ​​the playback interface refreshes from displaying the first video (i.e., the original video) to displaying highlight photos associated with that video. This improves the convenience for users to view highlight photos and enhances the user experience.

[0005] In one possible implementation, the highlight photo is automatically captured during the recording of the first video; or, during the recording of the first video, the highlight photo is captured in response to the user's touch operation of the shutter button.

[0006] In another possible implementation, the thumbnail list also includes a third thumbnail of the first video. This allows users to easily view the original video after viewing the highlight photos, further improving the user experience.

[0007] In another possible implementation, when the second area displays the first highlight photo corresponding to the second thumbnail, the third thumbnail of the first video also includes playback controls. This allows users to intuitively identify the thumbnail of the original video from the thumbnail list, further improving the user experience.

[0008] In another possible implementation, the first region also includes a selector. The method further includes: in response to a user's swiping action on the thumbnail list, the thumbnail list moves within the first region, and the thumbnail that remains within the selector's area is the first thumbnail selected by the user. This allows users to directly swipe through the thumbnail list to select a photo or original video of a highlight moment, eliminating the need for searching and clicking, simplifying the selection process and improving the user experience.

[0009] In another possible implementation, the movement of the thumbnail list in the first area in response to a user's swipe operation on the thumbnail list includes: after detecting a user's swipe operation on the thumbnail list, determining the swipe parameters, including swipe speed and swipe direction; triggering the thumbnail list to move in the swipe direction at a speed matching the swipe speed; after detecting a swipe-off operation, determining the swipe-off speed; if the swipe-off speed is 0, triggering the thumbnail list to stop moving; if the swipe-off speed is greater than 0, triggering the thumbnail list to continue moving at the swipe-off speed until the movement speed drops to 0 and stops.

[0010] In another possible implementation, the method further includes: after the thumbnail list stops moving, determining the displacement of the thumbnail list; obtaining the ratio between the displacement and the width of the thumbnail, and rounding the ratio to the nearest integer to obtain a first value; if the first value is equal to 0, determining that the thumbnail that remains within the selector's range is the original thumbnail, the original thumbnail being the thumbnail within the selector's range before receiving the swipe operation; if the first value is greater than 0, determining that the thumbnail in the thumbnail list located in the target direction of the original thumbnail and separated from the original thumbnail by the first value is the thumbnail that remains within the selector's range, the target direction being the direction opposite to the swipe direction of the swipe operation.

[0011] In another possible implementation, the method further includes: during the rightward movement of the thumbnail list in response to a user's right swipe, if the first thumbnail in the list is within the selector's range and the swipe speed is greater than 0, the thumbnail list is triggered to move left by a first preset displacement and then returns to the position where the first thumbnail is within the selector's range; during the leftward movement of the thumbnail list in response to a user's left swipe, if the last thumbnail in the list is within the selector's range and the swipe speed is greater than 0, the thumbnail list is triggered to move right by a second preset displacement and then returns to the position where the last thumbnail is within the selector's range. This process creates a thumbnail list bounce-back animation.

[0012] In another possible implementation, the method further includes: in response to a user's click on the thumbnail list, determining that the clicked thumbnail is the first thumbnail selected by the user.

[0013] In another possible implementation, the method further includes: in response to a user's input of a third thumbnail of the first video, displaying the first video in the second area, wherein the display state and playback progress of the first video are the same as those when the user last exited the first video, and the display state includes a playing state and a paused playback state. Thus, after switching from displaying highlight photos back to displaying the original video, the original state is maintained and playback continues, automatically reverting to the playback progress corresponding to the last exit of the original video, improving the user experience.

[0014] In another possible implementation, the thumbnail list also includes thumbnails of other photos or videos in the gallery application besides the first video. This allows users to directly navigate through the thumbnail list to view other photos or videos in the gallery without needing to exit the original video and re-enter the gallery, reducing user operations and improving the user experience.

[0015] In another possible implementation, the method further includes: in response to a user's swiping action on the second area, the second area displays content corresponding to a fourth thumbnail in the gallery application that is adjacent to the first thumbnail of the first video.

[0016] In another possible implementation, when the first video or a highlight photo associated with the first video is displayed in the second area, thumbnails of both the first video and the highlight photo are expanded in the thumbnail list. This makes it convenient for users to view the highlight photo associated with the first video.

[0017] In another possible implementation, while other photos or videos are displayed in the second area, the thumbnail list shows a third thumbnail of the first video, and hides the thumbnails of the highlight photos associated with the first video. This avoids the highlight photo thumbnails taking up too much display space, allowing the first area to display more thumbnails that the user is likely to view, improving the utilization of display space. At the same time, it avoids users repeatedly navigating the thumbnail list to locate the thumbnail they actually want to see, reducing user operations.

[0018] In another possible implementation, the method further includes: when the content corresponding to the fourth thumbnail is displayed in the second area, in response to the user's swipe operation on the second area, the first video is played starting from second 0 in the second area, and the content corresponding to the fourth thumbnail is no longer displayed in the second area. In this way, when the user views other photos or videos in the gallery and then returns to view the first video, it is assumed that the user may need to watch the video from the beginning, avoiding the need for the user to adjust the playback progress bar to start playback from the beginning, reducing user operations, and improving the user experience.

[0019] In another possible implementation, the method further includes: when displaying the content of the first video in the second area, the first area also includes a playback progress bar, which includes a pause control, a mute control, and a playback progress control; the pause control is located at the first boundary of the first area, and the mute control is located at the second boundary of the first area; the playback progress control is located on the third thumbnail of the first video, and the width of the third thumbnail is greater than the width of other thumbnails in the thumbnail list. In this way, displaying the playback progress bar directly in the first area avoids the playback progress bar displayed in the second area from affecting the display in the second area, thus improving the utilization rate of both the first and second areas.

[0020] In another possible implementation, the method further includes: in response to user input on a third thumbnail, expanding the thumbnail list to display a sequence of image frames from the first video; and in response to user input on a playback progress control, displaying the image frame positioned by the playback progress control in a second area. This allows users to intuitively adjust the playback progress based on the images in the sequence of image frames, improving the accuracy of playback progress adjustments.

[0021] In another possible implementation, the method further includes: while displaying highlight photos associated with the first video in the second area, the thumbnail list displays a third thumbnail of the first video, and hides the image frame sequence of the first video. This avoids the original video's image frame sequence occupying too much space in the thumbnail list, shortens the thumbnail list length, and reduces the number of operations required for the user to locate other thumbnails.

[0022] In another possible implementation, the method further includes: in response to a user's swiping action on the second area, displaying a second interface that displays the content of a fourth thumbnail adjacent to the first thumbnail of the first video in the gallery application, without displaying a thumbnail list.

[0023] In another possible implementation, the aspect ratio of each thumbnail in the thumbnail list is 1:1; or, the aspect ratio of the first thumbnail is the actual aspect ratio of the video or photo corresponding to the first thumbnail, and the aspect ratios of the other thumbnails in the thumbnail list are 1:1. This solution displays the thumbnail of the currently displayed item using the actual aspect ratio of the photo or video, allowing users to quickly identify the thumbnail of the currently displayed item, thus improving the user experience.

[0024] In another possible implementation, the height of the first thumbnail is greater than the height of the other thumbnails in the thumbnail list. This allows users to more quickly identify the thumbnail corresponding to the currently displayed item, further improving the user experience.

[0025] In another possible implementation, the thumbnail of the first video includes a first identifier indicating that the first video is associated with at least one highlight photo. This makes it easier for users to visually identify videos associated with highlight content, improving the recognizability of such videos.

[0026] In another possible implementation, the first region is located below the second region, and the area of ​​the second region is larger than the area of ​​the first region.

[0027] Secondly, this application also provides an electronic device, which includes: one or more processors, a memory, and a touch screen; the memory is used to store program code; the processor is used to run the program code, enabling the electronic device to implement the method of browsing multimedia content as described in any of the first aspects.

[0028] Thirdly, this application also provides a computer-readable storage medium having instructions stored thereon, which, when executed on an electronic device, cause the electronic device to perform a method for browsing multimedia content as described in any of the first aspects.

[0029] It should be understood that the descriptions of technical features, technical solutions, beneficial effects, or similar language in this application do not imply that all features and advantages can be achieved in any single embodiment. Rather, it is understood that the description of a feature or beneficial effect means that a specific technical feature, technical solution, or beneficial effect is included in at least one embodiment. Therefore, the descriptions of technical features, technical solutions, or beneficial effects in this specification do not necessarily refer to the same embodiment. Furthermore, the technical features, technical solutions, and beneficial effects described in this embodiment can be combined in any suitable manner. Those skilled in the art will understand that embodiments can be implemented without one or more specific technical features, technical solutions, or beneficial effects of a particular embodiment. In other embodiments, additional technical features and beneficial effects may be identified in specific embodiments that do not embody all embodiments. Attached Figure Description

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

[0031] Figure 1 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application;

[0032] Figures 2-14 This is a schematic diagram of the interface for viewing "One Record, Multiple Gains" related content provided in the embodiments of this application;

[0033] Figure 15 This is a schematic diagram of an interface in landscape display mode provided in an embodiment of this application;

[0034] Figures 16-18 This is a schematic diagram of the interface for viewing "one record, multiple gains" related content provided in the embodiments of this application;

[0035] Figure 19 This is a schematic diagram of an interface for a thumbnail list provided in an embodiment of this application;

[0036] Figures 20-22 This is a schematic diagram of the interface of the sliding thumbnail list process provided in the embodiments of this application;

[0037] Figure 23 This is a schematic diagram of another thumbnail list interface provided in an embodiment of this application;

[0038] Figures 24-26 This is a schematic diagram of the interface when sliding thumbnails in landscape display mode, as provided in the embodiments of this application.

[0039] Figures 27-30 This is a schematic diagram of an interface corresponding to the sliding large image area process provided in the embodiments of this application;

[0040] Figures 31-34 This is another schematic diagram of the interface corresponding to the sliding large image area process provided in the embodiments of this application;

[0041] Figure 35 This is a schematic diagram of a video playback interface provided in an embodiment of this application;

[0042] Figure 36 This is a schematic diagram of another video playback interface provided in an embodiment of this application;

[0043] Figure 37 This is a schematic diagram of another thumbnail list interface provided in an embodiment of this application. Detailed Implementation

[0044] The terms "first," "second," and "third," etc., used in this application specification, claims, and drawings are used to distinguish different objects, not to limit a specific order.

[0045] In the embodiments of this application, the terms "exemplary" or "for example" are used to indicate that something is an example, illustration, or description. Any embodiment or design that is described as "exemplary" or "for example" in the embodiments of this application should not be construed as being more preferred or advantageous than other embodiments or design. Specifically, the use of the terms "exemplary" or "for example" is intended to present the relevant concepts in a specific manner.

[0046] To ensure clarity and conciseness in the description of the following embodiments, a brief introduction to the related technologies is given first:

[0047] A magic moment (MM) refers to a memorable instant during video recording. For example, MM could be the best moment of movement, the best expression, or the best pose. It is understood that this application does not limit the term MM; MM can also be called a beautiful moment, a magical moment, a brilliant moment, a decisive moment, or the best shot (BS), etc. In different scenarios, a magic moment can be of different types. For example, when recording a football match video, a magic moment could be the instant a player's foot contacts the ball during a shot or pass, or it could be the instant the ball flies into the goal. When recording a video of a person jumping from the ground, a magic moment could be the instant the person reaches their highest point in the air, or it could be the instant the person's movement is most fluid and graceful while in the air.

[0048] "One record, multiple benefits" can be understood as the ability for users to capture one or more photos of highlights and one or more selected video clips by pressing the "Shoot" icon once when using a camera app to shoot videos.

[0049] The process of achieving multiple benefits from a single recording can be as follows: During recording, the electronic device automatically identifies and captures key moments, obtaining photos of those moments (i.e., photos of the model / girl). After recording, when the user reviews the recorded video, the device can recommend photos of the model / girl and short videos of highlights (also known as featured short videos, highlights, or selected videos). For example, if the entire recorded video is 1 minute long, multiple photos (e.g., 5) of key moments and a short video of a preset duration (e.g., 15 seconds) can be obtained. Alternatively, "multiple benefits from a single recording" can also have other names, such as "one-click multiple gains," "one-click multiple shots," "one-click output," "one-click blockbuster," or "AI one-click blockbuster."

[0050] It should also be noted that when a user records video in the phone's multi-view mode, in addition to the recorded video and one or more highlights from the video, the phone can also generate a configuration file that can include video tags. Alternatively, the phone can obtain tag data that includes the video's tags. This tag data can then be added to the video, typically located at the beginning of the video.

[0051] Manual capture allows you to take photos manually while recording video to obtain the desired footage.

[0052] To meet users' needs for capturing memorable moments simultaneously during video recording, this application introduces a "one-record-multiple-captures" function. This means obtaining key moments, such as photos or short videos, during video recording. Additionally, once recording is complete, the photos can be viewed in the gallery. This solution allows users to capture photos of memorable moments while recording video, fulfilling their needs. Furthermore, users can easily view both the recorded video and the photos in their gallery, enhancing the user experience. Moreover, compared to randomly obtaining photos from the recorded video, this solution provides higher image quality for the captured moments, resulting in a better user experience.

[0053] The multimedia content browsing method provided in this application can be applied to various electronic devices, such as mobile phones, smart screens, tablets, wearable electronic devices, in-vehicle electronic devices, augmented reality (AR) devices, virtual reality (VR) devices, laptops, ultra-mobile personal computers (UMPCs), netbooks, personal digital assistants (PDAs), projectors, and so on.

[0054] The following text uses a mobile phone as an example of an electronic device. Figure 1 A schematic diagram of the structure of an electronic device provided in an embodiment of this application is shown.

[0055] The electronic device may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headphone jack 170D, a sensor module 180, buttons 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc.

[0056] The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an accelerometer sensor 180E, a distance sensor 180F, a proximity sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0057] It should be noted that, Figure 1 The structure shown does not constitute a specific limitation on the electronic device. In other embodiments of this application, the electronic device may include a... Figure 1 The components shown may include more or fewer components, or the electronic device may include... Figure 1 The components shown may be a combination of certain components, or the electronic device may include... Figure 1 Sub-components of some of the components shown. Figure 1 The components shown can be implemented in hardware, software, or a combination of software and hardware.

[0058] Processor 110 may include one or more processing units. For example, processor 110 may include at least one of the following processing units: application processor (AP), graphics processing unit (GPU), image signal processor (ISP), controller, video codec, and digital signal processor (DSP). The different processing units may be independent devices or integrated devices.

[0059] The controller can generate operation control signals based on the instruction opcode and timing signals to complete the control of instruction fetching and execution.

[0060] Electronic devices can implement display functions through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations and for graphics rendering. The processor 110 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0061] The display screen 194 can be used to display images or videos. The display screen 194 includes a display panel. In some embodiments, the electronic device may include one or N display screens 194, where N is a positive integer greater than 1. As one possible implementation, the display screen 194 can be used to display photos of memorable moments and recorded short videos, etc.

[0062] Electronic devices can achieve shooting functions through ISP, camera 193, video codec, GPU, display 194 and application processor.

[0063] The ISP (Image Signal Processor) is used to process data fed back from the camera 193. For example, when taking a picture, the shutter is opened, and light is transmitted through the lens to the camera's photosensitive element. The light signal is converted into an electrical signal, and the camera's photosensitive element transmits the electrical signal to the ISP for processing, transforming it into an image visible to the naked eye. The ISP can perform algorithmic optimization of image noise, brightness, and color. The ISP can also optimize parameters such as exposure and color temperature of the shooting scene. In some embodiments, the ISP can be set in the camera 193.

[0064] Camera 193 is used to capture still images or videos. In some embodiments, the electronic device may include one or N cameras 193, where N is a positive integer greater than 1. In this embodiment, processor 110 can determine the highlight moment MM in the video stream recorded by camera 193, and automatically trigger a photo capture by camera 193 when the MM is determined. ISP and DSP can process the image signal of the highlight moment MM to obtain an image of the highlight moment.

[0065] A digital signal processor is used to process digital signals. In addition to processing digital image signals, it can also process other digital signals.

[0066] Video codecs are used to compress or decompress digital video.

[0067] Internal memory 121 can be used to store computer executable program code, which includes instructions. Internal memory 121 may include a program storage area and a data storage area. The program storage area may store the operating system and applications required for at least one function (e.g., sound playback and image playback). The data storage area may store data created during the use of the electronic device (e.g., audio data and phonebook). Processor 110 executes various processing methods of the electronic device by running instructions stored in internal memory 121 and / or instructions stored in memory disposed within the processor.

[0068] This application will take a mobile phone as an example, with a camera application installed on the phone, to describe in detail the multimedia content browsing method provided in this application.

[0069] In some embodiments of this application, users can manually enable or disable the "one-record-multiple-gains" function provided in the embodiments of this application. Of course, in other embodiments, the "one-record-multiple-gains" function is enabled by default, and users can manually disable this function.

[0070] The following will combine Figures 2-6 This section introduces the entry point for the "One Record, Multiple Benefits" function.

[0071] For example, a user can instruct the phone to open the camera application by touching specific controls on the phone screen, pressing specific physical buttons or button combinations, inputting voice, or using air gestures. In response to the user's instruction to open the camera, the phone launches the camera application and displays the shooting interface.

[0072] In one exemplary embodiment, for example, as Figure 2 As shown, users can tap the "Camera" app icon 101 on their phone's home screen to launch the camera app. The phone will then display the following: Figure 3 The shooting interface shown.

[0073] In other exemplary embodiments, when the phone is in a locked state or running other applications, the user can also control the phone to open the camera application in other ways, causing the phone to display... Figure 3 The shooting interface shown will not be described in detail here.

[0074] like Figure 3 As shown, the camera application's shooting interface may include a viewfinder 102, a photo capture control, a video recording control, and other functional controls (such as a portrait mode control, a night scene mode control, or other controls). When the user clicks the video recording control, the camera application starts recording mode, and the phone can display... Figure 4 The video recording interface is shown. The user clicks the "Settings" control 103 on the video recording interface to enter... Figure 5 The camera settings interface shown.

[0075] like Figure 5 As shown, the camera settings interface displays a control 104 to enable / disable "One Record, Multiple Views", which is used to enable or disable the "One Record, Multiple Views" function. Figure 5 The state of control 104 shown indicates that the "one record, multiple results" function is enabled.

[0076] In addition, the camera system can enable control 104 by default, which means the "one record, multiple views" function is enabled by default. If the user does not need to use the "one record, multiple views" function, they can manually click control 104 to disable the "one record, multiple views" function.

[0077] When a user enables the "One Record, Multiple Views" feature, the camera app automatically identifies highlights while recording video in video mode and generates photos of those highlights. The recorded video can be referred to as the original video. Furthermore, if the original video is longer than a second preset duration (e.g., 15 seconds) and highlights are identified, a short video can be automatically generated based on the highlights and the original video. This generated short video can be called a "highlight short video" (or "featured short video," "highlight video," or "featured video").

[0078] Understandable. Figure 5 The camera settings interface shown may also include other controls for recording settings, such as controls for setting video resolution and video frame rate. Figure 5 The controls shown are merely illustrative examples, and the embodiments of this application do not limit the content items displayed in the camera settings interface.

[0079] The above Figure 5The video resolution settings controls shown can be used to select the video resolution. For example, video resolutions can be selected as 3840*2160 (Ultra HD 4K), 1920*1080 (1080p Full HD), 1280*720 (720p HD), etc. It should be understood that the video resolution options depend on the specific configuration of the mobile phone.

[0080] in addition, Figure 5 The camera settings interface shown may also include controls for photo settings, such as controls for setting the photo aspect ratio, controls for setting gestures for taking photos, and controls for setting smile capture.

[0081] User click Figure 4 Click the record button shown to enter the video recording interface. In an exemplary embodiment, the video recording interface is as follows: Figure 6 As shown. Figure 6 The image shown is a frame during video recording (e.g., the frame at 01 seconds). The interface includes a pause button 105, a stop button 106, and a camera button 107.

[0082] During video recording, users can manually capture photos by clicking the photo button 107. During recording, users can pause the recording process by clicking the pause button 105. Users can stop the recording process by clicking the stop button 106 and obtain the recorded video.

[0083] The above describes one way to trigger the "one-record-multiple-views" function on a mobile phone. This application is not limited to enabling "one-record-multiple-views" in video recording mode. In other exemplary embodiments of this application, users can enable the "one-record-multiple-views" function in other ways. For example, as a newly added mode, users can select to enter the "one-record-multiple-views" mode in the camera application. Alternatively, users can set the phone's video recording mode to "one-record-multiple-views" mode in the settings menu.

[0084] After enabling the "One Record, Multiple Gains" feature, users can view the original video they recorded, as well as related "One Record, Multiple Gains" content (such as photos or short videos of highlights) in the gallery.

[0085] The following is combined with Figures 7-15 This section introduces an entry point for users to access the gallery to view the original video and related "one-record-multiple-gains" content.

[0086] In one exemplary embodiment, such as Figure 7 As shown, users can tap the "Gallery" app icon 201 on their phone's home screen to launch the Gallery app. At this time, the phone displays... Figure 8 The "Photos" tab interface shown.

[0087] In other exemplary embodiments, users can also control the phone to open the gallery application by touching specific controls on the phone screen, pressing specific physical buttons or button combinations, inputting voice, or using air gestures. The gallery application can also be called a photo album, photos, etc.

[0088] Figure 8 The "Photos" tab interface shown displays thumbnails of photos and videos taken by the user using the phone's camera app. For example, the phone can display thumbnails of photos and videos in chronological order on the "Photos" tab interface.

[0089] To help users distinguish between regular videos and videos associated with "one record, multiple benefits" content, a specific identifier can be displayed on the thumbnails of videos associated with "one record, multiple benefits" content shown in the gallery.

[0090] In one exemplary embodiment, such as Figure 8 As shown, the thumbnail of video 202 (i.e., the first thumbnail) not only displays a preview of the original recorded video but also includes an AI identifier 203. This AI identifier indicates that the video contains associated "one-record-multiple-capture" content (such as photos of highlights or short videos). For example, AI identifier 203 is used to identify that video 202 was recorded in "one-record-multiple-capture" mode. When the thumbnail of video 202 contains AI identifier 203, it means that photos or videos associated with video 202 were also obtained during the recording of video 202.

[0091] Understandable. Figure 8 The AI ​​identifier 203 shown is only one example of an embodiment of this application. Other identifiers can also be used to mark videos associated with "one record, multiple gains" content. This application does not limit the specific form of the AI ​​identifier.

[0092] like Figure 8 The "Photos" tab interface shown may also include thumbnails for regular photos and regular videos. Regular photos refer to photos taken by touching the shutter button, such as the shutter button in photo mode or video mode. Regular videos refer to videos without associated "one-record-multiple-capture" content, such as videos taken in scenarios where the "one-record-multiple-capture" function is not enabled, or videos where the "one-record-multiple-capture" function is enabled but no photos of highlights are recognized or the recording duration is less than the second preset duration.

[0093] Figure 8 The thumbnail of the video 202 shown may be different or the same size as the thumbnails of ordinary photos and ordinary videos. This application embodiment does not limit this.

[0094] also, Figure 8The "Photos" tab interface shown can also include controls for a search bar, albums, timestamps, and discoveries.

[0095] When a user views a video associated with "One Record, Multiple Benefits" content, such as when the user clicks... Figure 8 The thumbnail of the 202 video shows the video playback interface on the mobile phone. Figure 9 As shown, the entire interface comprises four regions, A, B, C, and D, from top to bottom. Region B has the largest area, while regions A, C, and D are all relatively small. Furthermore, region A can partially overlap with region B, which will not be elaborated upon here.

[0096] Area A is located at the top of the entire interface and includes a status bar and a title bar. The status bar, located at the top of Area A, displays the phone's current status, such as cellular network signal quality, wireless network signal quality, and real-time time. The title bar can display the time and location of the video recording, details control 212, and a "back" control 213.

[0097] The status bar is a common display bar across different applications on a mobile phone. For example, different applications can all include a status bar with the same content. Alternatively, the status bar can be optional; an application's interface may not include a status bar, but it usually includes a title bar. Both the status bar and title bar can be hidden; for example, clicking anywhere in area B can hide both the status bar and title bar.

[0098] Area B is a large image area for displaying videos / photos. For example, when the user clicks on video 202, Area B can play the video according to the original shooting ratio or shooting pixel of video 202.

[0099] Region C is used to display at least a portion of the thumbnails in the thumbnail list. This thumbnail list may include thumbnails of the recorded original video and multiple (e.g., 5) highlight photos, or the thumbnail list may only include thumbnails of multiple highlight photos, excluding the thumbnail of the original video.

[0100] This application does not limit the number of photos of highlights obtained. For example, the longer the original video is recorded, or the more scenes of highlights appear in the original video, the more photos of highlights may be obtained; the shorter the original video is recorded, or the fewer scenes of highlights appear in the original video, the fewer photos of highlights may be obtained.

[0101] In one possible implementation, the thumbnails in the thumbnail list are arranged sequentially from left to right. For example... Figure 9As shown, thumbnail 206 displayed in area C is a thumbnail of the original video (which can be called the second thumbnail), and thumbnails 207-209 are thumbnails of the highlights photos.

[0102] This application embodiment does not limit the number of photos of memorable moments; for example, it can be one or more (such as five). Due to the limited display area of ​​region C, the number of thumbnails displayed is limited. Figure 9 In the example shown, the phone is in portrait mode, displaying only a thumbnail of the original video and thumbnails of two highlight photos. It is understood that the number of thumbnails displayed in area C is related to the size of the thumbnails themselves and the width of the phone screen; this application does not limit the number of thumbnails displayed in area C.

[0103] In one possible implementation, the thumbnails corresponding to the multiple highlight photos shown in region C are arranged from left to right in order of their capture time, from earliest to latest. For example, as... Figure 9 As shown, the shooting time corresponding to thumbnail 207 is earlier than that corresponding to thumbnail 208, the shooting time corresponding to thumbnail 208 is earlier than that corresponding to thumbnail 209, and so on. Further details are omitted here. Of course, the thumbnails of the highlight photos can also be arranged in other ways, such as in order of shooting time from latest to earliest. This application does not limit the sorting method of the thumbnails of the highlight photos.

[0104] Furthermore, the video or photo currently displayed in area B can be referred to as the current display item. The thumbnail corresponding to the current display item in area C is surrounded by a positioning frame 205 that is slightly larger than the thumbnail size. In other words, the positioning frame 205 is used to indicate that the photo or video corresponding to the thumbnail is the current display item in area B. The positioning frame 205 can also be referred to as a selector.

[0105] Using a positioning box 205 to indicate the currently displayed item is merely one example provided in this application embodiment. In other embodiments, the currently displayed item can be indicated in other ways. For example, a triangular selector can be displayed above or below the thumbnail of the currently displayed item, with one corner of the triangular selector pointing to the thumbnail of the currently displayed item. This application does not limit the specific method of indicating the currently displayed item.

[0106] Area D is located at the bottom of the entire interface and can display operation controls for the currently displayed item, such as share, favorite, edit, delete, and "more" controls. Furthermore, the content displayed in Area D can be hidden; for example, clicking anywhere in Area B will hide the content displayed in Area D.

[0107] In one exemplary embodiment, if a user views a video associated with "One Record, Multiple Captures" content for the first time, a guide box 204 (or a bubble prompt box) can be displayed above area C to guide and remind the user that the video includes "One Record, Multiple Captures" content. The prompt content could be: "One Record, Multiple Captures" intelligently captures multiple wonderful moments for you. In other words, the guide box 204 is used to inform the user that area C includes "One Record, Multiple Captures" content.

[0108] In another exemplary embodiment, to better guide and remind the user that the video includes "one-record-multiple-use" content, a mask layer (or overlay) with a certain degree of transparency, such as a gray mask, can be overlaid on areas A, B, and D. The transparency of the mask can be set according to actual needs, such as 20% to 80%, and this application does not limit the transparency of the mask. Area C is not covered by a mask in order to highlight the guide box 204 and area C.

[0109] Figure 9 The bubble prompts and overlays shown are merely examples provided in this application's embodiments. Other prompting methods may be used in other embodiments of this application, and this application does not limit them.

[0110] Understandably, to avoid excessive reminders disrupting normal user experience, if a user is not viewing a video associated with "one record, multiple benefits" content for the first time, no further guidance or reminders will be provided, and the video will not be displayed. Figure 9 The guide box 204 and the overlay are shown. For example, after a user first views a video A associated with "One Record, Multiple Benefits" content, and then views another video B that has not been viewed before and is also associated with "One Record, Multiple Benefits" content, the guide box and overlay will no longer be displayed.

[0111] It's understandable that the video displayed in area B will not autoplay while the guide box 204 and the overlay are displayed. The video in area B will autoplay once the guide box 204 and the overlay disappear. For example, a user can click... Figure 9 The guide box 204 and the overlay disappear after the user clicks on any position on the interface shown; or, the guide box 204 and the overlay disappear after the user clicks on any position in the area covered by the overlay; or, the guide box 204 and the overlay disappear automatically after a preset duration (e.g., 10 seconds). This application does not limit the specific method by which the guide box and the overlay disappear.

[0112] The above describes one way to view videos and related "One-Shot Multi-View" content from the "Photos" tab in the Gallery app. In addition, users can also view the original video and related "One-Shot Multi-View" content from the "Albums" tab in the Gallery app.

[0113] For example, a user can click Figure 8Enter the "Album" tab in the interface shown. Figure 10 The album interface shown.

[0114] like Figure 10 As shown, the album interface includes various albums in the gallery, such as the "Camera" album 301, the "All Photos" album 302, and the "Videos" album 303.

[0115] If the user clicks Figure 10 The "Camera" album 301 shown enters the "Camera" album interface, which displays thumbnails of videos and photos taken using the camera application.

[0116] like Figure 11 As shown, the "Camera" album interface includes thumbnails of photos / videos such as Photos 304, Videos 202, and Photos 305. The thumbnails of photos and videos in the "Camera" album are arranged in ascending order of shooting time, with the most recently shot (or newest) photo or video appearing at the very beginning of the interface (near the top left corner). For example, Figure 11 The shooting time corresponding to photo 304 is later than the shooting time of video 202, the shooting time corresponding to video 202 is later than the shooting time of photo 305, and so on.

[0117] like Figure 11 As shown, the thumbnail of video 202 includes an AI identifier 203, which indicates the "one-record-multiple-gains" content associated with video 202, such as photos or videos. If a user is viewing a video containing the AI ​​identifier for the first time, they will be directed to... Figure 12 The interface shown is Figure 12 The interface shown is Figure 9 The interface shown is the same, so it will not be described again here.

[0118] In other exemplary embodiments, if the user clicks Figure 10 The "All Photos" album 302 shown in the interface leads to the "All Photos" album interface. As previously mentioned, the "All Photos" album 302 includes videos shot using the camera app. That is, if the user has enabled the "One Record, Multiple Views" function and captured a video associated with "One Record, Multiple Views" content, then if the user views a video with the AI ​​icon on the "All Photos" album interface for the first time, the phone will jump from the "All Photos" album interface to... Figure 12 The interface shown.

[0119] Similarly, if a user uses a camera app to capture a video with "one-shot-multiple-views" content, then in Figure 10 Such videos will also be displayed in the "Videos" album 303 in the interface shown. If the user views a video containing the AI ​​identifier for the first time, the phone will jump from the "Videos" album interface to... Figure 12 The interface shown.

[0120] In addition, if a user moves a video associated with "One Record, Multiple Views" to another album, the user can view the video from that other album; this will not be elaborated further here.

[0121] It should be noted that, Figure 10 and Figure 11 The interface shown is merely an example; this application does not cover all aspects. Figure 10 and Figure 11 The view shown is not limited. For ease of drawing, Figure 10 All album cover thumbnails are the same size, meaning all albums display at the same size. However, in actual use, the sizes of different albums can differ, and the arrangement is not limited to any particular style. Figure 10 As shown. Furthermore... Figure 11 In the display interface of the "Camera" album shown, each row includes two thumbnails of videos or photos. In actual use, each row may include more (e.g., four) thumbnails of videos or photos. This application embodiment does not limit this.

[0122] In yet another exemplary embodiment, an entry point for a gallery application is provided on the shooting interface, which can display thumbnails of the last captured video or photo. For example... Figure 13 As shown, the entry point for the gallery application on the shooting interface is Preview Image 401, which is used to display a thumbnail of the video or photo that was captured last time.

[0123] If a user ends the recording after enabling the "One Record, Multiple Gains" feature, the phone can then retrieve the video containing the "One Record, Multiple Gains" content. At this point, the phone can... Figure 13 The preview image 401 shown displays a thumbnail of the recorded original video. If a user clicks on preview image 401 to view a video associated with "Record for Multiple Uses" content for the first time, the phone will display... Figure 14 The interface shown, in which, Figure 14 The interface shown is Figure 9 The interface shown is the same, so it will not be described again here.

[0124] In addition, such as Figure 9 As shown, when the phone is in portrait mode, area C is relatively small and can only display a limited amount of content. The aspect ratio of each thumbnail can be 1:1; in other words, each thumbnail in area C is a square image. This allows area C to display a larger number of thumbnails, enabling users to view all thumbnails without repeated operations, thus improving the user experience.

[0125] In another example, when the phone is in portrait mode, the aspect ratio of the thumbnail of the currently displayed item in area C can also be the actual aspect ratio of the video / photo, while the aspect ratio of other thumbnails is 1:1. Furthermore, to further highlight the thumbnail of the currently displayed item in the thumbnail list, the size of the thumbnail of the currently displayed item can be slightly larger than the other thumbnails, i.e., the thumbnail of the currently displayed item appears magnified.

[0126] In another scenario, the phone is in landscape mode, such as... Figure 15 As shown, area 501 is used to play videos or photos of highlights. Area 502 is used to display thumbnails of videos and photos of highlights. When the phone is in landscape mode, area 502 has a larger area and can display more content. Therefore, the aspect ratio of the thumbnail corresponding to the currently displayed item in area 502 can use the actual aspect ratio, while the aspect ratio of other thumbnails is 1:1. The aspect ratio of photos can include 3:4, 1:1, full screen, etc., while the aspect ratio of videos can include 16:9, 21:9, full screen, etc.

[0127] For example, such as Figure 15 As shown, the currently displayed item in area 501 is the video corresponding to thumbnail 206 (e.g., Figure 8 In the case of video 202, the positioning frame 205 is located around the thumbnail 206. If the aspect ratio of video 202 at the time of shooting was 16:9, then the aspect ratio of thumbnail 206 is also 16:9, while the aspect ratios of thumbnails 207-211 for the highlight photos are all 1:1, i.e., square. Furthermore, the thumbnail of the currently displayed item is slightly larger than the other thumbnails, meaning the thumbnail of the currently displayed item has a magnified effect.

[0128] The above content describes the process of guiding and reminding users to view "One Record, Multiple Gains" content when they first view a video associated with it. The following will combine... Figures 16-19 This describes the process of users viewing the original video and the "one-record-multiple-gains" content.

[0129] In one exemplary embodiment, after a user clicks on any area covered by the overlay in the video playback interface, the bubble guide box and the overlay disappear, and the video plays automatically.

[0130] For example, such as Figure 16 As shown, if the user touches (or clicks) any of the areas A, B, and D covered by the overlay, the phone displays... Figure 17 In the interface shown, the overlay and guide box 204 disappear. Simultaneously, area B can automatically play the video associated with the "One Record, Multiple Gains" content, i.e., the video corresponding to thumbnail 206. For example... Figure 17 As shown, when video is playing in area B, the content and status displayed in area C will not change.

[0131] In another exemplary embodiment, after the mask and guide box 204 disappear, the video in region B can be in a paused state by default. That is, a playback control is displayed on the video displayed in region B, and the video will only play after the user manually clicks the playback control.

[0132] like Figure 17 As shown, area B also includes a playback progress bar 402 and an "AI One-Click Blockbuster" control 401. The "AI One-Click Blockbuster" control 401 is the entry point for generating exciting short videos. For example, if a user clicks control 401, they will enter the playback interface for exciting short videos.

[0133] like Figure 17 As shown, the playback progress bar 402 displays a video duration of 56 seconds and a current playback progress of 0 seconds. The playback progress bar can also be called a playback slider, which the user can drag to adjust the playback progress. The playback progress bar 402 may also include a volume controller 4021. This application embodiment does not limit the content displayed by the playback progress bar.

[0134] In one possible implementation, considering that the user's current environment may not be suitable for video playback, to avoid the video playback sound interfering with the user, the video can be played muted by default during automatic playback. The user needs to click the volume controller 4021 to restore the video playback sound. The volume controller 4021 can also be called a mute button or mute control.

[0135] In addition, if the user clicks Figure 17 The control shown in area D will then lead to the interface for the corresponding operation on the currently displayed item. For example, if the user clicks... Figure 17 If the user clicks the "Edit" control, they will enter the editing interface of the currently playing video. For example, if the user clicks... Figure 17 If you select the "Share" control, you will be taken to the sharing interface of the currently playing video.

[0136] In another exemplary embodiment, the phone will only respond to the user's operation on the thumbnail of region C after the guide box and overlay have disappeared.

[0137] If a user directly clicks on a thumbnail in area C, the clicked thumbnail becomes the currently displayed item, and area B directly displays the photo corresponding to that item. If the user swipes left or right across the thumbnail list in area C, the thumbnails move accordingly. The phone compares the distance the finger moves on the screen with a corresponding threshold to determine the currently displayed item.

[0138] For example, the user clicks first Figure 16 At any point on the interface shown, the guide box 204 and the overlay disappear, and the original video automatically plays. Afterwards, if the user clicks (or swipes)... Figure 17 If the thumbnail in the thumbnail area shown (i.e., area C) is positioned such that the positioning box 205 is positioned on the thumbnail that has been clicked or swiped (e.g., thumbnail 207), then the photo corresponding to thumbnail 207 will be displayed in area B, that is, the photo shown will be displayed as shown in the image below. Figure 18 The interface shown.

[0139] In yet another exemplary embodiment, when the guide box and overlay are displayed, if the user directly clicks or swipes the thumbnail list in area C, the guide box and overlay disappear, and the photo or video that the user clicked or swipes to locate is directly displayed in the video or photo display area (i.e., area B).

[0140] like Figure 16 As shown, if the user swipes left on the thumbnail list of area C, the guide box 204 and the overlay disappear, and the current display item is determined based on the finger's sliding displacement on the screen.

[0141] In one example, if the sliding displacement is greater than a first threshold (such as half the side length of the thumbnail), it is determined that the currently displayed item will switch from the video or photo corresponding to thumbnail 206 to the photo corresponding to the next thumbnail (i.e., thumbnail 207). The positioning box 205 will then be positioned on thumbnail 207, and region B will display the photo corresponding to thumbnail 207, i.e., the phone will display... Figure 18 The interface shown.

[0142] In another example, for instance, when a swipe-off operation is detected and the thumbnail list stops moving, the displacement of the thumbnail list is determined; this displacement can be determined based on the swipe displacement. Then, the ratio between the displacement and the width of the thumbnail is calculated, and the ratio is rounded to the nearest integer to obtain a first value.

[0143] If the first value is equal to 0, the thumbnail that remains within the range of the selector is determined to be the original thumbnail, where the original thumbnail is the thumbnail that was within the range of the selector before the swipe operation was received; for example, before the current swipe operation was received, the selector was positioned at the position of thumbnail 206, and thumbnail 206 is the original thumbnail.

[0144] If the first value is greater than 0, the thumbnail in the thumbnail list located in the target direction of the original thumbnail and separated from the original thumbnail by the first value is determined as the new thumbnail. The target direction is the direction opposite to the sliding direction of the swipe operation. For example, if the ratio of the movement displacement to the thumbnail width is 1.5, then the first value after rounding is 2. The original thumbnail is thumbnail 206, and the swipe operation is a left swipe operation. The new thumbnail is thumbnail 209, which is located to the right of thumbnail 206 and separated from thumbnail 206 by two thumbnail widths.

[0145] In one possible implementation, the position of the positioning box 205 in region C is relatively fixed, and the position of the thumbnail list is moved by a sliding operation to position different thumbnails in the positioning box 205.

[0146] In one example, such as Figure 18 As shown, the positioning frame 205 is fixed at the center of the width direction of the mobile phone screen. Alternatively, the positioning frame 205 can be fixed at a position near the left edge of the phone in region C, that is, at the leftmost position in region C. Of course, the positioning frame 205 can also be fixed at other positions in region C, and this embodiment does not limit this.

[0147] In another possible implementation, the position of the positioning box 205 within region C is not fixed; that is, both the thumbnails and the positioning box 205 can be moved. In this implementation, the thumbnails displayed in region C can be arranged sequentially starting from the leftmost side of region C. When the user swipes left or right across the thumbnail list, the currently displayed item is determined based on the finger's sliding displacement on the screen and the thumbnail positioned by the positioning box 205 before the user's swipe.

[0148] In one scenario, the thumbnail of the new currently displayed item is already shown in area C. In this scenario, the thumbnail list does not need to move with the swipe direction; simply move the positioning box 205 to the new currently displayed item.

[0149] For example, positioning box 205 is positioned at the first thumbnail in the thumbnail list (e.g., ...). Figure 19 When the user swipes the thumbnail list to the left (thumbnail 206), the positioning box 205 moves to the right. If the user stops swiping when the positioning box 205 stops at the position of thumbnail 211, that is... Figure 19 As shown, the positioning box 205 stays on the thumbnail 211, meaning that the photo corresponding to the thumbnail 211 is the new current display item.

[0150] In another scenario, the thumbnail of the new currently displayed item is not shown in area C. In this case, the thumbnail list needs to move with the sliding direction so that the new currently displayed item can be shown in area C. Furthermore, the need to move the positioning box 205 is determined based on the sliding displacement.

[0151] If, after the thumbnail list is moved, the positioning box 205 is positioned exactly at the new current display item's location, then there is no need to move the positioning box 205. If, after the thumbnail list is moved, the positioning box 205 is not positioned at the new current display item's location, then the positioning box 205 is moved to the location corresponding to the new current display item.

[0152] Users can directly switch the objects displayed in area B by swiping or clicking the thumbnail list in area C. When area B displays "One Record, Multiple Benefits," if the user clicks thumbnail 206 (the thumbnail of the original video) in the thumbnail list, area B will switch to the interface playing the original video. For example, if the user starts from... Figure 17 The interface shown switches to Figure 18 The interface shown shows that if the user is in Figure 18 Clicking the thumbnail 206 corresponding to the original video on the interface shown will switch back to... Figure 17 The interface shown is as follows. Furthermore, when switching back to displaying the original video, the state from the last time the original video was exited is maintained. For example, if the original video is playing when switching from displaying the original video to displaying highlight photos, then switching back from displaying highlight photos to playing the original video will directly resume playback, continuing from the playback progress when exiting. If the original video played to the highlight photo display at the 12-second mark, then switching back to playing the original video will resume playback from the 12-second mark. Similarly, if the original video is paused when switching from displaying the original video to displaying highlight photos, then switching back to playing the original video will maintain the same paused playback progress as the original playback progress. The original playback progress refers to the playback progress of the original video when switching from the original video display state to the highlight photo display state.

[0153] As previously mentioned, in the scenario where the thumbnail list in the user's swipe area C moves, the displacement of the thumbnail list varies depending on the user's swipe speed.

[0154] The following will combine Figures 20-22 It explains that different users scroll through the thumbnail list at different speeds, and the thumbnail list follows the movement.

[0155] If a user swipes their finger across the thumbnail list in area C (e.g., swiping left on area C), the phone can detect the speed at which the finger leaves the screen (i.e., the swipe-off speed). If the swipe-off speed is 0, it indicates a slow swipe operation, and the phone can determine whether to reset the thumbnail list or position it to a new thumbnail based on the finger's displacement on the screen. If the swipe-off speed is greater than 0, it indicates a fast swipe operation, and the thumbnail list will continue swiping based on the swipe-off speed. This continues until the thumbnail list's swipe speed drops to 0, or the last thumbnail in the list is positioned within the positioning frame.

[0156] In one example, as the user swipes left and right through the list of thumbnails, the thumbnails in the positioning box 205 continuously switch, and correspondingly, the photos displayed in area B are refreshed in real time to the thumbnails in the positioning box 205.

[0157] For example, such as Figure 20 As shown, when a user swipes left across the thumbnail list with a swipe speed of 0, if the detected swipe displacement is less than a first threshold (e.g., half the thumbnail size), then the thumbnail is reset. When the finger swipes left, as... Figure 21 As shown, the thumbnail list moves to the left. However, once the finger leaves the screen, the thumbnail list returns to its initial position before the swipe, i.e., back to its original position. Figure 20 As shown in the interface, the positioning box 205 is still positioned at the location of the thumbnail 206, in other words, the currently displayed item has not been updated.

[0158] For example, such as Figure 20 As shown, when a user swipes left across the thumbnail list, if the swipe distance is large, such as... Figure 22 As shown, the first thumbnail 206 in the thumbnail list may slide out of the left boundary of area C until the sliding speed drops to 0. At this time, the thumbnail in the positioning box 205 is the thumbnail of the currently displayed item. Meanwhile, the photo displayed in area B will refresh in real time along with the thumbnail in the positioning box 205 during the sliding process.

[0159] Furthermore, in one example, when the positioning box 205 is at the left boundary of the thumbnail list (i.e., the first thumbnail in the thumbnail list, such as...), Figure 20 When the thumbnail 206 is positioned in the list, if the user continues to swipe right on the thumbnail list (for example, swiping quickly to the right, and thumbnail 206 has already reached the positioning box 205, but the swipe speed is still greater than 0), the positioning box is already at the left boundary of the thumbnail list, preventing further swiping. After the user stops swiping, the thumbnail list will slide a short distance in the opposite direction (i.e., to the left) before returning to the position where thumbnail 206 is within the positioning box 205, creating a bounce-off effect. Similarly, when the positioning box 205 is positioned at the right boundary of the thumbnail list (i.e., the last thumbnail in the list, such as...), the thumbnail list will continue to swipe right on the thumbnail list. Figure 22 When the user continues to swipe left on the thumbnail list (211), a bounce effect will also be displayed, which will not be described in detail here.

[0160] In another example, in a scenario where a large image area (i.e., area B) displays photos of highlights, to help users easily identify the thumbnail corresponding to the original video and retrieve the original video, a playback control can be added to the thumbnail of the original video. For example, such as... Figure 23As shown, area B currently displays the photo corresponding to thumbnail 207. Area C also includes a playback control 2061 on thumbnail 206, allowing users to intuitively and accurately identify the original video. Furthermore, users can directly click the playback control 2061 to switch area B to an interface that automatically plays the original video. This can either start the video from the beginning or resume playback from where the video was last exited.

[0161] In another exemplary embodiment, when the mobile phone is in landscape mode, the thumbnail of the currently displayed item is displayed using the actual aspect ratio of the photo or video, while the aspect ratio of other thumbnails is displayed using 1:1.

[0162] like Figure 24 As shown, the currently displayed item is the video corresponding to thumbnail 206. The aspect ratio of thumbnail 206 adopts the actual aspect ratio of the original video, such as 16:9. Other thumbnails adopt an aspect ratio of 1:1.

[0163] User swipes left Figure 24 The list of thumbnails shown is as follows: Figure 25 As shown, the entire thumbnail list shifts to the left, and the aspect ratio of the thumbnails within positioning frame 205 is the actual aspect ratio of the corresponding photo. Similarly, if the swipe operation ends and positioning frame 205 is positioned on thumbnail 211, then the aspect ratio of thumbnail 211 adopts the actual aspect ratio of the corresponding photo. For example, if the actual aspect ratio of the photo is 16:9, then... Figure 26 As shown, the aspect ratio of thumbnail 211 is 16:9.

[0164] Furthermore, during the swiping process, the large image area 501 is refreshed in real time to a thumbnail currently located in the positioning frame 205 (e.g., ...). Figure 25 The thumbnail shown is 207 or Figure 26 The photo corresponding to the thumbnail 211.

[0165] In addition, in landscape mode, the interactive controls such as "Share," "Favorite," "Edit," "Delete," "More," and "Details" can be located in the upper right corner of the screen, such as... Figures 24-26 As shown. Of course, these operable controls can also be placed in other locations, and this application does not limit this.

[0166] In landscape mode, the thumbnail list moves in the same way as in portrait mode, so we will not go into details here.

[0167] The above content describes the display effect of the thumbnail list swiping. In addition, users can also swipe on the large image area (i.e., area B) that displays videos or photos. For example, when the phone displays the interface of the highlight photos associated with a video, if the user swipes left on the large image area (i.e., area B), it will switch to displaying the next photo (or video) adjacent to that video in the gallery application.

[0168] The following will combine Figures 27-30 This describes how the display changes when a user swipes across a large image area.

[0169] The following example uses the photo tab in a gallery application to illustrate this. Figure 27 As shown, in the Photos tab, the thumbnail of Video 202 includes an AI tag, indicating that Video 202 is associated with "One Record, Multiple Gains" content. The next object after Video 202 is Photo 305. After the user clicks on Video 202, they will enter... Figure 28 The video playback interface shown. If the user clicks... Figure 28 If you see thumbnail 207, then proceed to... Figure 29 The interface shown, namely the large image area (i.e., area B), displays the photo corresponding to thumbnail 207, and no longer displays the video content of video 202 and the "One-Click Blockbuster" control.

[0170] If the user is Figure 29 Swipe left on area B to enter the following screen: Figure 30 The interface shown is the normal photo display interface, as shown below. Figure 30 As shown, the large image area displays photo 305. Furthermore, compared to... Figure 29 Compared to the interface shown, this interface does not include the area C that displays the thumbnail list corresponding to the "One Record, Multiple Benefits" content.

[0171] If the user is Figure 30 Swipe right on area B as shown to switch the phone to the playback screen of the previous video in photo 305, i.e., switch back to the previous video. Figure 28 The playback interface of video 202 is shown. In some embodiments, switching back to... Figure 28 After viewing the playback interface of video 202, video 202 can be reset to start playing from the beginning. Alternatively, it can maintain the original state from the last time video 202 was exited, such as being in a paused playback state and maintaining the playback progress from the last time video 202 was exited, or continuing playback from the playback progress from the last time video 202 was exited.

[0172] In other embodiments of this application, if video 202 has a previous photo, in this case, if the user is... Figure 29After swiping right in area B, the phone displays the previous photo from video 202. The interface changes are similar to the process of swiping left, as described above, and will not be detailed here.

[0173] also, Figure 29 This explanation uses the example of displaying the highlight photo corresponding to thumbnail 207 in the large image area. It illustrates that when any highlight photo in the thumbnail list is displayed, swiping left (or right) in the large image area will switch to the next photo / video (or the previous photo / video) in video 202. Furthermore, in Figure 28 By swiping left (or right) in the large image area displaying video 202, the phone can switch to the next (or previous) photo from video 202. In other words, swiping left or right in the large image area displaying the original video will have the same switching effect as swiping left or right in the large image area displaying the highlight photos, which will not be elaborated further here.

[0174] The above examples, such as Figure 28 and Figure 29 As shown, the thumbnail list displayed in area C only includes video 202 and thumbnails of the corresponding highlight photos. In another possible implementation, the thumbnails displayed in area C include not only thumbnails of content related to "one record, multiple views," but also thumbnails of other photos or videos in the gallery. The following will combine... Figures 31-33 This section describes the process.

[0175] like Figure 31 As shown, in the gallery application, video 202 is a video containing "one record, multiple views" content, and photo 304 is the previous photo of video 202, and photo 305 is the next photo of video 202.

[0176] If the user clicks Figure 31 Video 202 Figure 32 The interface shown. If the user clicks... Figure 32 After the thumbnail shown in 207, enter Figure 33 The interface shown.

[0177] like Figure 32 and 33 As shown, in addition to displaying thumbnails of the highlight photos associated with video 202, area C can also display thumbnails of other photos / videos in the gallery application. That is, area C can display thumbnails of each photo / video in the gallery application. For example, thumbnail 206 is the thumbnail of video 202, thumbnails 207-209 are the thumbnails of the highlight photos corresponding to video 202, and thumbnail 601 is the thumbnail of the previous photo of video 202 (i.e., photo 304).

[0178] If the user is Figure 33 Swipe left on area B of the interface shown to enter... Figure 34 The interface shown switches to displaying the next photo after video 202, namely photo 305. If the user is... Figure 34 Swipe right on area B to switch to the previous photo / video displayed for photo 305, thus returning to the previous page. Figure 32 The interface shown is for playing video 202.

[0179] In one example, if the currently displayed item is a video associated with "One Record, Multiple Benefits" content or the corresponding "One Record, Multiple Benefits" content, the thumbnail area (i.e., area C) expands to display thumbnails of the video associated with "One Record, Multiple Benefits" content and the corresponding "One Record, Multiple Benefits" content. For example, as... Figure 32 and 33 As shown, area C expands to display thumbnails of video 202 and related highlight photos.

[0180] If the current item displayed is a regular photo or a regular video (e.g.) Figure 34 In the area B (photo 305), only the thumbnail corresponding to the original video (e.g., thumbnail 206) will be displayed in the thumbnail area, and the thumbnails corresponding to the "one-shot-multiple-views" content (e.g., thumbnails 207, 208, or 209) will no longer be displayed. Furthermore, the thumbnail area will display thumbnails for ordinary photos and videos normally. In other words, in this case, the number and order of thumbnails displayed in the thumbnail area below the large image area are the same as the thumbnails in the gallery.

[0181] In this way, when "one record, multiple benefits" content is not displayed, the thumbnails of "one record, multiple benefits" content are prevented from occupying too much display space. This allows more thumbnails that users are likely to view to be displayed within the limited display area, improving the user experience. In addition, it ensures that the thumbnails displayed in area C are in the same order as the thumbnails in the gallery application.

[0182] Furthermore, the user's operations on the thumbnail list of region C and the switching effects of the display interface described in the embodiments of this application are also applicable to... Figures 32-34 The illustrated embodiment, in other words, allows the user to... Figures 32-34 Clicking or swiping left and right on the thumbnail list displayed in the central area C allows you to switch between videos or photos that are to be displayed in area B. The switching effect of the interface is similar to the embodiment where the thumbnail list does not contain other photos or videos from the gallery, and will not be described again here.

[0183] In another example, when playing the original video associated with "one record, multiple gains" content, area B does not display a progress bar, such as... Figure 35As shown, a playback progress bar is displayed in area C.

[0184] like Figure 35 As shown, the playback progress bar includes a pause / play control 701 located at the left boundary of region C, a mute control 702 located at the right boundary of region C, and a playback progress control 703 on the thumbnail of the original video. The mute control 701 can also be referred to as a mute button or volume controller.

[0185] In this scenario, in order to clearly display the video playback progress, such as Figure 35 As shown, the width of the thumbnail corresponding to the original video is greater than the width of other thumbnails. As the video playback progresses, the position of the playback progress control 703 on the thumbnail will move left or right.

[0186] If the user clicks Figure 35 Thumbnail 206 in the middle, enter Figure 36 The interface shown expands and displays a sequence of image frames from the original video in area C. This sequence includes multiple image frames from the original video arranged chronologically from earliest to latest. Figure 36 As shown, thumbnails 801-803 are all image frames from the original video.

[0187] Understandable. Figure 36 Only three image frames from the video image frame sequence are shown. The actual video image frame sequence includes multiple image frames (e.g., a dozen to dozens or even more). As the user swipes left and right through the image frame sequence, more image frames can be displayed in area C. This allows the user to directly and accurately adjust the video playback progress based on the image frames in the video, improving the accuracy of progress adjustment.

[0188] When displaying highlight photos in area B, for example, when the user clicks... Figure 35 Thumbnails of the highlights photos (e.g., thumbnail 207) are available for viewing. Figure 37 In the interface shown, selector 2051 is positioned above thumbnail 207, and area B displays the photo corresponding to thumbnail 207. Area C no longer displays the playback progress bar, nor does it expand to display the image frame sequence of the original video; it only displays thumbnail 206, and also displays playback control 2061 on thumbnail 206. Figure 37 The playback control 2061 in the middle and Figure 23 The display strategy and function of the playback control 2061 in the middle are the same, so they will not be described again here.

[0189] In addition, when users swipe left or right across a large image area (i.e., area B), the display effect for area B is the same as described above. Figures 32-34 The effect is the same; for example, swiping left and right in area B will display the next / previous photo in the gallery application that is adjacent to the original video.

[0190] In one example, when area B displays regular photos or videos from the gallery app (such as...) Figure 34 When the photo 305 is displayed in area B, area C can only display the thumbnail of the original video (such as thumbnail 206), and no longer expand to display the image frame sequence of the original video and the thumbnails of the associated "one record, multiple gains" content (such as thumbnails 207, 208, or 209).

[0191] also, Figure 35 and Figure 36 The playback progress bar shown can also be applied to... Figures 27-30 In the scenario shown, area C only displays thumbnails of the original video and associated "one-record-multiple-access" content, without displaying thumbnails of other photos and videos in the gallery application. In this scenario, the display effect of the playback progress bar is the same as... Figure 35 and Figure 36 The examples shown are similar, so they will not be repeated here.

[0192] Through the above description of the embodiments, those skilled in the art will clearly understand that, for the sake of convenience and brevity, only the division of the above functional modules is used as an example. In practical applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above. The specific working process of the system, device, and unit described above can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0193] In the several embodiments provided in this example, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of modules or units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces, or indirect coupling or communication connection between apparatuses or units, and may be electrical, mechanical, or other forms.

[0194] 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 units can be selected to achieve the purpose of this embodiment according to actual needs.

[0195] Furthermore, in each embodiment of this invention, the functional units can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0196] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this embodiment, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) or processor to execute all or part of the steps of the methods described in the various embodiments. The aforementioned storage medium includes various media capable of storing program code, such as flash memory, portable hard disk, read-only memory, random access memory, magnetic disk, or optical disk.

[0197] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any changes or substitutions within the technical scope disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A method for browsing multimedia content, characterized in that, Applied to electronic devices, the method includes: In response to a user opening the gallery application, a first interface is displayed, the first interface including a first thumbnail of a first video; In response to a user's input of the first thumbnail, a playback interface for the first video is displayed. The playback interface includes a first area and a second area. The second area displays the first video. The first area includes a thumbnail list. The thumbnail list expands to display a third thumbnail of the first video, as well as a thumbnail of at least one highlight photo associated with the first video. The at least one highlight photo includes a first highlight photo. The highlight photo was automatically captured during the recording of the first video, or the highlight photo was captured during the recording of the first video in response to a user's touch operation of the shutter button. In response to the user's action of selecting the second thumbnail corresponding to the first highlight photo in the thumbnail list, the first highlight photo is displayed in the second area, and the first video is no longer displayed; In response to a user's swipe gesture on the second area, the content corresponding to the fourth thumbnail adjacent to the first thumbnail of the first video in the gallery application is displayed in the second area. The fourth thumbnail is not a thumbnail corresponding to a highlight photo associated with the first video. The thumbnail list displays thumbnails of other photos or videos in the gallery application and a third thumbnail of the first video, and hides the thumbnails of highlight photos associated with the first video.

2. The method according to claim 1, characterized in that, When the second area displays the first highlight photo corresponding to the second thumbnail, the third thumbnail of the first video also includes playback controls.

3. The method according to any one of claims 1-2, characterized in that, The first region further includes a selector, and the method further includes: In response to a user's swiping action on the thumbnail list, the thumbnail list moves within the first area, and the thumbnail that remains within the range of the selector is the first thumbnail selected by the user.

4. The method according to claim 3, characterized in that, The movement of the thumbnail list in the first area in response to a user's swiping action on the thumbnail list includes: After detecting a user's swipe operation on the thumbnail list, the swipe parameters of the swipe operation are determined, including the swipe speed and the swipe direction; The thumbnail list is triggered to move in the sliding direction at a speed matching the sliding speed. After detecting a sliding hand release operation, determine the sliding hand release speed; If the swipe speed is 0, the thumbnail list will stop moving. If the sliding speed is greater than 0, the thumbnail list is triggered to continue moving at the sliding speed until the moving speed drops to 0 and stops.

5. The method according to claim 4, characterized in that, The method further includes: After the thumbnail list stops moving, the displacement of the thumbnail list is determined; Obtain the ratio between the displacement and the width of the thumbnail, and round the ratio to the nearest integer to obtain a first value; If the first value is equal to 0, the thumbnail that remains within the range of the selector is determined to be the original thumbnail, which is the thumbnail that was within the range of the selector before the swipe operation was received; If the first value is greater than 0, it is determined that the target direction of the thumbnail in the thumbnail list is located in the original thumbnail, and the thumbnail that is separated from the original thumbnail by the first value is a thumbnail that stays within the range of the selector. The target direction is the direction opposite to the sliding direction of the sliding operation.

6. The method according to claim 4 or 5, characterized in that, The method further includes: In response to a user's right swipe operation, as the thumbnail list moves to the right, if the first thumbnail in the thumbnail list is within the range of the selector, and the swipe speed at which the right swipe operation leaves the hand is greater than 0, the thumbnail list is triggered to move to the left by a first preset displacement and then return to the position where the first thumbnail is within the range of the selector. In response to a user's left swipe, as the thumbnail list moves to the left, if the last thumbnail in the list is within the selector's range and the swipe speed at which the user releases the left hand is greater than 0, the thumbnail list is triggered to move to the right by a second preset displacement and then return to a position where the last thumbnail is within the selector's range.

7. The method according to claim 1, characterized in that, The method further includes: in response to a user's click operation on the thumbnail list, determining that the clicked thumbnail is the first thumbnail selected by the user.

8. The method according to claim 1 or 2, characterized in that, The method further includes: In response to the user's input of a third thumbnail of the first video, the second area displays the first video, and the display status and playback progress of the first video are the same as when the first video was last exited. The display status includes a playback status and a paused playback status.

9. The method according to claim 1, characterized in that, The method further includes: When the content corresponding to the fourth thumbnail is displayed in the second area, in response to the user's swiping operation on the second area, the first video is played in the second area starting from second 0, and the content corresponding to the fourth thumbnail is no longer displayed in the second area.

10. The method according to any one of claims 1-2, characterized in that, The method further includes: When the content of the first video is displayed in the second area, the first area also includes a playback progress bar, which includes a pause control, a mute control, and a playback progress control. The pause / play control is located at the first boundary of the first area, and the mute control is located at the second boundary of the first area; The playback progress control is located on the third thumbnail of the first video, and the width of the third thumbnail is greater than the width of other thumbnails in the thumbnail list.

11. The method according to claim 10, characterized in that, The method further includes: In response to the user's input of the third thumbnail, the thumbnail list expands to display the sequence of image frames from the first video; In response to the user's input to the playback progress control, the second area displays the image frame located by the playback progress control.

12. The method according to claim 11, characterized in that, The method further includes: When the second area displays highlight photos associated with the first video, the thumbnail list displays a third thumbnail of the first video and hides the image frame sequence of the first video.

13. The method according to any one of claims 1-2, characterized in that, The method further includes: In response to the user's swiping action on the second area, a second interface is displayed. The second interface displays the content of the fourth thumbnail adjacent to the first thumbnail of the first video in the gallery application, but does not display the thumbnail list.

14. The method according to any one of claims 1-2, characterized in that, The aspect ratio of each thumbnail in the thumbnail list is 1:1; or, The aspect ratio of the third thumbnail is the actual aspect ratio of the video or photo corresponding to the third thumbnail, and the aspect ratio of the other thumbnails in the thumbnail list is 1:

1.

15. The method according to claim 13, characterized in that, The height of the first thumbnail is greater than the height of the other thumbnails in the thumbnail list.

16. The method according to claim 1, characterized in that, The thumbnail of the first video includes a first identifier that indicates that the first video is associated with at least one highlight photo.

17. The method according to claim 1, characterized in that, The first region is located below the second region, and the area of ​​the second region is larger than the area of ​​the first region.

18. An electronic device, characterized in that, The electronic device includes: one or more processors, a memory, and a touch screen; the memory is used to store program code; the processor is used to run the program code, causing the electronic device to implement the method of browsing multimedia content as described in any one of claims 1 to 17.

19. A computer-readable storage medium, characterized in that, It stores instructions that, when executed on an electronic device, cause the electronic device to perform the method of browsing multimedia content as described in any one of claims 1 to 17.

Images