WO2022183967A1 - 视频画面的显示方法、装置、设备、介质及程序产品 - Google Patents

视频画面的显示方法、装置、设备、介质及程序产品 Download PDF

Info

Publication number
WO2022183967A1
WO2022183967A1 PCT/CN2022/077715 CN2022077715W WO2022183967A1 WO 2022183967 A1 WO2022183967 A1 WO 2022183967A1 CN 2022077715 W CN2022077715 W CN 2022077715W WO 2022183967 A1 WO2022183967 A1 WO 2022183967A1
Authority
WO
WIPO (PCT)
Prior art keywords
video
area
progress
target
scrollable
Prior art date
Application number
PCT/CN2022/077715
Other languages
English (en)
French (fr)
Inventor
罗绮琪
Original Assignee
腾讯科技（深圳）有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 腾讯科技（深圳）有限公司 filed Critical 腾讯科技（深圳）有限公司
Publication of WO2022183967A1 publication Critical patent/WO2022183967A1/zh
Priority to US17/985,786 priority Critical patent/US20230071445A1/en

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/472—End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/431—Generation of visual interfaces for content selection or interaction; Content or additional data rendering
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/472—End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content
    • H04N21/47217—End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content for controlling playback functions for recorded or on-demand content, e.g. using progress bars, mode or play-point indicators or bookmarks

Definitions

  • the embodiments of the present application relate to the field of human-computer interaction, and in particular, to a method, apparatus, device, medium, and program product for displaying video images.
  • the feed is a vertical waterfall-like display where new content appears as the user swipes up and down.
  • the information flow also provides a horizontal sliding function.
  • a mobile terminal displays a user interface, and the user interface includes a longitudinally arranged information stream, and there is at least one video player in the information stream.
  • the information flow is updated according to the vertical direction, and the video player moves vertically along with it.
  • the video player plays the video.
  • the display form of the video by the video player in the information stream is limited to the cover image of the video, and the video content that can be displayed is single.
  • Embodiments of the present application provide a method, apparatus, device, medium and program product for displaying a video picture, which can display video in an information stream in a new form.
  • the technical solution is as follows:
  • a method for displaying a video picture comprising:
  • the video screen of the progress of the target video in the target video is displayed on the video play area following the moving position moved by the video playing area on the scrollable area, and the moving position corresponds to the progress of the target video relation.
  • a device for displaying a video picture comprising:
  • a display module configured to display a scrollable area, the scrollable area is displayed with a video playing area, and the video playing area is used to display the target video;
  • an interaction module configured to receive a drag operation acting on the scrollable area
  • the display module configured to, in response to receiving a drag operation acting on the scrollable area, move the video playback area on the scrollable area along the drag direction of the drag operation;
  • the display module is configured to display the video picture of the progress of the target video in the target video in the video playback area following the moving position of the video playing area on the scrollable area, and the moving position is the same as that of the target video.
  • the target video progress has a corresponding relationship.
  • a computer device in another aspect, includes a processor and a memory, the memory stores at least one instruction, at least a section of a program, a code set or an instruction set, the at least one instruction, the at least one A piece of program, the code set or the instruction set is loaded and executed by the processor to implement the method for displaying a video picture as described above.
  • a computer-readable storage medium stores at least one instruction, at least one piece of program, code set or instruction set, the at least one instruction, the at least one piece of program,
  • the code set or instruction set is loaded and executed by the processor to implement the method for displaying a video picture as described above.
  • an embodiment of the present application provides a computer program product or computer program, where the computer program product or computer program includes computer instructions, and the computer instructions are stored in a computer-readable storage medium.
  • the processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the video picture display method provided in the foregoing optional implementation manner.
  • the video images are displayed correspondingly according to the user's drag operation, so that when the user scrolls the page content, the user can pay attention to the video playback area on the page, and improve the interaction and interest of the video content in the scrolling page.
  • FIG. 1 is a structural block diagram of a computer system provided by an exemplary embodiment of the present application.
  • FIG. 2 is a method flowchart of a method for displaying a video picture provided by another exemplary embodiment of the present application
  • FIG. 3 is a schematic diagram of a user interface of a method for displaying a video picture provided by another exemplary embodiment of the present application.
  • FIG. 4 is a method flowchart of a method for displaying a video picture provided by another exemplary embodiment of the present application.
  • FIG. 5 is a schematic diagram of a user interface of a method for displaying a video picture provided by another exemplary embodiment of the present application.
  • FIG. 6 is a schematic diagram of a user interface of a method for displaying a video picture provided by another exemplary embodiment of the present application.
  • FIG. 7 is a method flowchart of a method for displaying a video picture provided by another exemplary embodiment of the present application.
  • FIG. 8 is a schematic diagram of marking elements of a method for displaying a video picture provided by another exemplary embodiment of the present application.
  • FIG. 9 is a schematic diagram of a video playing area of a method for displaying a video picture provided by another exemplary embodiment of the present application.
  • FIG. 10 is a schematic diagram of a user interface of a method for displaying a video picture provided by another exemplary embodiment of the present application.
  • FIG. 11 is a block diagram of a device for displaying a video picture provided by another exemplary embodiment of the present application.
  • FIG. 12 is a block diagram of a terminal provided by another exemplary embodiment of the present application.
  • UI controls visible or invisible controls or elements on the user interface of an application, such as pictures, input boxes, text boxes, buttons, labels, etc.
  • UI controls when the UI controls are invisible controls, the user can trigger these invisible controls by triggering a designated area on the user interface.
  • Some of these UI controls respond to user actions, such as a progress bar, which is used to change the playback progress of the video.
  • the UI controls involved in the embodiments of the present application include, but are not limited to, progress bars and drag controls.
  • Cloud technology refers to a hosting technology that unifies a series of resources such as hardware, software, and network in a wide area network or a local area network to realize the calculation, storage, processing and sharing of data.
  • Cloud technology is a general term for network technology, information technology, integration technology, management platform technology, and application technology based on cloud computing business models. Cloud computing technology will become an important support. Background services of technical network systems require a lot of computing and storage resources, such as video websites, picture websites and more portal websites. With the high development and application of the Internet industry, in the future, each item may have its own identification mark, which needs to be transmitted to the back-end system for logical processing. Data of different levels will be processed separately, and all kinds of industry data need to be strong. The system backing support can only be achieved through cloud computing.
  • the information including but not limited to user equipment information, user personal information, etc.
  • data including but not limited to data for analysis, stored data, displayed data, etc.
  • signals involved in this application All are authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data need to comply with the relevant laws, regulations and standards of relevant countries and regions.
  • the video playback areas involved in this application are all obtained with full authorization.
  • FIG. 1 shows a schematic diagram of a computer system provided by an embodiment of the present application.
  • the implementation environment of the solution can be implemented as a system with a display function of video images, for example, the system can include: a terminal 120 and a server 140 .
  • the terminal 120 may be an electronic device such as a mobile phone, a tablet computer, a wearable device, a PC (Personal Computer, personal computer).
  • the terminal 120 has an application program that supports video presentation installed and running.
  • the application can be any one of a browser application, a video player, a short video player, a news program, a knowledge program, a life program, an instant messaging program, a shopping program, a picture sharing program, and a community program .
  • the terminal 120 is a terminal used by the user.
  • the user interface displayed by the client has a scrollable area, and a video play area is displayed on the scrollable area.
  • the user performs a drag operation to move the content in the scrollable area while the client follows the video play area.
  • the change of the position on the scrollable area displays the video image corresponding to the video progress.
  • the terminal 120 is connected to the server 140 through a wireless network or a wired network.
  • the server 140 includes at least one of a server, multiple servers, a cloud computing platform and a virtualization center.
  • the server 140 includes a processor and a memory, and the memory further includes an access module and an information flow push module.
  • the server 140 is used to provide background services for applications supporting video presentation.
  • the server 140 undertakes the main computing work, and the terminal 120 undertakes the secondary computing work; or, the server 140 undertakes the secondary computing work, and the terminal 120 undertakes the main computing work; or, a distributed computing architecture is adopted between the server 140 and the terminal 120 perform collaborative computing.
  • the server 140 may be an independent physical server, or a server cluster or a distributed system composed of multiple physical servers, or may provide cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, Cloud servers for basic cloud computing services such as middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms.
  • the terminal may be a smart phone, a tablet computer, a notebook computer, a desktop computer, a smart speaker, a smart watch, etc., but is not limited thereto.
  • the terminal and the server may be directly or indirectly connected through wired or wireless communication, which is not limited in this application.
  • the number of the above-mentioned terminals may be more or less.
  • the above-mentioned terminal may be only one, or the above-mentioned terminal may be dozens or hundreds, or more.
  • the embodiments of the present application do not limit the number of terminals and device types.
  • the method for displaying video images provided by the embodiments of the present application is described, and the execution subject of the method is the client running on the terminal shown in FIG. 1 as an example.
  • the client running on the terminal is the client of the application, and the application may be a browser application.
  • the method for displaying a video picture provided by the present application may also be implemented through a web page, a small program, a quick application, or the like.
  • FIG. 2 shows a flowchart of a method for displaying a video picture provided by an exemplary embodiment of the present application.
  • the method may be executed by a client running on the terminal in the above-mentioned FIG. 1 , where the client is an application program with a video display function.
  • the method includes the following steps.
  • step 201 a scrollable area is displayed, and a video playing area is displayed on the scrollable area, and the video playing area is used for displaying the target video.
  • a scrollable area means that the content in the area can change the display position in response to the user's drag operation.
  • the scrollable area means that the displayed position of the content displayed in the area on the terminal can be changed with the user's drag operation.
  • the scrollable area is displayed in the user interface of the client, and the scrollable area means that the position of the content displayed in the area in the user interface can be changed with the user's drag operation.
  • changing the display position here refers to: on the premise of not changing the content layout in the scrollable area, moving all the content in the scrollable area in one direction as a whole, and the content originally displayed in the scrollable area is moved. , may disappear from the area, and new content will enter the scrollable area.
  • the first content of the scrollable area is displayed at the first position of the user interface at the first moment, and when the scrollable area receives an upward drag operation by the user, the first content moves upward to the second position of the user interface.
  • the scrollable area is an area on the user interface of the client or the page, and the area can update the display position of each content in the area according to the received drag operation.
  • the update of the display position is scrolling. style.
  • the scrollable area may be an area for displaying information flow.
  • the information flow includes a plurality of information flow contents arranged according to the update direction.
  • the content of the information flow in the information flow can move forward according to the update direction, or move backward according to the reverse direction of the update direction.
  • the information stream content includes: at least one of text, picture, video, and audio.
  • the content displayed within the scrollable area includes the video playback area.
  • the scrolling area when used for displaying the information stream, at least one information stream content in the information stream is a video playing area.
  • the video playback area is used to display the target video.
  • the video playback area is an independent video player, or an embedded video player, or a video playback plug-in.
  • the video playback area includes a video display area for displaying the target video, and the video display area is used for displaying a video picture of the target video.
  • the video playing area may further include an area for displaying the video title of the target video, the video publisher, the video publishing time, the avatar of the video publisher, and the nickname of the video publisher.
  • a scrollable area 301 is displayed in the user interface of the client, a video playing area 302 is displayed in the scrollable area, and a video image of the target video is displayed on the video playing area 302 .
  • the content in the scrollable area 301 moves upward as a whole.
  • the video play area 302 moves upward, and the scrollable area 301 displays the In the complete video play area 302, the user continues to slide up, and in (3) in FIG. 3, the video play area 302 continues to move up.
  • Step 202 in response to receiving a drag operation acting on the scrollable area, move the video playback area along the drag direction of the drag operation on the scrollable area.
  • the drag operation acting on the scrollable area may be: a sliding operation received on the scrollable area by the user touching the display screen; an operation received on the scrollable area by the user clicking any position and dragging;
  • the drag operation received on the drag area corresponding to the area for example, the operation of dragging the scroll bar received on the scroll bar corresponding to the scrollable area.
  • the dragging direction of the drag operation is one of the valid operation directions of the scrollable area
  • the valid operation direction refers to the direction in which the scrollable area can be scrolled.
  • the valid operation direction of the scrollable area is up or down
  • the drag direction of the drag operation is one of up or down.
  • the above-mentioned effective operation directions are just examples, and the scrollable area can of course be scrolled in any other direction, for example, leftward, rightward, upward 45°, and the like.
  • the client When the drag operation is a sliding operation on the touch screen, the user's sliding direction may have a certain deviation from the effective operation direction. In this case, the client will select the effective operation that best matches the actual drag direction of the drag operation.
  • the direction is determined as the drag direction for this drag operation. For example, the valid operation direction is up or down, and the actual drag direction of the user's drag operation is 40° obliquely upward. Since the actual drag direction is the closest to the upward direction, the client will drag the drag operation.
  • the direction is determined to be up.
  • the drag operation acting on the scrollable area means: the drag operation is used to manipulate the content in the scrollable area to scroll, and the drag operation may be an operation received on the scrollable area, or may be an operation received on the scrollable area. Actions received outside the scrollable area.
  • the content in the scrollable area includes the video playing area and other information flow content, and the other information flow content includes at least one of text, image, animation, audio, and special effect.
  • the client After receiving the drag operation, the client determines the corresponding drag direction according to the drag operation, and controls the video playback area to move in the drag direction in the scrollable area.
  • the other content when there is other content in the scrollable area except the video playing area, the other content will also move in the drag direction synchronously with the drag operation.
  • Step 203 display the video image of the target video progress in the target video on the video playing area following the moving position of the video playing area on the scrollable area, and the moving position has a corresponding relationship with the target video progress.
  • the video playback area moves within the scrollable area, and the position of the video playback area changes. According to the moving position where the video playing area is located, the video playing area is made to display a video picture corresponding to the progress of the video.
  • the moving position has a corresponding relationship with the video progress of the target video.
  • the moving position has a corresponding relationship with the progress bar of the target video. That is, each moving position corresponds to a video progress, and multiple video progresses corresponding to multiple moving positions passed by the video play area constitute the target video progress, and the client follows the movement of the video play area in the scrollable area correspondingly in A video screen showing the progress of the target video on the video playback area.
  • the video screen displayed on the video playing area can be bound to the user's scrolling page operation.
  • the corresponding video screen is displayed at the moving position of the video player, so that the video screen displayed in the video playback area is directly related to the drag direction of the user's drag operation, the time and speed of each drag position, and the change of the drag direction,
  • the speed of dragging (the speed of moving the video play area) will affect the video picture displayed on the video play area.
  • the first moving position corresponds to the first video picture
  • the second moving position corresponds to the second video picture
  • the third moving position corresponds to the third video picture
  • the video playback area passes through the first moving position in sequence according to the drag operation , the second moving position, and the third moving position
  • the first video screen, the second video screen and the third video screen will be displayed in sequence on the video playback area, that is, the video screen of the target video is played forward, and the video playback area stays
  • the duration of staying at the first moving position, the second moving position, and the third moving position also affects the duration of each video screen displayed on the video playback area.
  • the third video picture, the second video picture and the first video picture will be displayed on the video playing area in sequence. , that is, to realize the reverse playback of the video picture of the target video.
  • the video playing area 302 moves up accordingly,
  • the video picture displayed in the video playing area 302 also changes with the change of the moving position through which the video playing area moves upward.
  • the position of the video playback area on the scrollable area may be determined by using any point on the video playback area as a reference point, for example, the center point of the video playback area may be used as the reference point, and the center point of the video playback area
  • the position on the scrolling area is determined as the current moving position of the video playing area.
  • the first pixel (pixel point in the first row/pixel point in the first column) that appears on the scrollable area of the video playback area can be used as a reference point, and the position of the first pixel point on the scrollable area can be used as a reference point. Determined as the current moving position of the video playback area.
  • the playback start condition is that the time for stopping the drag operation reaches a preset threshold, for example, when the user stops dragging the scrollable area for 5 seconds, the ith video frame starts to be played.
  • the condition for starting playback is that a start playback operation is received, for example, the user directly clicks on the ith video picture to start playing the ith video picture.
  • the starting point of the drag operation is outside the video playback area.
  • the drag track of the drag operation does not intersect the video player.
  • the drag track of the drag operation and the progress bar of the video playback area are independent of each other.
  • the drag operation on the scrollable area will not affect the progress bar of the video player. That is, the drag operation is independent of the trigger operation on the progress bar.
  • the displayed content of the video playback area will also change, so that the user can browse the content of the scrollable area and the content of the video playback area at the same time, which can improve the efficiency of information acquisition.
  • the video images are displayed correspondingly according to the user's drag operation, so that when the user scrolls the page content, the user can pay attention to the video playback area on the page, and improve the interaction and interest of the video content in the scrolling page.
  • the method for displaying a video picture provided by this application has two stages: a first stage and a second stage.
  • the video picture displayed in the video playing area changes with the position of the video playing area.
  • the video playback area will automatically play the target video.
  • both the first stage and the second stage are executed with triggering conditions.
  • the triggering conditions of the first stage are first introduced here, and the triggering conditions of the second stage will be introduced in the following embodiments for introducing the second stage.
  • the trigger condition of the first stage is that when the video playing area is displayed on the scrollable area, the first stage is triggered, and the video picture displayed in the video playing area will change according to the position of the video playing area. That is, in response to the video playing area being displayed on the scrollable area, a video picture of the progress of the target video in the target video is displayed on the video playing area following the moving position of the video playing area on the scrollable area.
  • the moment when the video playback area is displayed on the scrollable area can be: the first pixel or the first row of pixels or the first column of pixels of the video playback area is displayed on the scrollable area, that is, in response to the first pixel of the video playback area
  • the pixels or the first row of pixels or the first column of pixels are displayed on the scrollable area, and the video screen of the progress of the target video in the target video is displayed on the video play area following the moving position of the video play area on the scrollable area.
  • the first pixel of the video playback area is not necessarily the first pixel of the video screen.
  • the video play area 302 further includes an area above the video screen 303 for displaying relevant information of the target video.
  • the scrollable area 301 is an area that is scrolled up and updated
  • the first area of the video play area 302 A pixel is the border of the video playback area, not the video frame.
  • the moment when the video playback area is displayed on the scrollable area can also be: the first pixel or the first row of pixels or the first column of pixels of the video picture in the video playback area is displayed on the scrollable area, that is, in response to the video
  • the first pixel or the first row of pixels or the first column of pixels of the video image (video image display area) in the playback area is displayed on the scrollable area, and the video is played following the moving position of the video playback area on the scrollable area.
  • the moment when the video playback area is displayed on the scrollable area may also be: the last pixel in the video playback area is displayed on the scrollable area, or the last pixel of the video screen (video screen display area) in the video playback area is displayed on the scrollable area.
  • the target in the video is displayed on the video playback area following the moving position of the video playback area over the scrollable area.
  • Video footage of video progress.
  • the display of the last pixel or the last row of pixels or the last column of pixels on the scrollable area is: all pixels of the video playback area have been displayed in the scrollable area, or, the video picture has been displayed in the scrollable area. of all pixels.
  • the user has seen the complete video playback area or video screen. If the user has not been interested in the video content, the display method of the video screen provided by this application will be triggered at this time, so that the video displayed in the video playback area will be triggered.
  • the screen changes with the drag operation, thereby attracting the user's attention to the target video.
  • the moment when the pixels at other positions on the video playback area are displayed on the scrollable area can also be used as the determination basis.
  • the midpoint of the video playback area is used as the determination basis. , which is not limited in this embodiment.
  • FIG. 4 shows a flowchart of a method for displaying a video picture provided by an exemplary embodiment of the present application.
  • the method can be executed by a client running on the terminal in the above-mentioned FIG. 1 .
  • step 203 includes step 2031 and step 2032 .
  • Step 2031 in response to the video playing area moving to the ith moving position, determine the progress of the ith video according to the ith moving position, where i is a positive integer not greater than n.
  • the moving path of the video playback area on the scrollable area includes n moving positions, each of the n moving positions corresponds to a video progress, and the target video progress includes n video progresses corresponding to the n moving positions, and n is positive integer.
  • the movable position in the scrollable area corresponds to the video progress
  • the movable position that the video playback area passes through on the scrollable area is the moving position. Therefore, the client can relationship to determine the video progress corresponding to the moving position.
  • the movable position includes all position points within the scrollable area.
  • the movable position includes a position point within the scrollable area to which the video playing area can be moved.
  • the movable position includes partial position points in the scrollable area to which the video playing area can be moved. That is, a movable position is a position point located in all or part of the scrollable area.
  • all the movable positions may correspond to video progress, or may partially correspond to video progress. That is, all the position points in the scrollable area correspond to the video progress, or, some position points in the scrollable area correspond to the video progress.
  • the video progress refers to the time progress of the video, that is, the point in time.
  • the formulation of the corresponding relationship between the movable position and the video progress can be arbitrary.
  • the first part of the position point (pixel point) in the movable position can be arbitrarily selected to correspond to the first video progress
  • the second part of the position point (pixel point) can be arbitrarily selected to correspond to the second video progress, so , to determine the correspondence between the movable position and the video progress.
  • the video progress corresponding to all movable positions may be part of the video progress of the target video, or the entire video progress.
  • all movable positions only correspond to part of the video progress of the target video, no matter where the video playback area moves to, only the video screen corresponding to the part of the video progress will be displayed in the first stage.
  • the corresponding relationship between the movable position and the video progress may be determined according to the scrolling direction of the scrollable area.
  • the scrolling direction of the scrollable area is vertical or horizontal as an example for illustration.
  • the scrollable area is a vertical scrolling area; the ordinate of the movable position in the scrollable area has a corresponding relationship with the video progress of the target video. Then the client obtains the i-th ordinate corresponding to the i-th moving position, where i is a positive integer not greater than n, and n is a positive integer; and obtains the i-th video progress corresponding to the i-th ordinate.
  • the scrollable area is an area that scrolls up or down
  • the video play area moves up or down
  • the ordinate of the position of the video play area changes but the abscissa does not change. Therefore, the movable area in the scrollable area can be moved
  • the vertical coordinate of the position is bound to the video progress, and the corresponding video progress is determined according to the vertical coordinate of the movable position (moving position) to which the video playback area moves.
  • the scrollable area is a horizontal scrolling area; the abscissa of the movable position in the scrollable area has a corresponding relationship with the video progress of the target video. Then the client obtains the i-th abscissa corresponding to the i-th moving position, i is a positive integer not greater than n, and n is a positive integer; and obtains the i-th video progress corresponding to the i-th abscissa.
  • the scrollable area is a scrollable area to the left or right
  • the video playback area moves to the left or right
  • the abscissa of the position of the video playback area changes but the ordinate remains unchanged. Therefore, you can place the scrollable area in the
  • the abscissa of the movable position is bound with the video progress, and the corresponding video progress is determined according to the abscissa of the movable position (moving position) to which the video playback area moves.
  • the scrollable area is a vertical scroll area
  • the update direction is an upward sliding update as an example for description.
  • the video playback area moves upward from the bottom of the scrollable area. Therefore, the ordinate of the movable position in the scrollable area can be associated with the video progress. For example, as shown in FIG. 5 , the position of the first row of pixels in the video playback area is used as a reference for determining the moving position of the video playback area.
  • the pixels in the 0th row (the movable position of the first row) at the bottom of the scrollable area correspond to the video progress of aa:bb
  • aa:bb video progress can be 00:00 or any video progress in the target video
  • xx:yy video progress can be the end video progress of the target video, or the target video Any video progress in , exemplarily, the xx:yy video progress follows the aa:bb video progress.
  • Each row of pixels between the 0th row of pixels to the hth row of pixels corresponds to the video progress from aa:bb to xx:yy in turn. It is equivalent to placing the progress bar of the target video vertically.
  • the video playback area moves up from the pixel in the 0th row to the pixel in the hth row, the video screen of the target video progressing from the aa:bb video to the xx:yy video progress is played on the video playback area in sequence, so as to realize the video screen of the target video.
  • the video progress that can be displayed in the video playing area in the first stage can be set.
  • it is set to 00:00 video progress to xx:yy video progress (the termination video progress of the target video)
  • the user in the first stage, the user can repeatedly scroll by dragging the scrollable area to repeatedly watch all the target video. video screen.
  • the video images from the video progress of x1:y1 to the video progress of x2:y2 are sequentially displayed on the video playing area 302 .
  • the example shown in FIG. 5 is only an example, and the pixels from the 0th row to the hth row of pixels in FIG. 5 can be replaced by the pixels from the h1th row to the h2th row of pixels from the bottom of the scrollable area 301 , and h2 is greater than h1, that is, Realize that the pixel point in the middle part of the scrollable area 301 is set to its vertical coordinate corresponding to the video progress. If the height of the video playback area is set to h1, it can be realized that when the complete video playback area is displayed on the scrollable area, the trigger is triggered. In the first stage, if the video playing area continues to move upward, the video playing area will display the corresponding video picture according to the video progress corresponding to the moving position.
  • the scrollable area is a horizontal scrolling area
  • Step 2032 Display the ith video picture of the ith video progress in the target video on the video playing area.
  • the client displays the video picture according to the track position where the video playback area is located, that is, displays the ith video picture at the ith track position, and the ith track position corresponds to the ith track.
  • the video progress corresponds to the ith video frame.
  • the user can change the video image displayed on the video playing area by changing the position of the video playing area through a drag operation in the first stage.
  • the video playing area does not play the target video, that is, does not play the sound of the target video, and only displays the picture according to the moving position.
  • the display duration of each video screen is equal to the duration of the video playback area staying at that position.
  • the user can quickly slide the position of the video playback area to achieve the effect of quickly playing the video screen of the target video.
  • the display order (forward or reverse) of the video screen is positively related to the direction of the moving path of the video playback area. If the user's drag operation stops and the video playing area stops at a certain position in the scrollable area, a still video image corresponding to the position is displayed on the video playing area.
  • the video screen corresponding to the video progress is displayed according to the position of the video playing area while moving the position of the video playing area, so that the user can browse the information flow by using different sliding
  • the video picture of the target video is displayed on the video playback area with different playback speeds and playback sequences. Increase the user's interaction with the video playback area when sliding the information flow, attract users' attention to the video playback area in the information flow, and improve the interest of the video display in the information flow.
  • the scrollable area when the scrollable area is a vertical scrolling area, the vertical coordinate of the movable position in the scrollable area is bound to the video progress, and the corresponding vertical coordinate of the moving position of the video playing area is obtained. video progress.
  • the scrollable area is a horizontal scrolling area
  • the abscissa of the movable position in the scrollable area is bound to the video progress, and the corresponding video progress is obtained through the abscissa of the movement position of the video playback area.
  • the embodiment of the present application provides a presentation method for the second stage, that is, when the trigger condition of the second stage is satisfied, the video playback area is automatically enabled. Play the target video.
  • FIG. 7 shows a flowchart of a method for displaying a video picture provided by an exemplary embodiment of the present application.
  • the method can be executed by a client running on the terminal in the above-mentioned FIG. 1 .
  • step 204 and step 205 are further included after step 203 .
  • Step 204 in response to the end of the drag operation, display on the scrollable area that the video playback area is located at the nth moving position, the nth video picture of the target video is displayed on the video playback area, and the nth video picture is the nth The video picture of the nth video progress corresponding to the moving position.
  • the moving path that the video playing area moves on the scrollable area according to the drag operation includes n moving positions, where n is a positive integer.
  • one drag operation can move the video playing area by one movement path. At the end of a drag operation, the video playback area stops at a moving position.
  • the trigger determination of the second stage it can be determined whether the current state satisfies the trigger condition at the end of each drag operation; or it can be determined whether the real-time state satisfies the trigger condition while the drag operation is in progress.
  • the target video is automatically played.
  • the client in response to the end of a drag operation, obtains the corresponding n-th video progress according to the n-th moving position of the current video playback area, and determines whether the n-th video progress is greater than or equal to a threshold progress , if the progress of the nth video is greater than or equal to the threshold progress, the second stage is triggered, and the target video is automatically played from the nth video picture corresponding to the nth moving position.
  • the client detects in real time whether the video progress corresponding to the video image currently displayed in the video playback area is greater than or equal to the threshold progress, and if the progress is greater than or equal to the threshold, the second stage is triggered regardless of whether the current drag operation ends. , the target video will be played automatically from the video screen corresponding to the current video progress.
  • Step 205 in response to satisfying the auto-play condition, start to auto-play the target video from the n-th video frame.
  • the client determines whether the trigger condition (auto-play condition) of the second stage is met. If so, the target video is automatically played; if not, the first-stage method is still used to play the target video. 's display.
  • This embodiment provides two conditions for automatic playback: one is to set a threshold progress, and the other is to use the position of the marked element on the video playback area to determine.
  • the client in response to the progress of the n-th video corresponding to the n-th moving position reaching the threshold progress, the client automatically plays the target video from the n-th video frame.
  • the threshold progress is a video progress preset for the target video, which is used to determine whether to trigger automatic playback. Threshold progress can be set to any video progress in the target video. For example, if the target video is a two-minute video, the threshold progress can be set to a one-minute video progress. Exemplarily, the threshold progress can also be set according to the video highlight clip of the target video, and the moment when the video highlight clip starts is set as the threshold value progress, so that the video playing area starts to automatically play from the video highlight clip.
  • a marker element is also displayed on the video playback area.
  • a marker element is an independent element displayed on the upper layer of the video screen.
  • the client displays on the video play area that the marker element moves along the fixed track following the drag operation, that is, the marker element moves on the video play area according to the preset fixed track.
  • the video screen 305 of the target video is displayed on the screen display area of the video playing area 302 , and the mark element 306 is displayed on the upper layer of the video screen 305 .
  • the marker element moves with a fixed trajectory.
  • the marker element moves from the initial position to the target position along a fixed trajectory.
  • the movement of the marker element is not synchronized with the playback of the video image, and the movement speed and movement path of the marker element have nothing to do with the position of the video play area and the video image displayed in the video play area. That is, in the first stage, the playback speed of the video image will change with the movement speed of the video playback area, but the movement speed of the marker element will not change accordingly.
  • the moving direction of the marker element will change with the dragging direction of the drag operation, that is, the moving direction of the marker element will change with the moving direction of the video playing area.
  • the marker element In response to the dragging direction being the first direction, the marker element is displayed on the video playback area to move forward along the fixed track to the target position, the first direction is the update direction of the scrollable area, and the target position is the end point of the fixed track.
  • the dragging direction being the second direction
  • the marker element is displayed on the video playback area to move in the opposite direction along the fixed track to the initial position, the second direction is the opposite direction of the update direction of the scrollable area, and the initial position is the starting point of the fixed track.
  • the marker element In response to not receiving a drag operation, the marker element is displayed stationary on the video playback area.
  • the marker element moves forward along the fixed track
  • the marker element moves in the opposite direction of the update direction
  • the marker element moves in the reverse direction along the fixed track
  • the marker element is stationary.
  • the movement trajectory of the marker element is a polyline consisting of the initial position (initial coordinate), the target position (end coordinate) and the intermediate position (intermediate coordinate). Move along the line from the first intermediate coordinate to the second intermediate coordinate until moving from the last intermediate coordinate to the end coordinate.
  • the intermediate position may not be set, but only the initial position and the target position may be set, and the fixed trajectory is a straight line from the initial position to the target position.
  • the marker element moves positively along the fixed trajectory from the initial position 307 through the intermediate position to the target position 308 .
  • the dragging direction of the drag operation is the reverse direction of the update direction of the scrollable area, the marker element moves reversely from the current position to the initial position 307 along the fixed trajectory.
  • the client In response to the marker element moving to the target position, the client automatically plays the target video from the nth video frame, and the fixed track includes the target position.
  • the client automatically starts to play the video from the nth video screen displayed on the video play area when the drag operation ends.
  • the marker element stops at the target position.
  • the first stage is stopped and the second stage is triggered, and the client starts from the video screen corresponding to the current moving position of the video playback area. Autoplay video.
  • FIG. 10 shows a schematic diagram of a user interface for displaying the first stage and the second stage of the video by using the display method of the video picture provided by the present application.
  • the information flow displayed in the information flow display area 401 of the user interface includes a video playback area 302, and the update direction of the information flow is upward Swipe, the user can swipe up or down to move the display position of the information flow content in the information flow, so that the new information flow content is displayed in the user interface.
  • the first stage is triggered, and the client follows the video playback area 302 to move the moving position on the information flow display area 401 during the video playback
  • the video picture of the target video progress is displayed on the area, and at the same time, the marker element 306 on the video picture moves to the target position along a fixed track.
  • the second stage is triggered, as shown in (5) and (6) in FIG. 10 , the video playback area 302 Autoplay the target video.
  • the target video is automatically played in the video playback area when the auto-play condition is satisfied.
  • the auto-play condition can be set according to the progress of the video, or a marker element can be added to the video playback area. , set auto-play conditions based on the position of the marker element, thereby increasing the interactivity between video presentation and user actions.
  • FIG. 11 is a block diagram of an apparatus for displaying a video picture provided by an exemplary embodiment of the present application.
  • the device includes:
  • a display module 1101 configured to display a scrollable area, where a video playing area is displayed on the scrollable area, and the video playing area is used to display a target video;
  • An interaction module 1102 configured to receive a drag operation acting on the scrollable area
  • the display module 1101 is configured to, in response to receiving a drag operation acting on the scrollable area, move the video playback area on the scrollable area along the drag direction of the drag operation;
  • the display module 1101 is configured to display the video screen of the progress of the target video in the target video on the video playing area following the moving position of the video playing area on the scrollable area, and the moving position There is a corresponding relationship with the target video progress.
  • the scrolling area is used to display the information stream, and at least one information stream content in the information stream is a video playing area.
  • the information flow includes a plurality of information flow contents arranged according to the update direction.
  • the content of the information flow in the information flow moves forward according to the update direction, or moves backward according to the reverse direction of the update direction.
  • the moving path of the video playing area includes n moving positions moved on the scrollable area, and each moving position in the n moving positions corresponds to a video progress,
  • the target video progress includes n video progresses corresponding to the n moving positions, where n is a positive integer; the device further includes:
  • Determining module 1103 for moving to the i-th moving position in response to the video playback area, and determining the i-th video progress according to the i-th moving position, where i is a positive integer not greater than n;
  • the display module 1101 is configured to display the i-th video picture of the i-th video progress in the target video on the video playing area.
  • the scrollable area is a vertically scrollable area; the ordinate of the movable position in the scrollable area has a corresponding relationship with the video progress of the target video;
  • the determining module 1103 is configured to obtain the i-th ordinate corresponding to the i-th moving position, where i is a positive integer not greater than n, and n is a positive integer;
  • the determining module 1103 is configured to acquire the i-th video progress corresponding to the i-th ordinate.
  • the scrollable area is a horizontal scrolling area; the abscissa of the movable position in the scrollable area has a corresponding relationship with the video progress of the target video;
  • the determining module 1103 is used to obtain the i-th abscissa corresponding to the i-th moving position, where i is a positive integer not greater than n, and n is a positive integer;
  • the determining module 1103 is configured to acquire the i-th video progress corresponding to the i-th abscissa.
  • the display module 1101 is configured to start playing the target video from the i-th video picture of the i-th video progress in response to satisfying the start playing condition; or, in response to The target video is replayed when the start playing condition is satisfied.
  • the starting point of the drag operation is outside the video playback area; or, the drag track of the drag operation does not intersect with the video player; or, the drag The drag track of the motion operation and the progress bar of the video playing area are independent of each other.
  • the moving path that the video playing area has moved on the scrollable area according to the dragging operation includes n moving positions, where n is a positive integer;
  • the display module 1101 is configured to, in response to the end of the drag operation, display on the scrollable area that the video playback area is located at the nth moving position, and the video playback area displays the target video's content.
  • the nth video picture, the nth video picture is the video picture of the nth video progress corresponding to the nth moving position;
  • the display module 1101 is configured to automatically play the target video from the nth video frame in response to satisfying the auto-play condition.
  • the target video corresponds to a threshold progress
  • the display module 1101 is configured to automatically play the target video from the nth video frame in response to the progress of the nth video corresponding to the nth moving position reaching the threshold progress.
  • a marker element is displayed on the video playing area
  • the display module 1101 is configured to display on the video playback area that the marker element moves along a fixed track following the drag operation;
  • the display module 1101 is configured to automatically play the target video from the nth video frame in response to the marker element moving to a target position, and the fixed track includes the target position.
  • the movement of the marker element is not synchronized with the playback of the video picture, and the movement speed and movement path of the marker element have nothing to do with the position of the video playback area and the video picture displayed in the video playback area.
  • the display module 1101 is configured to, in response to the dragging direction being the first direction, display the marker element on the video playing area toward the The target position moves forward, the first direction is the update direction of the scrollable area, and the target position is the end point of the fixed track.
  • the display module 1101 is configured to, in response to the dragging direction being the second direction, display the mark element on the video playback area in a reversed initial position along the fixed track Reverse movement, the second direction is the opposite direction of the update direction of the scrollable area, and the initial position is the starting point of the fixed track.
  • the display module 1101 is configured to display on the scrollable area in response to the first pixel of the video playing area, follow the video playing area on the scrollable area The moved position on the area displays the video picture of the progress of the target video in the target video on the video playing area.
  • the device for displaying video images provided by the above embodiments is only illustrated by the division of the above functional modules. In practical applications, the above functions can be allocated to different functional modules according to needs. The internal structure is divided into different functional modules to complete all or part of the functions described above.
  • the video picture display device provided in the above-mentioned embodiments and the video picture display method embodiments belong to the same concept, and the specific implementation process thereof is detailed in the method embodiments, which will not be repeated here.
  • the present application further provides a terminal, the terminal includes a processor and a memory, the memory stores at least one instruction, and the at least one instruction is loaded and executed by the processor to implement the method for displaying video images provided by the above method embodiments.
  • the terminal may be the terminal provided in FIG. 12 below.
  • FIG. 12 is a structural block diagram of a terminal 1200 provided by an exemplary embodiment of the present application.
  • the terminal 1200 may be: a smart phone, a tablet computer, an MP3 player (Moving Picture Experts Group Audio Layer III, the standard audio level 3 of moving picture expert compression), MP4 (Moving Picture Experts Group Audio Layer IV, moving picture expert compression standard audio Level 4) Player, laptop or desktop computer.
  • Terminal 1200 may also be called user equipment, portable terminal, laptop terminal, desktop terminal, and the like by other names.
  • the terminal 1200 includes: a processor 1201 and a memory 1202 .
  • the processor 1201 may include one or more processing cores, such as a 4-core processor, an 8-core processor, and the like.
  • the processor 1201 can use at least one hardware form among DSP (Digital Signal Processing, digital signal processing), FPGA (Field-Programmable Gate Array, field programmable gate array), PLA (Programmable Logic Array, programmable logic array) accomplish.
  • the processor 1201 may also include a main processor and a co-processor.
  • the main processor is a processor used to process data in a wake-up state, also called a CPU; a co-processor is used to process data in a standby state.
  • the processor 1201 may be integrated with a GPU (Graphics Processing Unit, image processor), and the GPU is used for rendering and drawing the content that needs to be displayed on the display screen.
  • the processor 1201 may further include an AI (Artificial Intelligence, artificial intelligence) processor, where the AI processor is used to process computing operations related to machine learning.
  • AI Artificial Intelligence, artificial intelligence
  • Memory 1202 may include one or more computer-readable storage media, which may be non-transitory. Memory 1202 may also include high-speed random access memory, as well as non-volatile memory, such as one or more disk storage devices, flash storage devices. In some embodiments, the non-transitory computer-readable storage medium in the memory 1202 is used to store at least one instruction, and the at least one instruction is used to be executed by the processor 1201 to realize the video picture provided by the method embodiments in this application. display method.
  • the terminal 1200 may optionally further include: a peripheral device interface 1203 and at least one peripheral device.
  • the processor 1201, the memory 1202 and the peripheral device interface 1203 can be connected through a bus or a signal line.
  • Each peripheral device can be connected to the peripheral device interface 1203 through a bus, a signal line or a circuit board.
  • the peripheral device includes: at least one of a radio frequency circuit 1204 , a display screen 1205 , a camera assembly 1206 , an audio circuit 1207 and a power supply 1208 .
  • the peripheral device interface 1203 may be used to connect at least one peripheral device related to I/O (Input/Output) to the processor 1201 and the memory 1202 .
  • the radio frequency circuit 1204 is used for receiving and transmitting RF (Radio Frequency, radio frequency) signals, also called electromagnetic signals.
  • the radio frequency circuit 1204 communicates with communication networks and other communication devices via electromagnetic signals.
  • the display screen 1205 is used for displaying UI (User Interface, user interface).
  • UI User Interface, user interface
  • the camera assembly 1206 is used to capture images or video.
  • Audio circuitry 1207 may include a microphone and speakers.
  • Power supply 1208 is used to power various components in terminal 1200 .
  • terminal 1200 also includes one or more sensors 1209 .
  • the one or more sensors 1209 include, but are not limited to, an acceleration sensor 1210 , a gyro sensor 1211 , a pressure sensor 1212 , an optical sensor 1213 , and a proximity sensor 1214 .
  • FIG. 12 does not constitute a limitation on the terminal 1200, and may include more or less components than the one shown, or combine some components, or adopt different component arrangements.
  • the memory further includes one or more programs, the one or more programs are stored in the memory, and the one or more programs include a method for displaying the video picture provided by the embodiment of the present application.
  • the present application provides a computer-readable storage medium, where at least one instruction is stored in the storage medium, and the at least one instruction is loaded and executed by the processor to implement the method for displaying video images provided by the foregoing method embodiments .
  • the application also provides a computer program product or computer program, the computer program product or computer program comprising computer instructions stored in a computer-readable storage medium.
  • the processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the video picture display method provided in the foregoing optional implementation manner.

Abstract

一种视频画面的显示方法、装置、设备及介质，涉及人机交互领域。该方法包括：显示可滚动区域，所述可滚动区域上显示有视频播放区域，所述视频播放区域用于展示目标视频(201)；响应于接收到作用于所述可滚动区域的拖动操作，在所述可滚动区域上沿所述拖动操作的拖动方向移动所述视频播放区域(202)；跟随所述视频播放区域在所述可滚动区域上移动过的移动位置在所述视频播放区域上显示所述目标视频中目标视频进度的视频画面，所述移动位置与所述目标视频进度存在对应关系(203)。

Description

视频画面的显示方法、装置、设备、介质及程序产品
本申请要求于2021年03月01日提交的申请号为202110227788.X、发明名称为“视频画面的显示方法、装置、设备及介质”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请实施例涉及人机交互领域，特别涉及一种视频画面的显示方法、装置、设备、介质及程序产品。
背景技术
信息流是像瀑布一样纵向排列并且随着用户上下滑动操作不断出现新内容的显示方式。信息流除了纵向滑动功能，还提供了横向滑动功能。
相关技术中，移动终端显示用户界面，该用户界面上包括纵向排列的信息流，信息流中存在至少一个视频播放器。当用户在用户界面上进行纵向滑动时，信息流按照纵向方向进行更新，视频播放器随之纵向移动，当用户触发视频播放器上的播放控件时，视频播放器播放视频。
相关技术中的方法，在用户未对视频播放器进行触发操作前，信息流中视频播放器对视频的展现形式局限于视频的封面图片，所能够展现的视频内容单一。
发明内容
本申请实施例提供了一种视频画面的显示方法、装置、设备、介质及程序产品，可以以新的形式展现信息流中的视频。所述技术方案如下：
一方面，提供了一种视频画面的显示方法，所述方法包括：
显示可滚动区域，所述可滚动区域上显示有视频播放区域，所述视频播放区域用于展示目标视频；
响应于接收到作用于所述可滚动区域的拖动操作，在所述可滚动区域上沿所述拖动操作的拖动方向移动所述视频播放区域；
跟随所述视频播放区域在所述可滚动区域上移动过的移动位置在所述视频播放区域上显示所述目标视频中目标视频进度的视频画面，所述移动位置与所述目标视频进度存在对应关系。
另一方面，提供了一种视频画面的显示装置，所述装置包括：
显示模块，用于显示可滚动区域，所述可滚动区域上显示有视频播放区域，所述视频播放区域用于展示目标视频；
交互模块，用于接收作用于所述可滚动区域的拖动操作；
所述显示模块，用于响应于接收到作用于所述可滚动区域的拖动操作，在所述可滚动区域上沿所述拖动操作的拖动方向移动所述视频播放区域；
所述显示模块，用于跟随所述视频播放区域在所述可滚动区域上移动过的移动位置在所述视频播放区域上显示所述目标视频中目标视频进度的视频画面，所述移动位置与所述目标视频进度存在对应关系。
另一方面，提供了一种计算机设备，所述计算机设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如上方面所述的视频画面的显示方法。
另一方面，提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一 条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如上方面所述的视频画面的显示方法。
另一方面，本申请实施例提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述可选实现方式中提供的视频画面的显示方法。
本申请实施例提供的技术方案带来的有益效果至少包括：
通过在接收到用户拖动页面的拖动操作时，在根据拖动操作滚动页面中的视频播放区域的同时，根据视频播放区域在页面上滚动过的位置所指示的视频进度，在视频播放区域上显示对应的视频画面。从而实现将用户滚动更新页面内容的操作，与视频播放区域所显示的画面相关联，根据用户的拖动操作来显示视频画面，用户滚动视频播放区域至页面的不同位置会使视频播放区域上显示不同视频进度的视频画面，视频画面跟随用户的拖动操作进行对应显示，进而在用户滚动页面内容时，使用户关注页面中的视频播放区域，提高滚动页面中视频内容的互动感和趣味性。
附图说明
图1是本申请一个示例性实施例提供的计算机系统的结构框图；
图2是本申请另一个示例性实施例提供的视频画面的显示方法的方法流程图；
图3是本申请另一个示例性实施例提供的视频画面的显示方法的用户界面示意图；
图4是本申请另一个示例性实施例提供的视频画面的显示方法的方法流程图；
图5是本申请另一个示例性实施例提供的视频画面的显示方法的用户界面示意图；
图6是本申请另一个示例性实施例提供的视频画面的显示方法的用户界面示意图；
图7是本申请另一个示例性实施例提供的视频画面的显示方法的方法流程图；
图8是本申请另一个示例性实施例提供的视频画面的显示方法的标记元素的示意图；
图9是本申请另一个示例性实施例提供的视频画面的显示方法的视频播放区域的示意图；
图10是本申请另一个示例性实施例提供的视频画面的显示方法的用户界面示意图；
图11是本申请另一个示例性实施例提供的视频画面的显示装置的装置框图；
图12是本申请另一个示例性实施例提供的终端的框图。
具体实施方式
首先，对本申请实施例中涉及的名词进行简单介绍：
用户界面(User Interface，UI)控件，在应用程序的用户界面上可见或不可见的控件或元素，比如，图片、输入框、文本框、按钮、标签等。示例性的，当UI控件是不可见的控件时，用户可以通过触发用户界面上的指定区域，来触发这些不可见的控件。其中一些UI控件响应用户的操作，比如，进度条，用于改变视频的播放进度。本申请实施例中涉及的UI控件，包括但不限于：进度条、拖动控件。
云技术(Cloud technology)是指在广域网或局域网内将硬件、软件、网络等系列资源统一起来，实现数据的计算、储存、处理和共享的一种托管技术。
云技术(Cloud technology)基于云计算商业模式应用的网络技术、信息技术、整合技术、管理平台技术、应用技术等的总称，可以组成资源池，按需所用，灵活便利。云计算技术将变成重要支撑。技术网络系统的后台服务需要大量的计算、存储资源，如视频网站、图片类网站和更多的门户网站。伴随着互联网行业的高度发展和应用，将来每个物品都有可能存在自己的识别标志，都需要传输到后台系统进行逻辑处理，不同程度级别的数据将会分开处理，各类行业数据皆需要强大的系统后盾支撑，只能通过云计算来实现。
需要说明的是，本申请所涉及的信息(包括但不限于用户设备信息、用户个人信息等)、 数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)以及信号，均为经用户授权或者经过各方充分授权的，且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准。例如，本申请中涉及到的视频播放区域都是在充分授权的情况下获取的。
请参考图1，其示出了本申请一个实施例提供的计算机系统的示意图。该方案实施环境可以实现成为一个具有视频画面的显示功能的系统，如该系统可以包括：终端120和服务器140。
终端120可以是诸如手机、平板电脑、可穿戴设备、PC(Personal Computer，个人计算机)等电子设备。终端120安装和运行有支持视频展示的应用程序。该应用程序可以是浏览器应用程序、视频播放程序、短视频播放程序、新闻资讯程序、知识类程序、生活类程序、即时通信程序、购物类程序、图片分享程序、社区程序中的任意一种。终端120是用户使用的终端。
示例性的，客户端所显示的用户界面中具有可滚动区域，可滚动区域上显示有视频播放区域，用户进行拖动操作，使可滚动区域内的内容移动的同时，客户端跟随视频播放区域在可滚动区域上位置的改变，显示对应视频进度的视频画面。
终端120通过无线网络或有线网络与服务器140相连。
服务器140包括一台服务器、多台服务器、云计算平台和虚拟化中心中的至少一种。示意性的，服务器140包括处理器和存储器，存储器又包括接入模块和信息流推送模块。服务器140用于为支持视频展示的应用程序提供后台服务。可选地，服务器140承担主要计算工作，终端120承担次要计算工作；或者，服务器140承担次要计算工作，终端120承担主要计算工作；或者，服务器140和终端120之间采用分布式计算架构进行协同计算。
服务器140可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN、以及大数据和人工智能平台等基础云计算服务的云服务器。终端可以是智能手机、平板电脑、笔记本电脑、台式计算机、智能音箱、智能手表等，但并不局限于此。终端以及服务器可以通过有线或无线通信方式进行直接或间接地连接，本申请在此不做限制。
本领域技术人员可以知晓，上述终端的数量可以更多或更少。比如上述终端可以仅为一个，或者上述终端为几十个或几百个，或者更多数量。本申请实施例对终端的数量和设备类型不加以限定。
结合上述对实施环境的说明，对本申请实施例提供的视频画面的显示方法进行说明，以该方法的执行主体为图1所示出的终端上运行的客户端来举例说明。该终端运行的客户端为应用程序的客户端，该应用程序可以是浏览器应用程序。示例性的，本申请提供的视频画面的显示方法还可以通过网页、小程序、快应用等来实现。
图2示出了本申请一个示例性实施例提供的视频画面的显示方法的流程图。该方法可以由上述图1中的终端上运行的客户端来执行，该客户端是具有视频展示功能的应用程序。该方法包括以下步骤。
步骤201，显示可滚动区域，可滚动区域上显示有视频播放区域，视频播放区域用于展示目标视频。
可滚动区域是指该区域内的内容可以响应于用户的拖动操作改变显示位置。示例性的，可滚动区域是指该区域内所显示的内容在终端上显示的位置可以随着用户的拖动操作改变。示例性的，可滚动区域显示在客户端的用户界面内，可滚动区域是指该区域内显示的内容在用户界面内的位置可以随着用户的拖动操作改变。示例性的，这里的改变显示位置是指：在 不改变可滚动区域中内容布局的前提下，将可滚动区域内全部内容整体向一个方向移动，原本在可滚动区域内显示的内容在移动后，可能从区域内消失，同时会有新的内容进入可滚动区域内。
例如，可滚动区域的第一内容在第一时刻显示在用户界面的第一位置，当可滚动区域接收到用户向上的拖动操作时，第一内容向上移动至用户界面的第二位置。
示例性的，可滚动区域是客户端的用户界面或页面上的一个区域，该区域可以根据接收到的拖动操作更新区域中各个内容的显示位置，示例性的，这种显示位置的更新是滚动式的。
示例性的，可滚动区域可以是用于展示信息流的区域。信息流包括按照更新方向排列的多个信息流内容。在可滚动区域内，信息流中的信息流内容可以按照更新方向正向移动，或，按照更新方向的反方向逆向移动。示例性的，信息流内容包括：文字、图片、视频、音频中的至少一种。
可滚动区域内所显示的内容包括视频播放区域。示例性的，当滚动区域用于展示信息流时，信息流中的至少一个信息流内容是视频播放区域。视频播放区域用于展示目标视频。可选地，视频播放区域是独立的视频播放器，或者是内嵌的视频播放器，或者是视频播放插件。
示例性的，视频播放区域包括用于展示目标视频的视频展示区域，视频展示区域用于显示目标视频的视频画面。示例性的，视频播放区域还可以包括用于显示目标视频的视频标题、视频发布者、视频发布时间、视频发布者的头像、视频发布者的昵称的区域。
例如，如图3所述，客户端的用户界面中显示有可滚动区域301，可滚动区域中显示有视频播放区域302，视频播放区域302上显示有目标视频的视频画面。如图3中的(1)、(2)、(3)所示，随着用户的上滑的拖动操作，可滚动区域301内的内容整体上移，在图3中的(1)中，可滚动区域301中只显示了视频播放区域302的一部分，随着上滑的拖动操作，在图3中的(2)中，视频播放区域302向上移动，在可滚动区域301中显示了完整的视频播放区域302，用户继续上滑，在图3中的(3)中，视频播放区域302继续上移。
步骤202，响应于接收到作用于可滚动区域的拖动操作，在可滚动区域上沿拖动操作的拖动方向移动视频播放区域。
作用于可滚动区域的拖动操作可以是：在可滚动区域上接收到的用户触摸显示屏进行的滑动操作；在可滚动区域上接收到的用户点击任意位置并拖动的操作；在可滚动区域对应的拖动区域上接收到的拖动操作，例如，在可滚动区域对应的滚动条上接收到的拖动滚动条的操作。
示例性的，拖动操作的拖动方向是可滚动区域的有效操作方向中的一种，有效操作方向是指可滚动区域可以进行滚动的方向。例如，可滚动区域可以向上或向下滚动，则可滚动区域的有效操作方向为向上或向下，拖动操作的拖动方向即为向上或向下中的一种。上述的有效操作方向仅为列举，可滚动区域当然可以沿其他任意方向进行滚动，例如，向左、向右、向上45°方向等。
当拖动操作是在触摸显示屏上的滑动操作时，用户滑动的方向可能与有效操作方向具有一定的偏差，此时，客户端会将与拖动操作的实际拖动方向最匹配的有效操作方向确定为该拖动操作的拖动方向。例如，有效操作方向是向上或向下，用户拖动操作的实际拖动方向为斜向上40°，由于该实际拖动方向与向上的方向最接近，则客户端将该拖动操作的拖动方向确定为向上。
示例性的，拖动操作作用于可滚动区域是指：该拖动操作用于操控可滚动区域内的内容进行滚动，该拖动操作可以是在可滚动区域上接收到的操作，也可以是在可滚动区域之外接收到的操作。可滚动区域内的内容包括视频播放区域和其它信息流内容，其它信息流内容包括：文本、图像、动画、音频、特效中的至少一种。
在接收到拖动操作后，客户端根据拖动操作确定其对应的拖动方向，并控制视频播放区域在可滚动区域中向拖动方向移动。
示例性的，当可滚动区域中还存在除视频播放区域外的其他内容时，其他内容也会随拖动操作同步向拖动方向移动。
例如，如图3所示，当客户端接收到向上拖动的拖动操作时，如图3中的(1)、(2)、(3)所示，视频播放区域302随之上移。
步骤203，跟随视频播放区域在可滚动区域上移动过的移动位置在视频播放区域上显示目标视频中目标视频进度的视频画面，移动位置与目标视频进度存在对应关系。
示例性的，随着拖动操作，视频播放区域在可滚动区域内移动，视频播放区域的位置会发生改变，将视频播放区域在可滚动区域内移动过的位置称为移动位置，客户端会根据视频播放区域所在的移动位置来使视频播放区域显示对应视频进度的视频画面。
移动位置与目标视频的视频进度具有对应关系。示例性的，也可以理解为移动位置与目标视频的进度条具有对应关系。即，每个移动位置对应有一个视频进度，视频播放区域所经过的多个移动位置对应的多个视频进度组成了目标视频进度，客户端跟随视频播放区域在可滚动区域内的移动对应地在视频播放区域上显示目标视频进度的视频画面。
通过这种方式，可以实现将视频播放区域上显示的视频画面与用户滚动页面的操作绑定，用户在通过拖动操作使可滚动区域上的内容移动的同时，客户端根据视频播放区域移动过的移动位置显示对应的视频画面，使视频播放区域上所显示的视频画面直接与用户拖动操作的拖动方向、划过每个拖动位置的时间、速度相关联，拖动方向的改变、拖动速度的快慢(视频播放区域移动的快慢)等都会影响视频播放区域上所显示的视频画面。
例如，当第一移动位置对应第一视频画面、第二移动位置对应第二视频画面、第三移动位置对应第三视频画面时，若根据拖动操作使视频播放区域顺次经过第一移动位置、第二移动位置、第三移动位置时，视频播放区域上会顺次显示第一视频画面、第二视频画面和第三视频画面，即实现正向播放目标视频的视频画面，视频播放区域停留在第一移动位置、第二移动位置、第三移动位置停留的时长也会影响视频播放区域上显示每个视频画面的时长。若根据拖动操作使视频播放区域顺次经过第三移动位置、第二移动位置、第一移动位置时，视频播放区域上会顺次显示第三视频画面、第二视频画面和第一视频画面，即实现逆向播放目标视频的视频画面。
例如，如图3所示，当客户端接收到向上拖动的拖动操作时，如图3中的(1)、(2)、(3)所示，视频播放区域302随之上移，同时，视频播放区域302中显示的视频画面也跟随视频播放区域上移所经过的移动位置的改变而改变。
示例性的，视频播放区域在可滚动区域上的位置可以以视频播放区域上任意一点作为参考点进行确定，例如，可以以视频播放区域的中心点作为参考点，将视频播放区域中心点在可滚动区域上的位置确定为视频播放区域当前所在的移动位置。再如，可以将视频播放区域在可滚动区域上出现的第一个像素点(第一行像素点/第一列像素点)作为参考点，将第一个像素点在可滚动区域上的位置确定为视频播放区域当前所在的移动位置。
示例性的，在显示目标视频中目标视频进度的视频画面的过程中，若用户对目标视频感兴趣，用户可直接观看该目标视频。可选地，在响应于满足开始播放条件，从第i个视频进度的第i个视频画面开始播放目标视频；或，响应于满足开始播放条件，重新播放目标视频。示例性的，开始播放条件是停止拖动操作的时间达到预设阈值，比如，用户停止拖动可滚动区域达到5秒，开始播放第i个视频画面。示例性的，开始播放条件是接收到开始播放操作，比如，用户直接点击第i个视频画面，开始播放第i个视频画面。
可选地，拖动操作的起点位于视频播放区域以外。或，拖动操作的拖动轨迹与视频播放器不相交。或，拖动操作的拖动轨迹与视频播放区域的进度条相互独立，示例性的，在用户拖动可滚动区域时，可滚动区域上的拖动操作不会影响视频播放器的进度条，即，拖动操作与进度条上的触发操作相互独立。此时，在用户浏览可滚动区域时，视频播放区域的显示内容也会发生变化，使得用户能够同时浏览到可滚动区域的内容以及视频播放区域的内容，可 以提高信息的获取效率。
综上所述，本实施例提供的方法，通过在接收到用户拖动页面的拖动操作时，在根据拖动操作滚动页面中的视频播放区域的同时，根据视频播放区域在页面上滚动过的位置所指示的视频进度，在视频播放区域上显示对应的视频画面。从而实现将用户滚动更新页面内容的操作，与视频播放区域所显示的画面相关联，根据用户的拖动操作来显示视频画面，用户滚动视频播放区域至页面的不同位置会使视频播放区域上显示不同视频进度的视频画面，视频画面跟随用户的拖动操作进行对应显示，进而在用户滚动页面内容时，使用户关注页面中的视频播放区域，提高滚动页面中视频内容的互动感和趣味性。
示例性的，本申请所提供的视频画面的显示方法具有两个阶段：第一阶段和第二阶段。
在第一阶段，视频播放区域中所展现的视频画面跟随视频播放区域的位置变化。
在第二阶段，视频播放区域会自动播放目标视频。
下文会分别对第一阶段和第二阶段的实现方式进行说明。
示例性的，第一阶段和第二阶段的执行都具有触发条件。
在此首先介绍第一阶段的触发条件，在下述介绍第二阶段的实施例中再对第二阶段的触发条件进行介绍。
示例性的，第一阶段的触发条件是当视频播放区域显示在可滚动区域上时，触发第一阶段，视频播放区域中显示的视频画面会跟随视频播放区域的位置进行变化。即，响应于视频播放区域显示在可滚动区域上，跟随视频播放区域在可滚动区域上移动过的移动位置在视频播放区域上显示目标视频中目标视频进度的视频画面。
视频播放区域显示在可滚动区域上的时刻可以是：视频播放区域的第一个像素或第一行像素或第一列像素显示在可滚动区域上，即，响应于视频播放区域的第一个像素或第一行像素或第一列像素显示在可滚动区域上，跟随视频播放区域在可滚动区域上移动过的移动位置在视频播放区域上显示目标视频中目标视频进度的视频画面。
需要说明的是视频播放区域的第一个像素，并不一定是视频画面的第一个像素。例如，如图3所示，视频播放区域302在视频画面303的上方还包括用于显示目标视频的相关信息的区域，当可滚动区域301是向上滚动更新的区域时，视频播放区域302的第一个像素是视频播放区域的边框，而不是视频画面。
当然，视频播放区域显示在可滚动区域上的时刻还可以是：视频播放区域中视频画面的第一个像素或第一行像素或第一列像素显示在可滚动区域上，即，响应于视频播放区域中视频画面(视频画面显示区域)的第一个像素或第一行像素或第一列像素显示在可滚动区域上，跟随视频播放区域在可滚动区域上移动过的移动位置在视频播放区域上显示目标视频中目标视频进度的视频画面。
此外，视频播放区域显示在可滚动区域上的时刻还可以是：视频播放区域中最后一个像素显示在可滚动区域上，或，视频播放区域中视频画面(视频画面显示区域)的最后一个像素显示在可滚动区域上。
即，响应于视频播放区域的最后一个像素或最后一行像素或最后一列像素显示在可滚动区域上，跟随视频播放区域在可滚动区域上移动过的移动位置在视频播放区域上显示目标视频中目标视频进度的视频画面。
或，响应于视频播放区域中视频画面(视频画面显示区域)的最后一个像素或最后一行像素或最后一列像素显示在可滚动区域上，跟随视频播放区域在可滚动区域上移动过的移动位置在视频播放区域上显示目标视频中目标视频进度的视频画面。
示例性的，最后一个像素或最后一行像素或最后一列像素显示在可滚动区域上即为：可滚动区域内已显示过视频播放区域的全部像素点，或，可滚动区域内已显示过视频画面的全部像素点。此时，用户已经看到了完整的视频播放区域或视频画面，若用户还未对视频内容 产生兴趣，则会在此时触发本申请提供的视频画面的显示方法，使视频播放区域中显示的视频画面跟随拖动操作变化，进而吸引用户注意目标视频。
当然，对于视频播放区域显示在可滚动区域上的判定，还可以视频播放区域上其他位置的像素点显示在可滚动区域上的时刻作为判定依据，例如，将视频播放区域的中点作为判定依据，本实施例对此不加以限定。
示例性的，对第一阶段的实现方式进行说明。
图4示出了本申请一个示例性实施例提供的视频画面的显示方法的流程图。该方法可以由上述图1中的终端上运行的客户端来执行。基于图2所示的示例性实施例，步骤203包括步骤2031和步骤2032。
步骤2031，响应于视频播放区域移动至第i个移动位置，根据第i个移动位置确定第i个视频进度，i为不大于n的正整数。
视频播放区域在可滚动区域上移动过的移动路径包括n个移动位置，n个移动位置中每个移动位置对应一个视频进度，目标视频进度包括n个移动位置对应的n个视频进度，n为正整数。
示例性的，可滚动区域内的可移动位置对应有视频进度，视频播放区域在可滚动区域上所经过的可移动位置即为移动位置，因此，客户端可以根据可移动位置与视频进度的对应关系，确定移动位置对应的视频进度。
可移动位置包括可滚动区域内的全部位置点。或，可移动位置包括可滚动区域内视频播放区域可以移动到的位置点。或，可移动位置包括可滚动区域内视频播放区域可以移动到的部分位置点。即，可移动位置是位于可滚动区域内的全部或部分的位置点。示例性的，可移动位置可以全部对应有视频进度，也可以部分对应有视频进度。即，可滚动区域内的全部位置点都对应有视频进度，或，可滚动区域内部分位置点对应有视频进度。
视频进度是指视频的时间进度，即，时间点。
对于可移动位置与视频进度的对应关系的制定可以是任意的。例如，可以任取可移动位置中的第一部分位置点(像素点)，使之与第一视频进度对应，任取第二部分位置点(像素点)，使之与第二视频进度对应，如此，确定可移动位置与视频进度的对应关系。
示例性的，全部可移动位置所对应的视频进度，可以是目标视频的部分视频进度，或，全部视频进度。当全部可移动位置只对应目标视频的部分视频进度时，无论视频播放区域移动至哪个位置，在第一阶段都只会展示该部分视频进度对应的视频画面。
在一种可选的实施例中，可以根据可滚动区域的滚动方向来确定可移动位置与视频进度的对应关系。下面以可滚动区域的滚动方向为纵向或横向来进行举例说明。
可滚动区域为纵向滚动的区域；可滚动区域内的可移动位置的纵坐标与目标视频的视频进度具有对应关系。则客户端获取第i个移动位置对应的第i个纵坐标，i为不大于n的正整数，n为正整数；获取第i个纵坐标对应的第i个视频进度。
当可滚动区域是向上或向下进行滚动的区域时，视频播放区域向上或向下进行移动，视频播放区域所在位置的纵坐标改变而横坐标不变，因此，可以将可滚动区域中可移动位置的纵坐标与视频进度进行绑定，根据视频播放区域所移动至的可移动位置(移动位置)的纵坐标来确定其对应的视频进度。
可滚动区域为横向滚动的区域；可滚动区域内的可移动位置的横坐标与目标视频的视频进度具有对应关系。则客户端获取第i个移动位置对应的第i个横坐标，i为不大于n的正整数，n为正整数；获取第i个横坐标对应的第i个视频进度。
当可滚动区域是向左或向右进行滚动的区域时，视频播放区域向左或向右进行移动，视频播放区域所在位置的横坐标改变而纵坐标不变，因此，可以将可滚动区域中可移动位置的横坐标与视频进度进行绑定，根据视频播放区域所移动至的可移动位置(移动位置)的横坐 标来确定其对应的视频进度。
示例性的，以可滚动区域是纵向滚动的区域，且更新方向为向上滑动更新为例进行说明。如图5所示，可滚动区域向上滑动进行更新，则视频播放区域从可滚动区域的底部向上移动，因此，可以将可滚动区域中可移动位置的纵坐标与视频进度相关联。例如，如图5所示，以视频播放区域的第一行像素点的位置作为确定视频播放区域的移动位置的参考，当第一行像素点显示在可滚动区域内时，触发本申请提供的视频画面的显示方法的第一阶段，将可滚动区域底端第0行像素(第一行可移动位置)与aa:bb视频进度对应，向上的第h行像素(第h行可移动位置)与xx:yy视频进度对应，其中，aa:bb视频进度可以是00:00也可以是目标视频中的任意视频进度，xx:yy视频进度可以是目标视频的终止视频进度，也可以是目标视频中的任意视频进度，示例性的，xx:yy视频进度在aa:bb视频进度之后。第0行像素至第h行像素之间的每一行像素点依次对应从aa:bb到xx:yy之间的视频进度。相当于将目标视频的进度条纵向放置。当视频播放区域从第0行像素向上移动至第h行像素时，视频播放区域上顺次播放目标视频从aa:bb视频进度到xx:yy视频进度的视频画面，实现目标视频的视频画面的正向播放；当视频播放区域从第h行像素向下移动至第0行像素时，视频播放区域上顺次播放目标视频从xx:yy视频进度到aa:bb视频进度的视频画面，实现目标视频的视频画面的反向播放。
示例性的，通过设置aa:bb视频进度和xx:yy视频进度，可以设置第一阶段中视频播放区域所能够展示的视频进度。当将其设置为00:00视频进度至xx:yy视频进度(目标视频的终止视频进度)时，在第一阶段用户即可以通过反复拖动可滚动区域进行滚动，来反复观看目标视频的全部视频画面。
以aa:bb视频进度为00:00为例，如图5所示，当视频播放区域的第一个像素点显示在可滚动区域上时，即，当可滚动区域的第0行像素显示为视频播放区域时，触发本申请提供的视频画面的显示方法的第一阶段。如图6所示，可滚动区域中从底部的第0行像素对应00:00视频进度，向上的第h行像素对应xx:yy视频进度，按顺序依次确定第0行像素至第h行像素之间的每行像素对应的视频进度，其中，x1:y1视频进度对应第h1行像素，x2:y2视频进度对应第h2行像素，则，当视频播放区域302从第h1行像素移动至第h2行像素时，视频播放区域302上顺次显示从x1:y1视频进度到x2:y2视频进度的视频画面。
图5所示的例子仅为举例，图5中举例的从第0行像素到第h行像素可以替换为从可滚动区域301的底部第h1行像素到第h2行像素，h2大于h1，即实现将可滚动区域301中间部分的像素点设置为其纵坐标与视频进度相对应，若将视频播放区域的高度设置为h1，则可以实现在可滚动区域上显示完整的视频播放区域时，触发第一阶段，若视频播放区域继续上移，则会根据移动位置对应的视频进度使视频播放区域显示对应的视频画面。
当可滚动区域是横向滚动的区域时，可以参照纵向滚动的设计思路，将可移动位置的横坐标与视频进度对应。
步骤2032，在视频播放区域上显示目标视频中第i个视频进度的第i个视频画面。
示例性的，在第一阶段，客户端根据视频播放区域所在的轨迹位置，进行视频画面的显示，即，在第i个轨迹位置显示第i个视频画面，第i个轨迹位置对应第i个视频进度对应第i个视频画面。用户在第一阶段通过拖动操作改变视频播放区域的位置即可以改变视频播放区域上显示的视频画面。
在这一阶段中，视频播放区域不播放目标视频，即，不播放目标视频的声音，只根据移动位置显示画面。每个视频画面显示的时长与视频播放区域在该位置停留的时长相等，用户可以通过快速滑动视频播放区域的位置，来实现快速播放目标视频的视频画面的效果。视频画面显示的顺序(正向或反向)与视频播放区域移动路径的方向正相关。若用户的拖动操作停止，视频播放区域停在可滚动区域中的某个位置，则视频播放区域上显示该位置对应的静止的视频画面。
综上所述，本实施例提供的方法，通过在移动视频播放区域位置的同时，根据视频播放区域位置来显示对应视频进度的视频画面，使用户在浏览信息流时，可以通过使用不同的滑动信息流的方式，使视频播放区域上以不同的播放速度、播放顺序展现目标视频的视频画面。增加用户在滑动信息流时与视频播放区域的互动性，吸引用户关注信息流中的视频播放区域，提高信息流中视频展示的趣味性。
本实施例提供的方法，通过在可滚动区域是纵向滚动的区域时，将可滚动区域中的可移动位置的纵坐标与视频进度绑定，通过视频播放区域的移动位置的纵坐标来获取对应的视频进度。通过在可滚动区域是横向滚动的区域时，将可滚动区域中的可移动位置的横坐标与视频进度绑定，通过视频播放区域的移动位置的横坐标来获取对应的视频进度。
示例性的，为了进一步丰富视频的展现方式，在第一阶段的基础上，本申请实施例提供了第二阶段的展现方法，即，在满足第二阶段的触发条件时，使视频播放区域自动播放目标视频。
图7示出了本申请一个示例性实施例提供的视频画面的显示方法的流程图。该方法可以由上述图1中的终端上运行的客户端来执行。基于图2所示的示例性实施例，步骤203之后还包括步骤204和步骤205。
步骤204，响应于拖动操作结束，在可滚动区域上显示视频播放区域位于第n个移动位置，视频播放区域上显示有目标视频的第n个视频画面，第n个视频画面为第n个移动位置所对应的第n个视频进度的视频画面。
视频播放区域根据拖动操作在可滚动区域上移动过的移动路径包括n个移动位置，n为正整数。
示例性的，一次拖动操作可以使视频播放区域移动一个移动路径。在一次拖动操作结束时，视频播放区域停在一个移动位置上。对于第二阶段的触发判定，可以是在每次拖动操作结束时，判定当前状态是否满足触发条件；也可以是在拖动操作进行中，判定实时状态是否满足触发条件。
以第二阶段的触发条件是阈值进度为例，即，当视频播放区域上显示超过阈值进度的视频画面时，自动播放目标视频。在一种实现方式中，响应于一次拖动操作结束，客户端根据当前视频播放区域所处第n个移动位置获取其对应的第n个视频进度，判断第n个视频进度是否大于等于阈值进度，若第n个视频进度大于等于阈值进度，则触发第二阶段，从第n个移动位置对应的第n个视频画面开始自动播放目标视频。在另一种实现方式中，客户端实时检测视频播放区域当前显示的视频画面对应的视频进度是否大于等于阈值进度，若大于等于阈值进度，则无论当前拖动操作是否结束，都触发第二阶段，从当前视频进度对应的视频画面开始自动播放目标视频。
本实施例仅以在每次拖动操作结束后进行第二阶段的触发判定进行举例说明。
步骤205，响应于满足自动播放条件，从第n个视频画面开始自动播放目标视频。
在拖动操作结束后，客户端判断是否满足第二阶段的触发条件(自动播放条件)，若满足，则进行目标视频的自动播放；若不满足，则依旧使用第一阶段的方法进行目标视频的展示。
本实施例提供了两种自动播放条件：一种是设置阈值进度，一种是使用视频播放区域上标记元素的位置进行判定。
对于第一种自动播放条件：客户端响应于第n个移动位置对应的第n个视频进度达到阈值进度，从第n个视频画面开始自动播放目标视频。
阈值进度是预先为目标视频设置好的一个视频进度，用于判定是否触发自动播放。阈值进度可以设置为目标视频中的任意视频进度。例如，目标视频是时长两分钟的视频，则可以将阈值进度设置为一分钟位置的视频进度。示例性的，还可以根据目标视频的视频精彩片段 来设置阈值进度，将视频精彩片段开始的时刻设置为阈值进度，使视频播放区域从视频精彩片段开始进行自动播放。
对于第二种自动播放条件：在视频播放区域上还显示有标记元素。标记元素是显示在视频画面上层的独立元素。客户端在视频播放区域上显示标记元素跟随拖动操作沿固定轨迹移动，即，标记元素在视频播放区域上按照预先设置好的固定轨迹进行移动。
例如，如图8所示，在视频播放区域302的画面显示区域上显示有目标视频的视频画面305，标记元素306显示在视频画面305的上层。当视频播放区域的第一个像素显示在可滚动区域上时，标记元素按固定轨迹进行移动。
示例性的，响应于视频播放区域的第一个像素显示在可滚动区域上，标记元素从初始位置开始沿固定轨迹向目标位置移动。
标记元素的移动与视频画面的播放不同步，标记元素的移动速度、移动路径与视频播放区域的位置、视频播放区域中显示的视频画面无关。即，在第一阶段，视频画面的播放速度会随着视频播放区域的移动速度变化，但标记元素的移动速度并不会随之变化。
示例性的，标记元素的移动方向会随着拖动操作的拖动方向改变，即，标记元素的移动方向会随着视频播放区域的移动方向改变。响应于拖动方向为第一方向，在视频播放区域上显示标记元素沿固定轨迹向目标位置正向移动，第一方向为可滚动区域的更新方向，目标位置为固定轨迹的终点。响应于拖动方向为第二方向，在视频播放区域上显示标记元素沿固定轨迹逆向初始位置逆向移动，第二方向为可滚动区域的更新方向的反方向，初始位置为固定轨迹的起点。响应于未接收到拖动操作，在视频播放区域上显示标记元素静止不动。
即，当视频播放区域沿更新方向移动时，标记元素沿固定轨迹正向移动，当视频播放区域沿更新方向的反方向移动时，标记元素沿固定轨迹反向移动，当视频播放区域不动时，标记元素静止不动。
标记元素的移动轨迹是由初始位置(初始坐标)、目标位置(结束坐标)以及中间位置(中间坐标)组成的折线，标记元素按照顺序，沿直线从初始坐标向第一个中间坐标移动，再沿直线第一个中间坐标向第二个中间坐标移动，直至从最后一个中间坐标向结束坐标移动。示例性的，可以不设置中间位置，只设置初始位置和目标位置，则固定轨迹为从初始位置到目标位置的直线。
例如，如图9中的(1)所示，当拖动操作的拖动方向是可滚动区域的更新方向时，标记元素沿固定轨迹从初始位置307经过中间位置向目标位置308正向移动。如图9中的(2)所示，当拖动操作的拖动方向是可滚动区域的更新方向的反方向时，标记元素沿固定轨迹从当前位置向初始位置307反向移动。
客户端响应于标记元素移动至目标位置，从第n个视频画面开始自动播放目标视频，固定轨迹包括目标位置。当拖动操作结束时，标记元素已经移动至目标位置，则客户端从拖动操作结束时视频播放区域上显示的第n个视频画面开始自动播放视频。
在一种实现方式中，若拖动操作还未结束时，标记元素就已经移动至目标位置，则标记元素停在目标位置不动。在另一种实现方式中，若标记元素已经移动至目标位置，但拖动操作还未结束，则停止第一阶段触发第二阶段，客户端从视频播放区域当前的移动位置对应的视频画面开始自动播放视频。
图10示出了采用本申请提供的视频画面的显示方法对视频进行第一阶段以及第二阶段的展示的用户界面示意图。如图10中的(1)、(2)、(3)、(4)所示，在用户界面的信息流展示区域401显示的信息流中包括视频播放区域302，信息流的更新方向为向上滑动，用户可以向上或向下滑动移动信息流中的信息流内容的显示位置，使用户界面中显示出新的信息流内容。当视频播放区域302的第一个像素显示在用户界面中的信息流展示区域401时，触发第一阶段，客户端跟随视频播放区域302在信息流展示区域401上移动过的移动位置在视频播放区域上显示目标视频进度的视频画面，同时，视频画面上的标记元素306沿固定轨迹向 目标位置移动。如图10中的(4)所示，当标记元素306移动到目标位置且拖动操作停止时，触发第二阶段，如图10中的(5)、(6)所示，视频播放区域302自动播放目标视频。
综上所述，本实施例提供的方法，通过在满足自动播放条件时，使视频播放区域自动播放目标视频，自动播放条件可以根据视频进度进行设置，也可以通过在视频播放区域上增加标记元素，根据标记元素的位置来设置自动播放条件，从而增加视频展示与用户操作的互动性。通过在第一阶段使视频画面跟随视频播放区域位置进行变化，在第二阶段自动播放视频，突出视频某些亮点和重点节选，加强视频的互动性和关联性，使得用户注意力能够聚焦在视频内容上，不论是对视频内容的传达，还是用户的操控感，都有较好的体现。同时在用于游戏分发、互动广告上，更具有商业化潜力，能够突出游戏、商品的卖点，提炼关键信息，是一种可尝试、有创新的新型商业化广告形态。而用于游戏介绍视频、游戏互动视频上，能够提炼游戏玩法，强化游戏属性，例如射击、消除等游戏属性，让用户更加直观地理解游戏的玩法和内容。
以下为本申请的装置实施例，对于装置实施例中未详细描述的细节，可参考上述方法实施例。
图11是本申请一个示例性实施例提供的视频画面的显示装置的框图。所述装置包括：
显示模块1101，用于显示可滚动区域，所述可滚动区域上显示有视频播放区域，所述视频播放区域用于展示目标视频；
交互模块1102，用于接收作用于所述可滚动区域的拖动操作；
所述显示模块1101，用于响应于接收到作用于所述可滚动区域的拖动操作，在所述可滚动区域上沿所述拖动操作的拖动方向移动所述视频播放区域；
所述显示模块1101，用于跟随所述视频播放区域在所述可滚动区域上移动过的移动位置在所述视频播放区域上显示所述目标视频中目标视频进度的视频画面，所述移动位置与所述目标视频进度存在对应关系。
在一种可选的实施例中，滚动区域用于展示信息流，信息流中的至少一个信息流内容是视频播放区域。
在一种可选的实施例中，信息流包括按照更新方向排列的多个信息流内容。在可滚动区域内，信息流中的信息流内容按照更新方向正向移动，或，按照更新方向的反方向逆向移动。
在一种可选的实施例中，所述视频播放区域的移动路径包括在所述可滚动区域上移动过的n个移动位置，所述n个移动位置中每个移动位置对应一个视频进度，所述目标视频进度包括所述n个移动位置对应的n个视频进度，n为正整数；所述装置还包括：
确定模块1103，用于响应于所述视频播放区域移动至第i个移动位置，根据所述第i个移动位置确定第i个视频进度，i为不大于n的正整数；
所述显示模块1101，用于在所述视频播放区域上显示所述目标视频中所述第i个视频进度的第i个视频画面。
在一种可选的实施例中，所述可滚动区域为纵向滚动的区域；所述可滚动区域内的可移动位置的纵坐标与所述目标视频的视频进度具有对应关系；
所述确定模块1103，用于获取所述第i个移动位置对应的第i个纵坐标，i为不大于n的正整数，n为正整数；
所述确定模块1103，用于获取所述第i个纵坐标对应的所述第i个视频进度。
在一种可选的实施例中，所述可滚动区域为横向滚动的区域；所述可滚动区域内的可移动位置的横坐标与所述目标视频的视频进度具有对应关系；
所述确定模块1103，用于获取所述第i个移动位置对应的第i个横坐标，i为不大于n的正整数，n为正整数；
所述确定模块1103，用于获取所述第i个横坐标对应的所述第i个视频进度。
在一种可选的实施例中，所述显示模块1101，用于响应于满足开始播放条件，从所述第i个视频进度的第i个视频画面开始播放所述目标视频；或，响应于满足所述开始播放条件，重新播放所述目标视频。
在一种可选的实施例中，所述拖动操作的起点位于所述视频播放区域以外；或，所述拖动操作的拖动轨迹与所述视频播放器不相交；或，所述拖动操作的所述拖动轨迹与所述视频播放区域的进度条相互独立。
在一种可选的实施例中，所述视频播放区域根据所述拖动操作在所述可滚动区域上移动过的移动路径包括n个移动位置，n为正整数；
所述显示模块1101，用于响应于所述拖动操作结束，在所述可滚动区域上显示所述视频播放区域位于第n个移动位置，所述视频播放区域上显示有所述目标视频的第n个视频画面，所述第n个视频画面为所述第n个移动位置所对应的第n个视频进度的视频画面；
所述显示模块1101，用于响应于满足自动播放条件，从所述第n个视频画面开始自动播放所述目标视频。
在一种可选的实施例中，所述目标视频对应有阈值进度；
所述显示模块1101，用于响应于所述第n个移动位置对应的所述第n个视频进度达到所述阈值进度，从所述第n个视频画面开始自动播放所述目标视频。
在一种可选的实施例中，所述视频播放区域上显示有标记元素；
所述显示模块1101，用于在所述视频播放区域上显示所述标记元素跟随所述拖动操作沿固定轨迹移动；
所述显示模块1101，用于响应于所述标记元素移动至目标位置，从所述第n个视频画面开始自动播放所述目标视频，所述固定轨迹包括所述目标位置。
在一种可选的实施例中，标记元素的移动与视频画面的播放不同步，标记元素的移动速度、移动路径与视频播放区域的位置、视频播放区域中显示的视频画面无关。
在一种可选的实施例中，所述显示模块1101，用于响应于所述拖动方向为第一方向，在所述视频播放区域上显示所述标记元素沿所述固定轨迹向所述目标位置正向移动，所述第一方向为所述可滚动区域的更新方向，所述目标位置为所述固定轨迹的终点。
在一种可选的实施例中，所述显示模块1101，用于响应于所述拖动方向为第二方向，在所述视频播放区域上显示所述标记元素沿所述固定轨迹逆向初始位置逆向移动，所述第二方向为所述可滚动区域的更新方向的反方向，所述初始位置为所述固定轨迹的起点。
在一种可选的实施例中，所述显示模块1101，用于响应于所述视频播放区域的第一个像素显示在所述可滚动区域上，跟随所述视频播放区域在所述可滚动区域上移动过的移动位置在所述视频播放区域上显示所述目标视频中目标视频进度的视频画面。
需要说明的是：上述实施例提供的视频画面的显示装置，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的视频画面的显示装置与视频画面的显示方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。
本申请还提供了一种终端，该终端包括处理器和存储器，存储器中存储有至少一条指令，至少一条指令由处理器加载并执行以实现上述各个方法实施例提供的视频画面的显示方法。需要说明的是，该终端可以是如下图12所提供的终端。
图12出了本申请一个示例性实施例提供的终端1200的结构框图。该终端1200可以是：智能手机、平板电脑、MP3播放器(Moving Picture Experts Group Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group Audio Layer IV，动态影像专 家压缩标准音频层面4)播放器、笔记本电脑或台式电脑。终端1200还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。
通常，终端1200包括有：处理器1201和存储器1202。
处理器1201可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器1201可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器1201也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器1201可以在集成GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器1201还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。
存储器1202可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器1202还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器1202中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器1201所执行以实现本申请中方法实施例提供的视频画面的显示方法。
在一些实施例中，终端1200还可选包括有：外围设备接口1203和至少一个外围设备。处理器1201、存储器1202和外围设备接口1203之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口1203相连。具体地，外围设备包括：射频电路1204、显示屏1205、摄像头组件1206、音频电路1207和电源1208中的至少一种。
外围设备接口1203可被用于将I/O(Input/Output，输入/输出)相关的至少一个外围设备连接到处理器1201和存储器1202。
射频电路1204用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路1204通过电磁信号与通信网络以及其他通信设备进行通信。
显示屏1205用于显示UI(User Interface，用户界面)。
摄像头组件1206用于采集图像或视频。
音频电路1207可以包括麦克风和扬声器。
电源1208用于为终端1200中的各个组件进行供电。
在一些实施例中，终端1200还包括有一个或多个传感器1209。该一个或多个传感器1209包括但不限于：加速度传感器1210、陀螺仪传感器1211、压力传感器1212、光学传感器1213以及接近传感器1214。
本领域技术人员可以理解，图12中示出的结构并不构成对终端1200的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。
所述存储器还包括一个或者一个以上的程序，所述一个或者一个以上程序存储于存储器中，所述一个或者一个以上程序包含用于进行本申请实施例提供的视频画面的显示方法。
本申请提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令，所述至少一条指令由所述处理器加载并执行以实现上述各个方法实施例提供的视频画面的显示方法。
本申请还提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述可选实现方式中提供的视频画面的显示方法。

Claims (20)

  1. 一种视频画面的显示方法，所述方法由计算机设备执行，所述方法包括：
    显示可滚动区域，所述可滚动区域上显示有视频播放区域，所述视频播放区域用于展示目标视频；
    响应于接收到作用于所述可滚动区域的拖动操作，在所述可滚动区域上沿所述拖动操作的拖动方向移动所述视频播放区域；
    跟随所述视频播放区域在所述可滚动区域上移动过的移动位置在所述视频播放区域上显示所述目标视频中目标视频进度的视频画面，所述移动位置与所述目标视频进度存在对应关系。
  2. 根据权利要求1所述的方法，其中，所述视频播放区域在所述可滚动区域上移动过的移动路径包括n个移动位置，所述n个移动位置中每个移动位置对应一个视频进度，所述目标视频进度包括所述n个移动位置对应的n个视频进度，n为正整数；
    所述跟随所述视频播放区域在所述可滚动区域上移动过的移动位置在所述视频播放区域上显示所述目标视频中目标视频进度的视频画面，包括：
    响应于所述视频播放区域移动至第i个移动位置，根据所述第i个移动位置确定第i个视频进度，i为不大于n的正整数；
    在所述视频播放区域上显示所述目标视频中所述第i个视频进度的第i个视频画面。
  3. 根据权利要求2所述的方法，其中，所述可滚动区域为纵向滚动的区域；所述可滚动区域内的可移动位置的纵坐标与所述目标视频的视频进度具有对应关系；
    所述根据所述第i个移动位置确定第i个视频进度，包括：
    获取所述第i个移动位置对应的第i个纵坐标，i为不大于n的正整数，n为正整数；
    获取所述第i个纵坐标对应的所述第i个视频进度。
  4. 根据权利要求2所述的方法，其中，所述可滚动区域为横向滚动的区域；所述可滚动区域内的可移动位置的横坐标与所述目标视频的视频进度具有对应关系；
    所述根据所述第i个移动位置确定第i个视频进度，包括：
    获取所述第i个移动位置对应的第i个横坐标，i为不大于n的正整数，n为正整数；
    获取所述第i个横坐标对应的所述第i个视频进度。
  5. 根据权利要求2所述的方法，其中，所述方法还包括：
    响应于满足开始播放条件，从所述第i个视频进度的第i个视频画面开始播放所述目标视频；
    或，响应于满足所述开始播放条件，重新播放所述目标视频。
  6. 根据权利要求1至5任一项所述的方法，其特征在于，
    所述拖动操作的起点位于所述视频播放区域以外；
    或，所述拖动操作的拖动轨迹与所述视频播放区域不相交；
    或，所述拖动操作的所述拖动轨迹与所述视频播放区域的进度条相互独立。
  7. 根据权利要求1至5任一所述的方法，其中，所述视频播放区域根据所述拖动操作在所述可滚动区域上移动过的移动路径包括n个移动位置，n为正整数；所述方法还包括：
    响应于所述拖动操作结束，在所述可滚动区域上显示所述视频播放区域位于第n个移动 位置，所述视频播放区域上显示有所述目标视频的第n个视频画面，所述第n个视频画面为所述第n个移动位置所对应的第n个视频进度的视频画面；
    响应于满足自动播放条件，从所述第n个视频画面开始自动播放所述目标视频。
  8. 根据权利要求7所述的方法，其中，所述目标视频对应有阈值进度；
    所述响应于满足自动播放条件，从所述第n个视频画面开始自动播放所述目标视频，包括：
    响应于所述第n个移动位置对应的所述第n个视频进度达到所述阈值进度，从所述第n个视频画面开始自动播放所述目标视频。
  9. 根据权利要求7所述的方法，其中，所述视频播放区域上显示有标记元素；所述方法还包括：
    在所述视频播放区域上显示所述标记元素跟随所述拖动操作沿固定轨迹移动；
    所述响应于满足自动播放条件，从所述第n个视频画面开始自动播放所述目标视频，包括：
    响应于所述标记元素移动至目标位置，从所述第n个视频画面开始自动播放所述目标视频，所述固定轨迹包括所述目标位置。
  10. 根据权利要求9所述的方法，其中，所述在所述视频播放区域上显示所述标记元素跟随所述拖动操作沿固定轨迹移动，包括：
    响应于所述拖动方向为第一方向，在所述视频播放区域上显示所述标记元素沿所述固定轨迹向所述目标位置正向移动，所述第一方向为所述可滚动区域的更新方向，所述目标位置为所述固定轨迹的终点；
    或，
    响应于所述拖动方向为第二方向，在所述视频播放区域上显示所述标记元素沿所述固定轨迹逆向初始位置逆向移动，所述第二方向为所述可滚动区域的更新方向的反方向，所述初始位置为所述固定轨迹的起点。
  11. 根据权利要求1至5任一所述的方法，其中，所述跟随所述视频播放区域在所述可滚动区域上移动过的移动位置在所述视频播放区域上显示所述目标视频中目标视频进度的视频画面，包括：
    响应于所述视频播放区域显示在所述可滚动区域上，跟随所述视频播放区域在所述可滚动区域上移动过的移动位置在所述视频播放区域上显示所述目标视频中目标视频进度的视频画面。
  12. 一种视频画面的显示装置，其中，所述装置包括：
    显示模块，用于显示可滚动区域，所述可滚动区域上显示有视频播放区域，所述视频播放区域用于展示目标视频；
    交互模块，用于接收作用于所述可滚动区域的拖动操作；
    所述显示模块，用于响应于接收到作用于所述可滚动区域的拖动操作，在所述可滚动区域上沿所述拖动操作的拖动方向移动所述视频播放区域；
    所述显示模块，用于跟随所述视频播放区域在所述可滚动区域上移动过的移动位置在所述视频播放区域上显示所述目标视频中目标视频进度的视频画面，所述移动位置与所述目标视频进度存在对应关系。
  13. 根据权利要求12所述的装置，其中，所述视频播放区域在所述可滚动区域上移动过 由n个移动位置组成的移动路径，所述n个移动位置中每个移动位置对应一个视频进度，所述目标视频进度包括所述n个移动位置对应的n个视频进度，n为正整数；所述装置还包括：
    确定模块，用于响应于所述视频播放区域移动至第i个移动位置，根据所述第i个移动位置确定第i个视频进度，i为不大于n的正整数；
    所述显示模块，用于在所述视频播放区域上显示所述目标视频中所述第i个视频进度的第i个视频画面。
  14. 根据权利要求13所述的装置，其中，所述可滚动区域为纵向滚动的区域；所述可滚动区域内的可移动位置的纵坐标与所述目标视频的视频进度具有对应关系；
    所述确定模块，用于获取所述第i个移动位置对应的第i个纵坐标，i为不大于n的正整数，n为正整数；
    所述确定模块，用于获取所述第i个纵坐标对应的所述第i个视频进度。
  15. 根据权利要求13所述的装置，其中，所述可滚动区域为横向滚动的区域；所述可滚动区域内的可移动位置的横坐标与所述目标视频的视频进度具有对应关系；
    所述确定模块，用于获取所述第i个移动位置对应的第i个横坐标，i为不大于n的正整数，n为正整数；
    所述确定模块，用于获取所述第i个横坐标对应的所述第i个视频进度。
  16. 根据权利要求11至14任一项所述的装置，其中，所述视频播放区域根据所述拖动操作在所述可滚动区域上移动过的移动路径包括n个移动位置，n为正整数；
    所述显示模块，还用于响应于所述拖动操作结束，在所述可滚动区域上显示所述视频播放区域位于第n个移动位置，所述视频播放区域上显示有所述目标视频的第n个视频画面，所述第n个视频画面为所述第n个移动位置所对应的第n个视频进度的视频画面；
    所述显示模块，还用于响应于满足自动播放条件，从所述第n个视频画面开始自动播放所述目标视频。
  17. 根据权利要求16所述的装置，其中，所述目标视频对应有阈值进度；
    所述显示模块，还用于响应于所述第n个移动位置对应的所述第n个视频进度达到所述阈值进度，从所述第n个视频画面开始自动播放所述目标视频。
  18. 一种计算机设备，其中，所述计算机设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如权利要求1至9任一所述的视频画面的显示方法。
  19. 一种计算机可读存储介质，其中，所述可读存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如权利要求1至9任一所述的视频画面的显示方法。
  20. 一种计算机程序产品，包括计算机程序或指令，其中，所述计算机程序或指令被处理器执行时实现权利要求1至9中任一项所述的视频画面的显示方法。
PCT/CN2022/077715 2021-03-01 2022-02-24 视频画面的显示方法、装置、设备、介质及程序产品 WO2022183967A1 (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
US17/985,786 US20230071445A1 (en) 2021-03-01 2022-11-11 Video picture display method and apparatus, device, medium, and program product

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202110227788.X 2021-03-01
CN202110227788.XA CN115002549A (zh) 2021-03-01 2021-03-01 视频画面的显示方法、装置、设备及介质

Related Child Applications (1)

Application Number Title Priority Date Filing Date
US17/985,786 Continuation US20230071445A1 (en) 2021-03-01 2022-11-11 Video picture display method and apparatus, device, medium, and program product

Publications (1)

Publication Number Publication Date
WO2022183967A1 true WO2022183967A1 (zh) 2022-09-09

Family

ID=83018466

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2022/077715 WO2022183967A1 (zh) 2021-03-01 2022-02-24 视频画面的显示方法、装置、设备、介质及程序产品

Country Status (3)

Country Link
US (1) US20230071445A1 (zh)
CN (1) CN115002549A (zh)
WO (1) WO2022183967A1 (zh)

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2016074120A1 (en) * 2014-11-10 2016-05-19 Tencent Technology (Shenzhen) Company Limited Scrolling animation or video playback controlled by touch user interface
CN105898610A (zh) * 2015-10-15 2016-08-24 乐视网信息技术（北京）股份有限公司 视频列表的自动播放方法和装置
CN105898523A (zh) * 2016-06-29 2016-08-24 无锡天脉聚源传媒科技有限公司 一种视频播放方法及装置
CN107241657A (zh) * 2017-07-06 2017-10-10 广州优视网络科技有限公司 视频播放方法、装置、计算设备以及存储介质
WO2018126899A1 (zh) * 2017-01-05 2018-07-12 腾讯科技（深圳）有限公司 一种视频界面显示方法及装置

Family Cites Families (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103986962B (zh) * 2014-06-03 2016-03-02 合一网络技术(北京)有限公司 显示悬浮式播放窗口的方法和系统
CN104735544A (zh) * 2015-03-31 2015-06-24 上海摩软通讯技术有限公司 移动终端的视频导航方法
CN106534734A (zh) * 2015-09-11 2017-03-22 腾讯科技（深圳）有限公司 视频播放、地图展示的方法和装置、数据处理方法和系统
CN105898529A (zh) * 2015-12-03 2016-08-24 乐视网信息技术（北京）股份有限公司 一种视频自动播放、暂停的实现方法和系统
US11259088B2 (en) * 2017-10-27 2022-02-22 Google Llc Previewing a video in response to computing device interaction
CN108965980B (zh) * 2018-07-20 2021-08-10 腾讯科技（深圳）有限公司 推荐内容显示方法、装置、终端及存储介质
CN111970257B (zh) * 2020-08-04 2022-01-11 腾讯科技（深圳）有限公司 一种文稿显示控制方法、装置、电子设备和存储介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2016074120A1 (en) * 2014-11-10 2016-05-19 Tencent Technology (Shenzhen) Company Limited Scrolling animation or video playback controlled by touch user interface
CN105898610A (zh) * 2015-10-15 2016-08-24 乐视网信息技术（北京）股份有限公司 视频列表的自动播放方法和装置
CN105898523A (zh) * 2016-06-29 2016-08-24 无锡天脉聚源传媒科技有限公司 一种视频播放方法及装置
WO2018126899A1 (zh) * 2017-01-05 2018-07-12 腾讯科技（深圳）有限公司 一种视频界面显示方法及装置
CN107241657A (zh) * 2017-07-06 2017-10-10 广州优视网络科技有限公司 视频播放方法、装置、计算设备以及存储介质

Also Published As

Publication number Publication date
US20230071445A1 (en) 2023-03-09
CN115002549A (zh) 2022-09-02

Similar Documents

Publication Publication Date Title
US11941708B2 (en) Method, apparatus, device and medium for posting a video or image
CN111294663B (zh) 弹幕处理方法、装置、电子设备及计算机可读存储介质
JP5654984B2 (ja) コンピューターおよびメディアプレーヤー上で消費されるコンテンツに複数の段階のコンテキストを提供すること
US11899907B2 (en) Method, apparatus and device for displaying followed user information, and storage medium
JP5654985B2 (ja) コンピューターおよびメディアプレーヤー上で消費されるコンテンツに複数の段階のコンテキストを提供すること
CN106919707B (zh) 一种基于h5的页面显示方法和终端
CN111857923B (zh) 特效展示方法、装置、电子设备及计算机可读介质
TW201826805A (zh) 播放處理方法、裝置和設備
WO2022193597A1 (zh) 界面信息切换方法及装置
US20230013601A1 (en) Program trial method, system, apparatus, and device, and medium
CN111435999A (zh) 一种视频上展示信息的方法、装置、设备和存储介质
CN112860163B (zh) 图像编辑方法和装置
EP4124052A1 (en) Video production method and apparatus, and device and storage medium
CN112261481B (zh) 互动视频的创建方法、装置、设备及可读存储介质
CN112516589A (zh) 直播中游戏商品互动方法、装置、计算机设备及存储介质
CN112437353A (zh) 视频处理方法、视频处理装置、电子设备和可读存储介质
WO2023050722A1 (zh) 信息显示方法及电子设备
US20230244363A1 (en) Screen capture method and apparatus, and electronic device
CN112035046A (zh) 榜单信息显示方法、装置、电子设备及存储介质
CN109462777B (zh) 视频热度更新方法、装置、终端及存储介质
KR102316822B1 (ko) 영상과 관련된 사용자 반응에 기반하여 컨텐츠를 제공하는 방법, 장치, 및 컴퓨터 프로그램
CN112954484A (zh) 弹幕信息显示方法和装置
WO2022183967A1 (zh) 视频画面的显示方法、装置、设备、介质及程序产品
CN114449355B (zh) 一种直播互动的方法、装置、设备及存储介质
CN115550741A (zh) 视频管理方法、装置、电子设备及可读存储介质

Legal Events

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

Ref document number: 22762432

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE