WO2018126899A1 - 一种视频界面显示方法及装置 - Google Patents

一种视频界面显示方法及装置 Download PDF

Info

Publication number
WO2018126899A1
WO2018126899A1 PCT/CN2017/117638 CN2017117638W WO2018126899A1 WO 2018126899 A1 WO2018126899 A1 WO 2018126899A1 CN 2017117638 W CN2017117638 W CN 2017117638W WO 2018126899 A1 WO2018126899 A1 WO 2018126899A1
Authority
WO
WIPO (PCT)
Prior art keywords
displayed
page
target area
area
scroll value
Prior art date
Application number
PCT/CN2017/117638
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 WO2018126899A1 publication Critical patent/WO2018126899A1/zh
Priority to US16/375,432 priority Critical patent/US20190230311A1/en

Links

Images

Classifications

    • 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
    • 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/41—Structure of client; Structure of client peripherals
    • H04N21/426—Internal components of the client ; Characteristics thereof
    • H04N21/42653—Internal components of the client ; Characteristics thereof for processing graphics
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/70—Information retrieval; Database structures therefor; File system structures therefor of video data
    • G06F16/74—Browsing; Visualisation therefor
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • 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/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0483—Interaction with page-structured environments, e.g. book metaphor
    • 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
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G5/00—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators
    • G09G5/34—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators for rolling or scrolling
    • 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/41—Structure of client; Structure of client peripherals
    • H04N21/426—Internal components of the client ; Characteristics thereof
    • 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/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
    • H04N21/4312—Generation of visual interfaces for content selection or interaction; Content or additional data rendering involving specific graphical features, e.g. screen layout, special fonts or colors, blinking icons, highlights or animations
    • H04N21/4316—Generation of visual interfaces for content selection or interaction; Content or additional data rendering involving specific graphical features, e.g. screen layout, special fonts or colors, blinking icons, highlights or animations for displaying supplemental content in a region of the screen, e.g. an advertisement in a separate window
    • 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
    • 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/47205—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 manipulating displayed content, e.g. interacting with MPEG-4 objects, editing locally
    • 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/485—End-user interface for client configuration
    • 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/485—End-user interface for client configuration
    • H04N21/4858—End-user interface for client configuration for modifying screen layout parameters, e.g. fonts, size of the windows

Definitions

  • the present application relates to the field of electronic technologies, and in particular, to a video interface display method and apparatus.
  • the video playback client (such as the Tencent video playback client) can play video to the user to meet the user's needs.
  • the video playing client can synthesize and render the video interface and page elements (such as an advertisement jump button, skip an advertisement button, etc.) on the same page to be displayed, and the user can click the advertisement jump while watching the video.
  • the button enters the ad page, or clicks the skip ad button to display non-advertising content for page interaction.
  • An embodiment of the present application provides a video interface display method, where the method includes:
  • the embodiment of the present application further provides a video interface display device, where the device includes:
  • One or more memories are One or more memories
  • One or more processors among them,
  • the one or more memories storing one or more instruction modules configured to be executed by the one or more processors;
  • the one or more instruction modules include:
  • a receiving unit configured to receive webpage data, where the webpage data is used to display a page to be displayed through a page window of the video playing terminal;
  • An acquiring unit configured to acquire a target area in a page to be displayed, where the target area includes a video interface and a page interaction element;
  • a determining unit configured to determine a to-be-displayed area of the target area in the display screen, and acquire a scroll value of the at least one of the to-be-displayed page and the page window based on the to-be-displayed area;
  • a moving unit configured to move at least one of the page to be displayed and the page window based on a scroll value of the page to be displayed to display the target area to an area to be displayed in the display screen;
  • a filling unit configured to fill preset display information in the display screen other than the area to be displayed, to hide content in the other area.
  • the embodiment of the present application further provides a non-transitory computer readable storage medium storing computer readable instructions, which may cause at least one processor to perform the method described above.
  • FIG. 1 is a schematic diagram of a network structure applicable to a video interface display method provided in an embodiment of the present application
  • FIG. 1b is a schematic flowchart of a video interface display method provided in an embodiment of the present application.
  • FIG. 2 is a schematic diagram of an interface of a page to be displayed provided in an embodiment of the present application
  • FIG. 3 is a schematic diagram of an interface provided in another embodiment of the present application.
  • FIG. 4 is a schematic diagram of an interface provided in another embodiment of the present application.
  • FIG. 5 is a schematic flowchart of a video interface display method provided in an embodiment of the present application.
  • FIG. 6 is a schematic structural diagram of a video interface display device provided in an embodiment of the present application.
  • FIG. 7 is a schematic structural diagram of a video interface display device provided in an embodiment of the present application.
  • FIG. 8 is a schematic structural diagram of a device terminal provided in an embodiment of the present application.
  • An embodiment of the present application provides a video interface display method, where a target area is displayed in a preset to-be-displayed area, where the target area includes a video interface and a page interaction element, and an area other than the target area in the display screen is displayed.
  • Filling in the preset display information on the one hand, can provide a unified video playing interface to the user, thereby improving the playing experience.
  • supporting page interaction avoiding inefficiency due to inability to interact, and reducing processing pressure.
  • FIG. 1a is a network structure diagram of a video interface display method provided by an embodiment of the present application.
  • the network structure diagram 100 includes at least: a device terminal 101a, a network 102a, and a server 103a.
  • the device terminal 101a may be a device terminal such as a personal computer, a smart phone (such as an Android mobile phone, an iOS mobile phone, etc.), a tablet computer, a palmtop computer, a mobile Internet device (MID, Mobile Internet Devices), or a wearable smart device, and can be operated thereon.
  • Various clients such as video playback clients.
  • the client running on the device terminal 101a loads and displays the page 104a to be displayed through the built-in browser.
  • Network 102a may include a wired network and a wireless network. As shown in FIG. 1a, on the access network side, the device terminal 101a can access the network 102a by way of wireless or wired; on the core network side, the server 103a is generally connected to the network 102a by wire. . Of course, the server 103a can also be connected to the network 102a by wireless.
  • the server 103a may be an application server, such as a video playing server, which provides services to the user together with the client of the device terminal 101a, for example, playing a video for the user. Wait.
  • the server 103a may be a separate server or a cluster server composed of a plurality of servers.
  • the embodiment of the present application provides a video interface display method, which acquires a target area in a page to be displayed, the target area includes a video interface and a page element, determines a to-be-displayed area of the target area in the display screen, and acquires the to-be-displayed area based on the to-be-displayed area. Displaying the scrolling value of the page, moving the target area to the area to be displayed based on the scrolling value of the page to be displayed, and filling the preset display information with other areas than the area to be displayed in the display screen, thereby improving the playing experience.
  • the above video interface display method can be run on a personal computer, a smart phone (such as an Android phone, an iOS phone, etc.), a tablet computer, a palmtop computer, a mobile Internet device (MID, Mobile Internet Devices), or a wearable smart device.
  • the terminal is running in the client.
  • the client may include a video playing client, an instant messaging client, or an SNS (Social Networking Services) client, etc., and the client may display a video interface for playing video.
  • SNS Social Networking Services
  • FIG. 1b is a schematic flowchart of a video interface display method according to an embodiment of the present invention. As shown in FIG. 1b, the video interface display method may at least include the following steps:
  • S101b Obtain a target area in the page to be displayed, where the target area includes a video interface and a page element.
  • the terminal may obtain a target area in the page to be displayed, where the target area may include a video interface and a page element, the video interface may be used to play a video, and the page element may be used to describe related information of the video, such as the remaining playing time of the advertisement, and clicking to enter Advertising pages or jump ads, etc.
  • the terminal may obtain a page to be displayed by using a keyword input by the user.
  • the terminal may obtain the access path or the address information corresponding to the click operation of the access path or the address information. The page to be displayed.
  • the page to be displayed may include a menu bar 201, a video interface 204, a page element 205, and an association of the video interface.
  • Information 203 may be located at the top of the page to be displayed, and the menu bar may include a client identifier of the video playing client, a login button for instructing the login video playing server, or a search engine.
  • Video interface 204 and page element 205 may be located in the same area of the page to be displayed, such as video interface 204 and page element 205 being located below the menu bar.
  • the association information 203 of the video interface may be located below the video interface 204.
  • the association information 203 may include a video name of the video played by the video interface 204, a current play set number, or a total number of play times of the video interface.
  • S102b Determine a to-be-displayed area of the target area in the display screen, and acquire a scroll value of the page to be displayed based on the to-be-displayed area.
  • the terminal may determine an area to be displayed of the target area in the display screen, and acquire a scroll value of the page to be displayed based on the area to be displayed.
  • the scroll value is used to indicate the location of each area in the page to be displayed, and the scroll value of the page to be displayed acquired based on the to-be-displayed area may be the scroll value of the updated page to be displayed.
  • the menu bar is located at the top of the page to be displayed, and the target area is located below the menu bar.
  • the page to be displayed displayed by the terminal in the display screen may be as The left image in Figure 2 is shown.
  • the height of the page to be displayed is greater than the height of the display screen, and the display screen cannot completely display the entire page to be displayed.
  • the terminal may display the target area in the area to be displayed of the display screen, where the area to be displayed may be preset by the terminal.
  • the area for example, the area to be displayed may be the middle area of the display screen.
  • the terminal may acquire the scroll value of the page to be displayed when the target area is located in the area to be displayed.
  • the terminal may update the scroll value of the page to be displayed based on the area to be displayed, and obtain a scroll value after the page to be displayed is updated.
  • the first area 301 can represent a complete page to be displayed, such as a web page; the second area 302 can represent a target area, that is, an area including a video interface and a page element; the third area 305 can As the view of the page to be displayed
  • the viewport may be a page window, such as a page window provided by a web browser built by a video player client for displaying a page to be displayed loaded by the browser, and the size of the viewport is generally the size of the display screen.
  • the page content located in the viewport can be displayed in the display screen.
  • the terminal may update the scroll value of the page to be displayed based on the area to be displayed, and obtain a scroll value after the page to be displayed is updated. For example, the terminal may move the page to be displayed such that the target area is located in the area to be displayed.
  • the scroll value after the page to be displayed is updated may be expressed as follows:
  • newScrollyY represents the Y value in the scroll value after the page is updated
  • videoY represents the original Y value of the target area
  • webviewHeight represents the height of the display screen
  • videoHeight represents the height of the target area
  • newScrollyX represents the scroll value after the page is updated.
  • X value videoX represents the original X value of the target area
  • webviewLength represents the length of the display screen
  • videoLength represents the length of the target area.
  • the scroll value after the page to be displayed is updated may be expressed as follows:
  • newScrollyY' represents the Y value in the scroll value of the page to be displayed recently updated
  • newScrollyY represents the Y value in the scroll value of the last update of the page to be displayed
  • webHeight represents the height of the page to be displayed
  • newScrollyX' represents the page to be displayed The X value in the most recently updated scroll value
  • newScrollyX represents the X value in the scroll value after the last update of the page to be displayed
  • webLength represents the length of the page to be displayed.
  • the terminal may move the target area, so that the mobile The target area is located in the area to be displayed of the display screen.
  • the terminal moves the page to be displayed in the first state in FIG. 3 based on the updated scroll value of the page to be displayed, and the page to be displayed after the move can be in FIG.
  • the terminal may determine that the second area 302 in the page to be displayed after the movement is located above the display screen, not in the middle area of the display screen, that is, the second area 302 is located in other areas of the display screen, The terminal can move the second area 302 such that the moved second area 302 is located in the area to be displayed of the display screen.
  • the updated scroll value of the target area can be expressed as follows:
  • int offsetY represents the Y value in the updated scroll value of the target area
  • webviewHeight represents the height of the display screen
  • videoHeight represents the height of the target area
  • videoY represents the original Y value of the target area
  • ScrollY represents the scroll value of the page to be displayed.
  • Y value; int offsetX indicates the X value in the updated scroll value of the target area
  • webviewLength indicates the length of the display screen
  • videoLength indicates the length of the target area
  • videoX indicates the original X value of the target area
  • ScrollX indicates the scroll value of the page to be displayed.
  • the value of X indicates the Y value in the updated scroll value of the target area
  • webviewLength indicates the length of the display screen
  • videoLength indicates the length of the target area
  • videoX indicates the original X value of the target area
  • ScrollX indicates the scroll value of the page to be displayed. The value of X.
  • the terminal may update the scroll value of the target area based on the area to be displayed, and obtain the updated scroll value of the target area.
  • the terminal may update the scroll value of the target area based on the area to be displayed, so that the target area may be moved to the area to be displayed based on the updated scroll value of the target area.
  • the terminal may perform the scroll value of the page to be displayed when the target area is located in another area of the display screen based on the updated scroll value of the target area. Update to get the scroll value after the page to be displayed is updated.
  • the manner in which the target area is moved to the area to be displayed includes, but is not limited to, updating the scroll value of the page to be displayed; or updating the position of the target area relative to the page to be displayed; or displaying The scroll value of the page is After the update, the location of the target area relative to the page to be displayed is updated; or after the target area is updated relative to the position of the page to be displayed, the scroll value of the page to be displayed is updated.
  • S103b Move the target area to the area to be displayed based on the scroll value of the page to be displayed.
  • the terminal may move the target area to the area to be displayed based on the scroll value of the page to be displayed.
  • the second area 302 moved to the third area 305 may be as shown in the page to be displayed in the third state in FIG.
  • S104b Filling the preset display information with other areas except the area to be displayed in the display screen.
  • the terminal may fill the preset display information in other areas than the area to be displayed in the display screen.
  • the preset display information may be a black block placeholder, for example, the area in the display screen except the area to be displayed is filled with black.
  • the preset display information may be a preset picture or text, and the terminal may fill the display information corresponding to the to-be-displayed page in the display screen other than the area to be displayed, for example, for different pages to be displayed. Different display information can be filled in the display screen except for the area to be displayed.
  • the terminal moves the target area 401 to the area to be displayed, and fills the preset display information in the display area other than the area to be displayed, and fills the preset display information.
  • the page to be displayed can be displayed in the video interface 404 by using the same layer drawing manner, so that the video interface 404 and the page element 405 are located in the same area, the page interaction is realized, and the video interface 404 is displayed in the middle. Hide other areas to improve the playback experience.
  • the target area in the page to be displayed is obtained, the area to be displayed in the display screen is determined, and the scroll value of the page to be displayed is obtained based on the area to be displayed, and the target is based on the scroll value of the page to be displayed.
  • the area is moved to the area to be displayed, and the area other than the area to be displayed is filled with the preset display information in the display screen, and the video interface and the page element are displayed in the area to be displayed, thereby improving the playing experience.
  • the embodiment of the present application provides a video interface display method, which displays a target area into a preset to-be-displayed area, where the target area includes a video interface and a page interaction element, and displays other areas of the screen other than the target area.
  • Filling in the preset display information on the one hand, can provide a unified video playing interface to the user, thereby improving the playing experience.
  • supporting page interaction avoiding inefficiency due to inability to interact, and reducing processing pressure.
  • the above video interface display method can be run in a client running by the device terminal 101a.
  • the client may include a video playing client, an instant messaging client, or an SNS (Social Networking Services) client, and the client may process a video interface for playing video.
  • SNS Social Networking Services
  • FIG. 5 is a schematic flowchart diagram of a video interface display method according to an embodiment of the present application. As shown in FIG. 5, the video interface display method may at least include the following steps:
  • the video playback client running on the device terminal 101a receives the web page data corresponding to the link from the server 103a; through a built-in browser, such as Webview Loading the page to be displayed corresponding to the webpage data, and displaying the to-be-displayed page by using the provided page window, wherein the to-be-displayed page may be a webpage page.
  • a built-in browser such as Webview Loading the page to be displayed corresponding to the webpage data, and displaying the to-be-displayed page by using the provided page window, wherein the to-be-displayed page may be a webpage page.
  • the webpage data is used to display a page to be displayed through a page window of the video playing terminal, where the to-be-displayed page includes a target area and other areas except the target area; the target area includes a video interface and a page Interactive element.
  • the target area may also be referred to as a video play area.
  • the target area may include a video interface and a page element, and the video interface may be used to play a video, and the page element may be used to describe related information of the video, such as the remaining playing time of the advertisement, clicking into the advertisement page, or jumping the advertisement, etc.;
  • the area other than the target area may also be referred to as a non-play area, and includes an area other than the target area in the page to be displayed, including a menu bar and associated information of the video program. Wait.
  • the page to be displayed may include a target area 202 (a region indicated by a thick solid line) and a non-target area; wherein the target area 202 includes a video interface 204 and a page element 205;
  • the play area includes a menu bar 201 and associated information 203 of the video interface.
  • the menu bar 201 may be located at the top of the page to be displayed, and the menu bar 201 may include a client identifier of the video playing client, a login button for instructing the login video playing server, or a search engine.
  • Video interface 204 and page element 205 may be located in the same area of the page to be displayed, such as video interface 204 and page element 205 being located below menu bar 201.
  • the association information 203 of the video interface may be located below the video interface, and the association information 203 may include a video name of the video played by the video interface 204, a current play set number, or a total number of play times of the video interface.
  • the client in response to a user play request, wherein the play request may be an operation request for the user to click on the target area, for example, a click operation on the target area, the client may acquire the to-be-displayed Location information and size information of the target area in the page.
  • the location information is coordinate information of the target area relative to the page to be displayed.
  • the location information is coordinate information of an upper left corner of the target area relative to an upper left corner of the page to be displayed. Therefore, in a page to be displayed, the location information of the target area is fixed, that is, the relative position of the target area in the page to be displayed is constant.
  • FIG. 3 shows an example of displaying a page to be displayed.
  • the area indicated by the dotted line frame is the page 301 to be displayed, and the area indicated by the bold solid line frame is the target area 302, wherein the target area is located in the page to be displayed.
  • the position information of the target area 302 can be represented by the coordinates (VideoX, VideoY) of the upper left corner M point 303 with respect to the upper left corner O point 304 of the page 301 to be displayed, wherein the O point is the coordinate origin, and can be seen.
  • the position information of the target area 302, that is, the coordinates of the M point (VideoX, VideoY) is fixed.
  • S503. Determine a to-be-displayed area of the target area in the display screen, and acquire a scroll value of at least one of the to-be-displayed page and the page window based on the to-be-displayed area.
  • the area to be displayed may be a preset area whose size may be determined according to the size of the target area, and its position may be centered in the display screen. Therefore, the video playing client may determine location information and size information of the to-be-displayed area according to the location information and the size information of the target area.
  • the page to be displayed is loaded by a browser built in the video playing client, such as a Webview, and displayed on the display screen through a page window provided by the browser, in some embodiments,
  • the size of the page window is the same as the size of the display screen.
  • the size of the page window may be different from the size of the display screen. Only the content in the page window may be displayed on the display screen. .
  • the initial state of the page to be displayed is that the upper left corner of the page to be displayed overlaps with the upper left corner of the page window; or, if the user performs a scrolling operation on the page to be displayed before the user's play request To browse the page to be displayed, the page to be displayed has a scroll value relative to the page window, and the scroll value may become an initial scroll value. It should be noted that whether the page to be displayed has an initial scroll value has no effect on determining the first scroll value that the page to be displayed needs to move.
  • the initial state is that the upper left corner of the page to be displayed 301 overlaps with the upper left corner of the page window 305, such as a webview, as shown in FIG. , wherein the page window 305 is an area indicated by a solid line frame.
  • the to-be-displayed page 301 has a scroll value relative to the page window, the scrolling The value can be referred to as the initial scroll value, as shown in Figure 3b.
  • the page to be displayed displayed by the client in the display screen may be as shown in FIG. 3 b.
  • the target area 302 Located at the upper portion of the display screen, in order to improve the playback experience, the client can display the target area 302 in the to-be-displayed area of the display screen by moving the to-be-displayed page 301.
  • the area to be displayed is centered on the display screen and the size is the same as the target area.
  • a first scroll value of the page to be displayed is determined.
  • the area to be displayed is located in the center of the screen and is the same size as the target area.
  • the first scroll value that the page to be displayed needs to move may be half of the screen height minus the ordinate in the position information of the target area.
  • newScrollyY represents a first scroll value for determining that the page to be displayed needs to be moved
  • videoY represents the ordinate of the top left corner of the target area
  • webviewHeight represents the height of the display screen
  • videoHeight represents the height of the target area.
  • the first scroll value that the page to be displayed needs to move may be expressed as follows:
  • newScrollyY represents the first scroll value of the page to be displayed that needs to be moved
  • webHeight represents the height of the page to be displayed
  • webviewHeight represents the height of the display screen
  • videoHeight represents the height of the target area
  • step S505 is directly performed; in some examples, if Determining, according to the first scroll value of the page to be displayed, according to the first scroll value of the page to be displayed, according to the first scroll value, the movement of the page to be displayed is not caused to be displayed in the to-be-displayed area.
  • the target area is displayed in the area to be displayed, and the page window needs to move a second scroll value.
  • the page The second scroll value that the face window needs to move can be expressed as follows:
  • int offsetY represents the second scroll value of the page window
  • webviewHeight represents the height of the display screen
  • videoHeight represents the height of the target area
  • videoY represents the ordinate in the position information of the target area
  • ScrollY represents the first scroll value of the page to be displayed.
  • the video playing client moves the to-be-displayed page according to the first scrolling value that the to-be-displayed page needs to move, so that the target area in the moved to-be-displayed page is displayed on the display screen to be displayed. In the area.
  • the video playing client moves the to-be-displayed page according to a first scrolling value that the to-be-displayed page needs to move, and then, based on the second scrolling value that the page window needs to move, to the page.
  • the window is moved so that the target area in the page to be displayed is displayed in the area to be displayed of the display screen.
  • the video playing client moves the to-be-displayed page 301 in the state shown in FIG. 3 in FIG. 3 based on the determined first scrolling value, and the moved to-be-displayed page may be as shown in FIG.
  • the video client may determine that the target area 302 in the page 301 to be displayed after the movement is still not located in the middle area of the display screen, that is, the target area 302 is not located in the display area of the display screen.
  • the video playback client can move the page window 305 such that the moved target area 302 is located in the area to be displayed of the display screen, as shown in d of FIG.
  • the video playback client can fill the preset display information in other areas than the area to be displayed in the display screen.
  • the preset display information may be a black block placeholder, for example, the area in the display screen except the area to be displayed is filled with black.
  • the preset display information may be a preset picture or text, etc., and the video is played.
  • the client may fill the display information corresponding to the to-be-displayed page in the display screen except for the area to be displayed. For example, for different pages to be displayed, different display information may be filled in the display screen except the area to be displayed.
  • the target area 302 is located in the area to be displayed, and other areas 308 outside the target area are filled with preset display information, such as diagonal stripes.
  • the client displays the target area 401 in a preset area to be displayed, and fills the preset display information in the display screen other than the target area.
  • the page to be displayed that fills the preset display information may be displayed in the video interface 404 by using the same layer drawing manner, so that the video interface 404 and the page element 405 are located in the same area to implement page interaction, and The target area is centered and other areas are hidden to improve the playback experience.
  • the target area is displayed in a preset to-be-displayed area, where the target area includes a video interface and a page element, and the area other than the target area in the display screen is filled with preset display information.
  • the user can provide a unified video playing interface to improve the playing experience.
  • support the page interaction avoiding the inefficiency caused by the inability to interact, and reducing the processing pressure.
  • FIG. 6 is a schematic structural diagram of a video interface display device according to an embodiment of the present application.
  • the video interface display device in this embodiment may include at least one or more memories; The above processor; wherein the one or more memories store one or more instruction modules configured to be executed by the one or more processors; wherein the one or more instruction modules comprise: an acquisition unit 601 a determining unit 602, a moving unit 603, and a filling unit 604, wherein:
  • the obtaining unit 601 is configured to obtain a target area in the page to be displayed, where the target area includes a video interface and a page element.
  • the determining unit 602 is configured to determine an area to be displayed of the target area in the display screen, and acquire a scroll value of the page to be displayed based on the to-be-displayed area.
  • the moving unit 603 is configured to move the target area to the area to be displayed based on a scroll value of the page to be displayed.
  • the filling unit 604 is configured to fill preset display information in the display screen except for the area to be displayed.
  • the determining unit 602 acquires a scroll value of the page to be displayed based on the to-be-displayed area, specifically for:
  • the determining unit 602 is further configured to: after updating the scroll value of the page to be displayed based on the to-be-displayed area, determining that the target area is located based on the updated scroll value When the other areas of the display are displayed, the target area is moved such that the moved target area is located in the area to be displayed of the display screen.
  • the updated scroll value of the page to be displayed is expressed as follows:
  • newScrollyY represents the Y value in the scroll value after the page to be displayed is updated
  • videoY represents the original Y value of the target area
  • webviewHeight represents the height of the display screen
  • videoHeight represents the height of the target area
  • newScrollyX represents The X value in the scroll value after the page to be displayed is updated
  • videoX represents the original X value of the target area
  • webviewLength represents the length of the display screen
  • videoLength represents the length of the target area.
  • the updated scroll value of the page to be displayed is expressed as follows:
  • newScrollyY' represents the Y value in the scroll value of the page to be displayed recently updated
  • newScrollyY represents the Y value in the scroll value of the last updated page of the page to be displayed
  • webHeight represents the height of the page to be displayed
  • newScrollyX' indicates the waiting The X value in the scroll value after the most recent update of the page is displayed
  • newScrollyX represents the X value in the scroll value after the last update of the page to be displayed
  • webLength represents the length of the page to be displayed.
  • the determining unit 602 acquires a scroll value of the page to be displayed based on the to-be-displayed area, specifically for:
  • the determining unit 602 is further configured to determine, after updating the scroll value of the target area based on the to-be-displayed area, determining the target area based on the updated scroll value of the target area.
  • the scroll value of the page to be displayed is updated to obtain the updated scroll value of the page to be displayed.
  • the updated scroll value of the target area is expressed as follows:
  • int offsetY represents the Y value in the updated scroll value of the target area
  • webviewHeight represents the height of the display screen
  • videoHeight represents the height of the target area
  • videoY represents the original Y value of the target area
  • ScrollY represents The Y value in the scroll value of the page to be displayed
  • the int offsetX represents the X value in the updated scroll value of the target area
  • the webviewLength represents the length of the display screen
  • the videoLength represents the length of the target area
  • the videoX represents The original X value of the target area
  • ScrollX represents the X value in the scroll value of the page to be displayed.
  • the obtaining unit 601 obtains a target area in the page to be displayed, the target area includes a video interface and a page element, and the determining unit 602 determines the to-be-displayed area of the target area in the display screen, and acquires the to-be-displayed area based on the to-be-displayed area.
  • the scrolling value of the page, the moving unit 603 moves the target area to the area to be displayed based on the scroll value of the page to be displayed, and the filling unit 604 fills the preset display information in other areas except the area to be displayed in the display screen, thereby improving the playing. Experience.
  • FIG. 7 is a schematic structural diagram of a video interface display device provided in an embodiment of the present application.
  • the video interface display device in this embodiment may include at least one or more memories; The above processor; wherein the one or more memories store one or more instruction modules configured to be executed by the one or more processors; wherein the one or more instruction modules comprise: a receiving unit 701 , an obtaining unit 702, a determining unit 703, a moving unit 704, and a filling unit 705, wherein:
  • the receiving unit 701 is configured to receive webpage data, where the webpage data is used to display a page to be displayed through a page window of the video playing terminal.
  • the obtaining unit 702 is configured to obtain information about a target area in a page to be displayed, where the target area includes a video interface and a page interaction element.
  • the determining unit 703 is configured to determine a to-be-displayed area of the target area in the display screen, and acquire a scroll value of at least one of the to-be-displayed page and the page window based on the to-be-displayed area.
  • the mobile unit 704 is configured to move at least one of the to-be-displayed page and the page window to display the target area to the to-be-displayed area in the display screen based on the scroll value.
  • the filling unit 705 is configured to fill preset information other than the area to be displayed in the display screen to hide content in the other area.
  • the determining unit 703 further determines, according to the current first scroll value of the page to be displayed, When the target area is located in the area to be displayed, the page window needs to move a second scroll value; the moving unit 504 further moves the page window to make the target area according to the second scroll value Located in the area to be displayed.
  • the determining unit 703 may further determine, according to the attribute information of the target area, that the page to be displayed needs to be moved when the target area is located in the to-be-displayed area in the display screen.
  • a scrolling value can be expressed as follows:
  • newScrollyY represents a first scroll value for determining that the page to be displayed needs to be moved
  • videoY represents the ordinate of the top left corner of the target area
  • webviewHeight represents the height of the display screen
  • videoHeight represents the height of the target area.
  • the determining unit 703 further determines that the first scroll value that the page to be displayed needs to move may be expressed as follows:
  • newScrollyY represents the first scroll value of the page to be displayed that needs to be moved
  • webHeight represents the height of the page to be displayed
  • webviewHeight represents the height of the display screen
  • videoHeight represents the height of the target area
  • the determining unit 703 further determines that the second scroll value that the page window needs to move may be expressed as follows :
  • int offsetY represents the second scroll value of the page window
  • webviewHeight represents the height of the display screen
  • videoHeight represents the height of the target area
  • videoY represents the ordinate in the position information of the target area
  • ScrollY represents the first scroll value of the page to be displayed.
  • the target area is displayed in a preset to-be-displayed area, where the target area includes a video interface and a page element, and the area other than the target area in the display screen is filled with preset display information.
  • the user can provide a unified video playing interface to improve the playing experience.
  • support the page interaction avoiding the inefficiency caused by the inability to interact, and reducing the processing pressure.
  • FIG. 8 is a schematic structural diagram of a terminal according to an embodiment of the present disclosure.
  • the terminal provided in this embodiment of the present application may be used to implement the method implemented in the embodiment of the present application. Applying the relevant parts of the embodiment, the specific technical details are not For disclosure, please refer to the embodiment of the present application shown in FIG. 1b and FIG. 5.
  • the terminal includes at least one processor 801, such as a CPU, at least one input device 803, at least one output device 804, a memory 805, and at least one communication bus 802.
  • the communication bus 802 is used to implement connection communication between these components.
  • the input device 803 may be a network interface or the like for acquiring a page to be displayed.
  • the output device 804 may specifically be a display screen or the like for displaying a video interface and a page element.
  • the memory 805 may include a high-speed RAM memory, and may also include a non-unstable memory, such as at least one disk memory, specifically for storing a page to be displayed and the like.
  • Memory 805, in some examples, can include at least one storage device located remotely from processor 601.
  • the processor 801 can be combined with the video interface display device shown in FIGS. 6 and 7.
  • a set of program codes is stored in the memory 805, and the processor 801, the input device 803, and the output device 804 call the program code stored in the memory 805 for performing the operations of the various method embodiments described above.
  • terminal introduced in the embodiment of the present application may be used to implement some or all of the processes in the method embodiments introduced in conjunction with FIG. 1b and FIG.
  • the storage medium may be a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).
  • the embodiment of the present application further provides a storage medium in which a data processing program is stored, and the data processing program is used to execute any one of the foregoing methods in the embodiments of the present application.

Abstract

本申请实施例公开了一种视频界面显示方法及装置，所述方法包括：接收网页数据，其中所述网页数据用于通过所述视频播放终端的页面窗口显示待显示页面；获取待显示页面中的目标区域的信息，目标区域包括视频界面和页面交互元素；确定目标区域在显示屏幕中的待显示区域，并基于待显示区域获取待显示页面和所述页面窗口中至少一个的滚动值；基于所述滚动值，移动所述待显示页面和所述页面窗口中至少一个，以将目标区域移动至待显示区域；在显示屏幕中除待显示区域以外的其他区域填充预设的显示信息，以隐藏所述其他区域中的内容。

Description

一种视频界面显示方法及装置
本申请要求于2017年01月05日提交中国专利局、申请号为201710007619.9、申请名称为“一种视频界面显示方法及装置”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请涉及电子技术领域，尤其涉及一种视频界面显示方法、装置。
背景
视频播放客户端(例如腾讯视频播放客户端)可以向用户播放视频，以满足用户需求。为了支持页面交互，视频播放客户端可以将视频界面和页面元素(例如广告跳转按钮，跳过广告按钮等)合成渲染在同一个待显示页面，则用户在观看视频的同时可以点击广告跳转按钮进入广告页面，或者点击跳过广告按钮显示非广告内容，以实现页面交互。
技术内容
本申请实施例提供了一种视频界面显示方法，所述方法包括：
接收网页数据，其中所述网页数据用于通过所述视频播放终端的页面窗口显示待显示页面；
获取待显示页面中的目标区域，所述目标区域包括视频界面和页面交互元素；
确定所述目标区域在显示屏幕中的待显示区域，并基于所述待显 示区域获取所述待显示页面和所述页面窗口中至少一个的滚动值；
基于所述待显示页面的滚动值，移动所述待显示页面和所述页面窗口中至少一个，以将所述目标区域显示至所述显示屏幕中的待显示区域；
在所述显示屏幕中除所述待显示区域以外的其他区域填充预设的显示信息，以隐藏所述其他区域中的内容。
相应地，本申请实施例还提供了一种视频界面显示装置，所述装置包括：
一个或一个以上存储器；
一个或一个以上处理器；其中，
所述一个或一个以上存储器存储有一个或者一个以上指令模块，经配置由所述一个或者一个以上处理器执行；其中，
所述一个或者一个以上指令模块包括：
接收单元，用于接收网页数据，其中所述网页数据用于通过所述视频播放终端的页面窗口显示待显示页面；
获取单元，用于获取待显示页面中的目标区域，所述目标区域包括视频界面和页面交互元素；
确定单元，用于确定所述目标区域在显示屏幕中的待显示区域，并基于所述待显示区域获取所述待显示页面和所述页面窗口中至少一个的滚动值；
移动单元，用于基于所述待显示页面的滚动值，移动所述待显示页面和所述页面窗口中至少一个，以将所述目标区域显示至所述显示屏幕中的待显示区域；
填充单元，用于在所述显示屏幕中除所述待显示区域以外的其他区域填充预设的显示信息，以隐藏所述其他区域中的内容。
本申请实施例还提出了一种非易失性计算机可读存储介质，存储有计算机可读指令，可以使至少一个处理器执行以上所述的方法。
附图简要说明
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图；
图1a是本申请实施例中提供的一种视频界面显示方法所适用的网络结构示意图；
图1b是本申请实施例中提供的一种视频界面显示方法的流程示意图；
图2是本申请实施例中提供的一种待显示页面的界面示意图；
图3是本申请另一实施例中提供的一种界面示意图；
图4是本申请另一实施例中提供的一种界面示意图；
图5是本申请实施例中提供的一种视频界面显示方法的流程示意图；
图6是本申请实施例中提供的一种视频界面显示装置的结构示意图；
图7是本申请实施例中提供的一种视频界面显示装置的结构示意图；以及
图8是本申请实施例中提供的一种设备终端的结构示意图。
具体实施方式
下面将结合本实施例中的附图，对本实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
本申请实施例提供了一种视频界面显示方法，本将目标区域显示至预设的待显示区域中，其中，目标区域包括视频界面和页面交互元素，并将显示屏幕中除目标区域以外的区域填充预设的显示信息，一方面可以向用户提供统一的视频播放界面，提高了播放体验，另一方面，支持页面交互，避免由于无法交互带来的效率低下，减少了处理压力。
图1a示出了本申请实施例提供的视频界面显示方法所适用的网络结构图。如图1a所示，此网络结构图100至少包括：设备终端101a、网络102a和服务器103a。
上述设备终端101a可以是个人电脑、智能手机(如Android手机、iOS手机等)、平板电脑、掌上电脑、移动互联网设备(MID，Mobile Internet Devices)或穿戴式智能设备等设备终端，其上可以运行各种客户端，比如视频播放客户端等。其中，设备终端101a上运行的客户端通过内置浏览器加载并显示待显示页面104a。
网络102a可以包括有线网络和无线网络。如图1a所示，在接入网一侧，设备终端101a可以通过无线的方式或者有线的方式接入到网络102a；而在核心网一侧，服务器103a一般是通过有线方式连接到网络102a的。当然，服务器103a也可以通过无线方式连接到网络102a。
服务器103a可以是为应用服务器，比如视频播放服务器，与设备终端101a的客户端一起为用户提供服务，例如，为用户播放视频 等。服务器103a可以是单独的服务器也可以是多个服务器组成的集群服务器。
本申请实施例提供了一种视频界面显示方法，获取待显示页面中的目标区域，目标区域包括视频界面和页面元素，确定目标区域在显示屏幕中的待显示区域，并基于待显示区域获取待显示页面的滚动值，基于待显示页面的滚动值，将目标区域移动至待显示区域，在显示屏幕中除待显示区域以外的其他区域填充预设的显示信息，可提高播放体验。
如前所述，上述视频界面显示方法可以运行在个人电脑、智能手机(如Android手机、iOS手机等)、平板电脑、掌上电脑、移动互联网设备(MID，Mobile Internet Devices)或穿戴式智能设备等终端运行的客户端中。客户端可以包括视频播放客户端、即时通信客户端或者SNS(Social Networking Services，社会性网络服务)客户端等，该客户端可以显示视频界面，该视频界面用于播放视频。
请参见图1b，图1b是本发明实施例公开的一种视频界面显示方法的流程示意图。如图1b所示，该视频界面显示方法至少可以包括以下步骤：
S101b，获取待显示页面中的目标区域，目标区域包括视频界面和页面元素。
终端可以获取待显示页面中的目标区域，其中目标区域可以包括视频界面和页面元素，视频界面可以用于播放视频，页面元素可以用于描述该视频的相关信息，例如广告剩余播放时长、点击进入广告页面或者跳转广告等。具体实现中，终端可以通过用户输入的关键字搜索得到待显示页面，可选的，终端还可以在检测到用户对访问路径或者地址信息等的点击操作时，获取该访问路径或者地址信息对应的待显示页面。
以图2所示的待显示页面的界面示意图为例，待显示页面可以包括菜单栏201、视频界面204、页面元素205以及该视频界面的关联 信息203。其中，菜单栏201可以位于待显示页面的顶端，菜单栏可以包括视频播放客户端的客户端标识、用于指示登录视频播放服务器的登录按钮或者搜索引擎等。视频界面204和页面元素205可以位于待显示页面的同一区域中，例如视频界面204和页面元素205位于菜单栏的下方。该视频界面的关联信息203可以位于视频界面204的下方，关联信息203可以包括该视频界面204所播放视频的视频名称、当前播放集数或者该视频界面的播放次数总和等。终端获取到待显示页面之后，可以获取待显示页面中包含视频界面204和页面元素205的区域，并将该区域作为目标区域202。
S102b，确定目标区域在显示屏幕中的待显示区域，并基于待显示区域获取待显示页面的滚动值。
终端可以确定目标区域在显示屏幕中的待显示区域，并基于待显示区域获取待显示页面的滚动值。其中，滚动值用于指示待显示页面中各个区域的位置，基于待显示区域获取的待显示页面的滚动值可以为更新后的待显示页面的滚动值。
示例性的，在待显示页面的排版中，菜单栏位于待显示页面的顶端，目标区域位于菜单栏的下方，基于待显示页面的初始滚动值，终端在显示屏幕中显示的待显示页面可以如图2中的左图所示。待显示页面的高度大于显示屏幕的高度，显示屏幕无法完整显示整个待显示页面，为了提高播放体验，终端可以将目标区域显示在显示屏幕的待显示区域，其中待显示区域可以为终端预先设置的区域，例如待显示区域可以为显示屏幕的中间区域，进一步的，终端可以获取目标区域位于待显示区域时待显示页面的滚动值。
可选的，终端可以基于待显示区域对待显示页面的滚动值进行更新，得到待显示页面更新后的滚动值。
以图3所示的界面示意图为例，第一区域301可以表示完整的待显示页面，例如网页；第二区域302可以表示目标区域，即包含视频界面和页面元素的区域；第三区域305可以作为待显示页面显示的视 口，所述视口可以是一个页面窗口，比如视频播放客户端内置的浏览器Webview提供的用于显示其加载的待显示页面的页面窗口，该视口的大小一般和所述显示屏幕的大小相同，位于所述视口的页面内容可以显示在显示屏幕中。终端可以基于待显示区域对待显示页面的滚动值进行更新，得到待显示页面更新后的滚动值，例如终端可以将待显示页面进行移动，使得目标区域位于待显示区域。
可选的，待显示页面更新后的滚动值可以表示如下：
newScrollyY＝videoY-(webviewHeight-videoHeight)/2
newScrollyX＝videoX-(webviewLength-videoLength)/2
其中，newScrollyY表示待显示页面更新后的滚动值中的Y值，videoY表示目标区域的原Y值，webviewHeight表示显示屏幕的高度，videoHeight表示目标区域的高度；newScrollyX表示待显示页面更新后的滚动值中的X值，videoX表示目标区域的原X值，webviewLength表示显示屏幕的长度，videoLength表示目标区域的长度。
可选的，待显示页面更新后的滚动值可以表示如下：
newScrollyY′＝min(max(0,newScrollyY),webHeight)
newScrollyX′＝min(max(0,newScrollyX),webLength)
其中，newScrollyY′表示待显示页面最近更新后的滚动值中的Y值，newScrollyY表示待显示页面上一次更新后的滚动值中的Y值，webHeight表示待显示页面的高度；newScrollyX′表示待显示页面最近更新后的滚动值中的X值，newScrollyX表示待显示页面上一次更新后的滚动值中的X值，webLength表示待显示页面的长度。
本发明实施例通过再次对待显示页面的滚动值进行更新，可确保基于更新后的待显示页面的滚动值，目标区域位于待显示页面中。
可选的，终端基于待显示区域对待显示页面的滚动值进行更新之后，当基于更新后的滚动值确定目标区域位于显示屏幕的其他区域中时，终端可以对目标区域进行移动，使得移动后的目标区域位于显示屏幕的待显示区域中。
以图3所示的界面示意图为例，终端基于更新后的待显示页面的滚动值对图3中处于第一状态的待显示页面进行移动，移动后的待显示页面可以如图3中处于第二状态的待显示页面所示，终端可以确定移动后的待显示页面中第二区域302位于显示屏幕的上方，并非位于显示屏幕的中间区域，即第二区域302位于显示屏幕的其他区域，则终端可以对第二区域302进行移动，使得移动后的第二区域302位于显示屏幕的待显示区域中。
可选的，目标区域更新后的滚动值可以表示如下：
int offsetY＝(webviewHeight-videoHeight)/2-videoY+ScrollY
int offsetX＝(webviewLength-videoLength)/2-videoX+ScrollX
其中，int offsetY表示目标区域更新后的滚动值中的Y值，webviewHeight表示显示屏幕的高度，videoHeight表示目标区域的高度，videoY表示目标区域的原Y值，ScrollY表示待显示页面的滚动值中的Y值；int offsetX表示目标区域更新后的滚动值中的X值，webviewLength表示显示屏幕的长度，videoLength表示目标区域的长度，videoX表示目标区域的原X值，ScrollX表示待显示页面的滚动值中的X值。
可选的，终端可以基于待显示区域，对目标区域的滚动值进行更新，得到目标区域更新后的滚动值。具体实现中，终端可以基于待显示区域，对目标区域的滚动值进行更新，使得基于目标区域更新后的滚动值，目标区域可以移动至待显示区域。
可选的，终端基于待显示区域，对目标区域的滚动值进行更新之后，当基于目标区域更新后的滚动值确定目标区域位于显示屏幕的其他区域中时，终端可以对待显示页面的滚动值进行更新，得到待显示页面更新后的滚动值。
需要说明的是，本发明实施例将目标区域移动至待显示区域的方式包含但不局限于：对待显示页面的滚动值进行更新；或者对目标区域相对待显示页面的位置进行更新；或者对待显示页面的滚动值进行 更新之后，对目标区域相对待显示页面的位置进行更新；或者对目标区域相对待显示页面的位置进行更新之后，对待显示页面的滚动值进行更新。
S103b，基于待显示页面的滚动值，将目标区域移动至待显示区域。
终端可以基于待显示页面的滚动值，将目标区域移动至待显示区域。以图3所示的界面示意图为例，移动至第三区域305的第二区域302可以如图3中第三状态的待显示页面所示。
S104b，在显示屏幕中除待显示区域以外的其他区域填充预设的显示信息。
终端可以在显示屏幕中除待显示区域以外的其他区域填充预设的显示信息。其中，预设的显示信息可以为黑块占位符，例如将显示屏幕中除待显示区域以外的其他区域填充黑色。可选的，预设的显示信息可以为预先设定的图片或者文字等，终端可以在显示屏幕中除待显示区域以外的其他区域填充待显示页面对应的显示信息，例如对于不同待显示页面，可以在显示屏幕中除待显示区域以外的其他区域填充不同的显示信息。
以图4所示的界面示意图为例，终端将目标区域401移动至待显示区域，并在显示屏幕中除待显示区域以外的其他区域402填充预设的显示信息，填充预设的显示信息的待显示页面可以如图4所示，在视频界面404使用同层绘制的方式显示页面元素405，使得视频界面404和页面元素405位于同一区域，实现页面交互，另外将视频界面404居中显示，同时隐藏其他区域，可提高播放体验。
本发明实施例中，获取待显示页面中的目标区域，确定目标区域在显示屏幕中的待显示区域，并基于待显示区域获取待显示页面的滚动值，基于待显示页面的滚动值，将目标区域移动至待显示区域，在显示屏幕中除待显示区域以外的其他区域填充预设的显示信息，通过在待显示区域显示视频界面和页面元素，可提高播放体验。
本申请实施例提供了一种视频界面显示方法，将目标区域显示至预设的待显示区域中，其中，目标区域包括视频界面和页面交互元素，并将显示屏幕中除目标区域以外的其他区域填充预设的显示信息，一方面可以向用户提供统一的视频播放界面，提高了播放体验，另一方面，支持页面交互，避免由于无法交互带来的效率低下，减少了处理压力。
上述视频界面显示方法可以运行设备终端101a运行的客户端中。客户端可以包括视频播放客户端、即时通信客户端或者SNS(Social Networking Services，社会性网络服务)客户端等，该客户端可以处理视频界面，该视频界面用于播放视频。
请参见图5，图5是本申请实施例公开的一种视频界面显示方法的流程示意图。如图5所示，该视频界面显示方法至少可以包括以下步骤：
S501，接收网页数据。
在一些实施例中，响应于用户的对某一链接的点击操作，设备终端101a上运行的所述视频播放客户端从服务器103a接收所述链接对应的网页数据；通过内置的浏览器，比如Webview加载所述网页数据对应的待显示页面，并利用其提供的页面窗口显示所述待显示页面，其中，所述待显示页面可以是一个网页页面。
这里，所述网页数据用于通过视频播放终端的页面窗口显示待显示页面，所述待显示页面中包含目标区域和除了所述目标区域之外的其他区域；所述目标区域包括视频界面和页面交互元素。
在一些实施例中，所述目标区域也可以称为视频播放区域。所述目标区域可以包括视频界面和页面元素，视频界面可以用于播放视频，页面元素可以用于描述该视频的相关信息，例如广告剩余播放时长、点击进入广告页面或者跳转广告等；如前所述，所述除了目标区域之外的其他区域也可以称为非播放区域，包含所述待显示页面中除去所述目标区域之外的区域，包括菜单栏和所述视频节目的关联信息 等。
以图2所示的待显示页面的界面示意图为例，待显示页面可以包括目标区域202(粗实线所示区域)和非目标区域；其中目标区域202包括视频界面204、页面元素205；非播放区域包括菜单栏201以及该视频界面的关联信息203。其中，菜单栏201可以位于待显示页面的顶端，菜单栏201可以包括视频播放客户端的客户端标识、用于指示登录视频播放服务器的登录按钮或者搜索引擎等。视频界面204和页面元素205可以位于待显示页面的同一区域中，例如视频界面204和页面元素205位于菜单栏201的下方。该视频界面的关联信息203可以位于视频界面的下方，关联信息203可以包括该视频界面204所播放视频的视频名称、当前播放集数或者该视频界面的播放次数总和等。终端获取到待显示页面之后，可以获取待显示页面中包含视频界面204和页面元素205的区域，并将该区域作为目标区域202。
S502，获取所述待显示页面中的所述目标区域的位置信息和大小信息。
在一些实例中，响应于用户播放请求，其中，所述播放请求可以为用户点击所述目标区域的操作请求，例如，对所述目标区域的点击操作，所述客户端可以获取所述待显示页面中的所述目标区域的位置信息和大小信息。上述位置信息是所述目标区域相对于所述待显示页面的坐标信息，在一些实施例中，所述位置信息是所述目标区域的左上角相对于所述待显示页面的左上角的坐标信息，因此在一个待显示页面内，目标区域的位置信息是固定不变的，即所述目标区域在待显示页面中的相对位置是不变的。
图3示出了展示待显示页面的一个示例。如图3中的a图所示：虚线框所示区域为待显示页面301，而加粗实线框所示区域为目标区域302，其中，目标区域位于待显示页面内。目标区域302的位置信息可以用其左上角M点303相对于待显示页面301的左上角O点304的坐标(VideoX，VideoY)来表示，其中，O点为坐标原点，可以看 出，待显示页面301内，目标区域302的位置信息，也即M点的坐标(VideoX，VideoY)是固定不变的。
S503，确定所述目标区域在显示屏幕中的待显示区域，并基于所述待显示区域获取所述待显示页面和所述页面窗口中至少一个的滚动值。
在一些实例中，所述待显示区域可以为预先设置的区域，其大小可以根据所述目标区域的大小确定，其位置可以居中于所述显示屏幕中。因此，所述视频播放客户端可以根据所述目标区域的位置信息和大小信息，确定所述待显示区域的位置信息和大小信息。
在一些实施例中，所述待显示页面由所述视频播放客户端内置的浏览器比如Webview加载，并通过上述浏览器提供的页面窗口在显示屏幕上进行显示，在一些实施例中，所述页面窗口的大小与所述显示屏幕的大小相同，当然，所述页面窗口的大小与所述显示屏幕的大小也可以不同，只有在所述页面窗口中的内容才有可能在显示屏幕中显示出来。所述待显示页面被显示的初始状态为所述待显示页面的左上角与所述页面窗口的左上角重叠；或者，如果在用户的播放请求前，用户对所述待显示页面进行了滚动操作以对所述待显示页面进行浏览，所述待显示页面相对于所述页面窗口会有一个滚动值，这个滚动值可以成为初始滚动值。需要说明的是，所述待显示页面是否有一个初始滚动值，对于确定待显示页面需要移动的第一滚动值没有影响。
仍以图3为例，所述待显示页面301加载完成后，初始状态为所述待显示页面301的左上角与所述页面窗口305比如webview的左上角重叠，如图3中a图所示，其中，页面窗口305为实线框所示区域。如果在用户的播放请求前，用户通过所述待显示页面301的滚动操作对所述待显示页面301进行了浏览，所述待显示页面301相对于所述页面窗口会有一个滚动值，该滚动值可以称为初始滚动值，也即如图3中b图所示。基于所述待显示页面的初始滚动值，客户端在显示屏幕中显示的待显示页面可以如图3中的b图所示。所述目标区域302 位于显示屏幕的上部，为了提高播放体验，客户端可以通过移动待显示页面301将目标区域302显示在所述显示屏幕的待显示区域中。在一些实例中，待显示区域居中于显示屏幕，大小和目标区域相同。
在一些实例中，根据所述目标区域的位置和大小信息，为了使所述目标区域显示于所述待显示区域，确定所述待显示页面的第一滚动值。在一些实施例中，假设所述待显示区域位于屏幕正中，且大小与目标区域相同。此时，为使所述目标区域显示于所述待显示区域，所述待显示页面需要移动的第一滚动值可以为所述屏幕高度的一半减去所述目标区域的位置信息中的纵坐标与所述目标区域的高度的和，经过整理可以表示如下：
newScrollyY＝videoY-(webviewHeight-videoHeight)/2
其中，newScrollyY表示确定所述待显示页面需要移动的第一滚动值，videoY表示所述目标区域的左上角顶点的纵坐标，webviewHeight表示显示屏幕的高度，videoHeight表示所述目标区域的高度。
在一些实施例中，由于newScrollyY可能为负值，因此，所述待显示页面需要移动的第一滚动值可以表示如下：
newScrollyY＝min(max(0,video–(webviewHeight-videoHeight)/2),webHeight)
其中，newScrollyY表示所述待显示页面需要移动的第一滚动值，webHeight表示待显示页面的高度,webviewHeight表示显示屏幕的高度，videoHeight表示所述目标区域的高度。
在一些实施例中，如果通过根据所述第一滚动值对所述待显示页面的移动，使得所述目标区域位于所述待显示区域中，则直接执行步骤S505；在一些实例中，如果通过根据所述第一滚动值对所述待显示页面的移动，没有使得所述目标区域显示于所述待显示区域中，则进一步根据所述待显示页面的第一滚动值，确定为了使所述目标区域显示于所述待显示区域，所述页面窗口需要移动的第二滚动值。
在一些实例中，为使所述目标区域位于所述待显示区域，所述页 面窗口需要移动的第二滚动值可以表示如下：
int offsetY＝(webviewHeight-videoHeight)/2-videoY+ScrollY
其中，int offsetY表示页面窗口的第二滚动值，webviewHeight表示显示屏幕的高度，videoHeight表示目标区域的高度，videoY表示目标区域的位置信息中的纵坐标，ScrollY表示待显示页面的第一滚动值。
S504，基于所述滚动值，移动所述待显示页面和所述页面窗口中至少一个，以将所述目标区域显示至所述显示屏幕中的待显示区域。
在一些实例中，所述视频播放客户端根据所述待显示页面需要移动的第一滚动值，移动所述待显示页面，使得移动后的待显示页面中的目标区域显示于显示屏幕的待显示区域中。
在一些实例中，所述视频播放客户端根据所述待显示页面需要移动的第一滚动值，移动所述待显示页面，然后基于所述页面窗口需要移动的第二滚动值，对所述页面窗口进行移动，以使待显示页面中的目标区域显示于显示屏幕的待显示区域中。
仍以图3为例，所述视频播放客户端基于确定的第一滚动值对图3中处于图b所示状态的待显示页面301进行移动，移动后的待显示页面可以如图3中c图所示状态的待显示页面所示，视频客户端可以确定移动后的待显示页面301中目标区域302仍然没有位于显示屏幕的中间区域，即目标区域302没有位于显示屏幕的待显示区域，则视频播放客户端可以对页面窗口305进行移动，使得移动后的目标区域302位于显示屏幕的待显示区域中，如图3中的d图所示。
S505，在显示屏幕中除目标区域以外的其他区域填充预设的显示信息，以隐藏所述其他区域中的内容。
视频播放客户端可以在显示屏幕中除待显示区域以外的其他区域填充预设的显示信息。其中，预设的显示信息可以为黑块占位符，例如将显示屏幕中除待显示区域以外的其他区域填充黑色。在一些实例中，预设的显示信息可以为预先设定的图片或者文字等，视频播放 客户端可以在显示屏幕中除待显示区域以外的其他区域填充待显示页面对应的显示信息，例如对于不同待显示页面，可以在显示屏幕中除待显示区域以外的其他区域填充不同的显示信息。
以图3为例，以图3中的e图为例，目标区域302位于待显示区域中，则在目标区域以外的其他区域308，填充预设显示信息，比如斜条纹。
更进一步的，以图4所示的界面示意图为例，客户端将目标区域401显示在预设的待显示区域，并在显示屏幕中除目标区域以外的其他区域402填充预设的显示信息，填充预设的显示信息的待显示页面可以如图4所示，在视频界面404使用同层绘制的方式显示页面元素405，使得视频界面404和页面元素405位于同一区域，实现页面交互，另外将目标区域居中显示，同时隐藏其他区域，可提高播放体验。
本申请实施例中，将目标区域显示至预设的待显示区域中，其中，目标区域包括视频界面和页面元素，并将显示屏幕中除目标区域以外的区域填充预设的显示信息，一方面可以向用户提供统一的视频播放界面，提高了播放体验，另一方面，支持页面交互，避免由于无法交互带来的效率低下，减少了处理压力。
请参见图6，图6是本申请实施例中提供的一种视频界面显示装置的结构示意图，如图所示本实施例中的视频界面显示装置至少可以包括一个或一个以上存储器；一个或一个以上处理器；其中，所述一个或一个以上存储器存储有一个或者一个以上指令模块，经配置由所述一个或者一个以上处理器执行；其中，所述一个或者一个以上指令模块包括：获取单元601、确定单元602、移动单元603以及填充单元604，其中：
获取单元601，用于获取待显示页面中的目标区域，所述目标区域包括视频界面和页面元素。
确定单元602，用于确定所述目标区域在显示屏幕中的待显示区域，并基于所述待显示区域获取所述待显示页面的滚动值。
移动单元603，用于基于所述待显示页面的滚动值，将所述目标区域移动至所述待显示区域。
填充单元604，用于在所述显示屏幕中除所述待显示区域以外的其他区域填充预设的显示信息。
在一些实施例中，所述确定单元602基于所述待显示区域获取所述待显示页面的滚动值，具体用于：
基于所述待显示区域对所述待显示页面的滚动值进行更新，得到所述待显示页面更新后的滚动值。
在一些实施例中，所述确定单元602，还用于基于所述待显示区域对所述待显示页面的滚动值进行更新之后，当基于所述更新后的滚动值确定所述目标区域位于所述显示屏幕的其他区域中时，对所述目标区域进行移动，使得移动后的目标区域位于所述显示屏幕的待显示区域中。
在一些实施例中，所述待显示页面更新后的滚动值表示如下：
newScrollyY＝videoY-(webviewHeight-videoHeight)/2
newScrollyX＝videoX-(webviewLength-videoLength)/2
其中，newScrollyY表示所述待显示页面更新后的滚动值中的Y值，videoY表示所述目标区域的原Y值，webviewHeight表示所述显示屏幕的高度，videoHeight表示所述目标区域的高度；newScrollyX表示所述待显示页面更新后的滚动值中的X值，videoX表示所述目标区域的原X值，webviewLength表示所述显示屏幕的长度，videoLength表示所述目标区域的长度。
在一些实施例中，所述待显示页面更新后的滚动值表示如下：
newScrollyY′＝min(max(0,newScrollyY),webHeight)
newScrollyX′＝min(max(0,newScrollyX),webLength)
其中，newScrollyY′表示所述待显示页面最近更新后的滚动值中的Y值，newScrollyY表示所述待显示页面上一次更新后的滚动值中的Y值，webHeight表示所述待显示页面的高度；newScrollyX′表示所述待 显示页面最近更新后的滚动值中的X值，newScrollyX表示所述待显示页面上一次更新后的滚动值中的X值，webLength表示所述待显示页面的长度。
在一些实施例中，所述确定单元602基于所述待显示区域获取所述待显示页面的滚动值，具体用于：
基于所述待显示区域，对所述目标区域的滚动值进行更新，得到所述目标区域更新后的滚动值。
在一些实施例中，所述确定单元602，还用于基于所述待显示区域，对所述目标区域的滚动值进行更新之后，当基于所述目标区域更新后的滚动值确定所述目标区域位于所述显示屏幕的其他区域中时，对所述待显示页面的滚动值进行更新，得到所述待显示页面更新后的滚动值。
在一些实施例中，所述目标区域更新后的滚动值表示如下：
int offsetY＝(webviewHeight-videoHeight)/2-videoY+ScrollY
int offsetX＝(webviewLength-videoLength)/2-videoX+ScrollX
其中，int offsetY表示所述目标区域更新后的滚动值中的Y值，webviewHeight表示所述显示屏幕的高度，videoHeight表示所述目标区域的高度，videoY表示所述目标区域的原Y值，ScrollY表示所述待显示页面的滚动值中的Y值；int offsetX表示所述目标区域更新后的滚动值中的X值，webviewLength表示所述显示屏幕的长度，videoLength表示所述目标区域的长度，videoX表示所述目标区域的原X值，ScrollX表示所述待显示页面的滚动值中的X值。
本发明实施例中，获取单元601获取待显示页面中的目标区域，目标区域包括视频界面和页面元素，确定单元602确定目标区域在显示屏幕中的待显示区域，并基于待显示区域获取待显示页面的滚动值，移动单元603基于待显示页面的滚动值，将目标区域移动至待显示区域，填充单元604在显示屏幕中除待显示区域以外的其他区域填充预设的显示信息，可提高播放体验。
请参见图7，图7是本申请实施例中提供的一种视频界面显示装置的结构示意图，如图所示本实施例中的视频界面显示装置至少可以包括一个或一个以上存储器；一个或一个以上处理器；其中，所述一个或一个以上存储器存储有一个或者一个以上指令模块，经配置由所述一个或者一个以上处理器执行；其中，所述一个或者一个以上指令模块包括：接收单元701、获取单元702、确定单元703、移动单元704以及填充单元705，其中：
接收单元701，用于接收网页数据，其中所述网页数据用于通过所述视频播放终端的页面窗口显示待显示页面。
获取单元702，用于获取待显示页面中的目标区域的信息，所述目标区域包括视频界面和页面交互元素。
确定单元703，用于确定所述目标区域在显示屏幕中的待显示区域，并基于所述待显示区域获取所述待显示页面和所述页面窗口中至少一个的滚动值。
移动单元704，用于基于所述滚动值，移动所述待显示页面和所述页面窗口中至少一个，以将所述目标区域显示至所述显示屏幕中的待显示区域。
填充单元705，用于在所述显示屏幕中除所述待显示区域以外的其他区域填充预设的显示信息，以隐藏所述其他区域中的内容。
在一些实例中，如果通过待显示页面的移动，没有使得所述目标区域位于所述待显示区域中，所述确定单元703，进一步根据所述待显示页面当前的第一滚动值，确定为了使所述目标区域位于所述待显示区域时，所述页面窗口需要移动的第二滚动值；所述移动单元504，进一步根据所述第二滚动值，移动所述页面窗口以使所述目标区域位于所述待显示区域中。
在一些实例中，所述确定单元703，进一步根据所述目标区域的属性信息，可以确定为了使所述目标区域位于显示屏幕中的所述待显示区域时，所述待显示页面需要移动的第一滚动值，可以表示如下：
newScrollyY＝videoY-(webviewHeight-videoHeight)/2
其中，newScrollyY表示确定所述待显示页面需要移动的第一滚动值，videoY表示所述目标区域的左上角顶点的纵坐标，webviewHeight表示显示屏幕的高度，videoHeight表示所述目标区域的高度。
在一些实例中，由于确定的第一滚动值newScrollyY可能为负值，因此，所述确定单元703，进一步确定所述待显示页面需要移动的第一滚动值可以表示如下：
newScrollyY＝min(max(0,video–(webviewHeight-videoHeight)/2),webHeight)
其中，newScrollyY表示所述待显示页面需要移动的第一滚动值，webHeight表示待显示页面的高度,webviewHeight表示显示屏幕的高度，videoHeight表示所述目标区域的高度。
在一些实例中，如果通过待显示页面的移动，没有使得所述目标区域位于所述待显示区域中，所述确定单元703，进一步确定，所述页面窗口需要移动的第二滚动值可以表示如下：
int offsetY＝(webviewHeight-videoHeight)/2-videoY+ScrollY
其中，int offsetY表示页面窗口的第二滚动值，webviewHeight表示显示屏幕的高度，videoHeight表示目标区域的高度，videoY表示目标区域的位置信息中的纵坐标，ScrollY表示待显示页面的第一滚动值。
本申请实施例中，将目标区域显示至预设的待显示区域中，其中，目标区域包括视频界面和页面元素，并将显示屏幕中除目标区域以外的区域填充预设的显示信息，一方面可以向用户提供统一的视频播放界面，提高了播放体验，另一方面，支持页面交互，避免由于无法交互带来的效率低下，减少了处理压力。
请参见图8，图8为本申请实施例提供的一种终端的结构示意图，本申请实施例提供的终端可以用于实施本申请实施例实现的方法，为了便于说明，仅示出了与本申请实施例相关的部分，具体技术细节未 揭示的，请参照图1b和图5所示的本申请实施例。
如图8所示，该终端包括：至少一个处理器801，例如CPU，至少一个输入装置803，至少一个输出装置804，存储器805，至少一个通信总线802。其中，通信总线802用于实现这些组件之间的连接通信。其中，输入装置803具体可以为网络接口等，用于获取待显示页面。其中，输出装置804具体可以为显示屏幕等，用于显示视频界面和页面元素。其中，存储器805可能包含高速RAM存储器，也可能还包括非不稳定的存储器，例如至少一个磁盘存储器，具体用于存储待显示页面等。存储器805在一些实例中可以包含至少一个位于远离前述处理器601的存储装置。处理器801可以结合图6和图7所示的视频界面显示装置。存储器805中存储一组程序代码，且处理器801、输入装置803以及输出装置804调用存储器805中存储的程序代码，用于执行上述各方法实施例的操作。
具体的，本申请实施例中介绍的终端可以用以实施本申请结合图1b和图5介绍的方法实施例中的部分或全部流程。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。
因此，本申请实施例还提供了一种存储介质，其中存储有数据处理程序，该数据处理程序用于执行本申请实施例上述方法的任何一种实施例。
以上所揭露的仅为本申请较佳实施例而已，当然不能以此来限定本申请之权利范围，因此依本申请权利要求所作的等同变化，仍属本申请所涵盖的范围。

Claims (15)

  1. 一种视频界面显示方法，应用于视频播放终端，所述方法包括：
    接收网页数据，其中所述网页数据用于通过所述视频播放终端的页面窗口显示待显示页面；
    获取待显示页面中的目标区域的信息，所述目标区域包括视频界面和页面交互元素；
    确定所述目标区域在显示屏幕中的待显示区域，并基于所述待显示区域获取所述待显示页面和所述页面窗口中至少一个的滚动值；
    基于所述滚动值，移动所述待显示页面和所述页面窗口中至少一个，以将所述目标区域显示至所述显示屏幕中的待显示区域；
    在所述显示屏幕中除所述待显示区域以外的其他区域填充预设的显示信息，以隐藏所述其他区域中的内容。
  2. 如权利要求1所述的方法，其中获取待显示页面中的目标区域的信息包括：
    获取所述目标区域的位置信息和大小信息，其中所述位置信息包括所述目标区域的一个顶点在坐标系中的横坐标和纵坐标，所述坐标系以所述待显示页面的一个顶点为原点；所述目标区域的大小信息包括：所述目标区域的高度。
  3. 如权利要求2所述的方法，所述确定所述待显示页面和页面窗口中至少一个的滚动值包括：
    根据所述目标区域的位置信息，确定为了使所述目标区域显示在预设的待显示区域，所述待显示页面的第一滚动值。
  4. 如权利要求2所述方法，所述确定所述待显示页面和页面窗口中至少一个的滚动值包括：
    确定所述待显示页面的第一滚动值；
    根据所述待显示页面的第一滚动值，确定为了使所述目标区域显示于所述待显示区域，所述页面窗口的第二滚动值。
  5. 如权利要求3或4所述的方法，其中，所述第一滚动值表示如下：
    newScrollyY＝videoY-(webviewHeight-videoHeight)/2；
    其中，newScrollyY表示所述待显示页面需要移动的第一滚动值，videoY表示所述目标区域的位置信息中的纵坐标，webviewHeight表示所显示屏幕的高度，videoHeight表示所述目标区域的高度。
  6. 如权利要求3或4所述的方法，其中，所述第一滚动值表示如下：
    newScrollyY＝min(max(0,videoY-(webviewHeight-videoHeight)/2),webHeight)；
    其中，newScrollyY表示所述待显示页面需要移动的第一滚动值，videoY表示所述目标区域的位置信息中的纵坐标，webviewHeight表示所述显示屏幕的高度，videoHeight表示所述目标区域的高度；webHeight表示所述待显示页面的高度，min()表示取最小值，max()表示取最大值。
  7. 如权利要求4所述的方法，其中，所述页面窗口的第二滚动值表示如下：
    int offsetY＝(webviewHeight-videoHeight)/2-videoY+ScrollY
    其中，int offsetY表示所述页面窗口的第二滚动值，webviewHeight表示所述显示屏幕的高度，videoHeight表示所述目标区域的高度，videoY表示所述目标区域的位置信息中的纵坐标，ScrollY表示所述待显示页面的第一滚动值。
  8. 一种视频界面显示装置，所述装置包括：
    一个或一个以上存储器；
    一个或一个以上处理器；其中，
    所述一个或一个以上存储器存储有一个或者一个以上指令模块，经配置由所述一个或者一个以上处理器执行；其中，
    所述一个或者一个以上指令模块包括：
    接收单元，用于接收网页数据，其中所述网页数据用于通过所述视频播放终端的页面窗口显示待显示页面；
    获取单元，用于获取待显示页面中的目标区域的信息，所述目标区域包括视频界面和页面交互元素；
    确定单元，用于确定所述目标区域在显示屏幕中的待显示区域，并基于所述待显示区域获取所述待显示页面和所述页面窗口中至少一个的滚动值；
    移动单元，用于基于所述滚动值，移动所述待显示页面和所述页面窗口中至少一个，以将所述目标区域显示至所述显示屏幕中的待显示区域；以及
    填充单元，用于在所述显示屏幕中除所述待显示区域以外的其他区域填充预设的显示信息，以隐藏所述其他区域中的内容。
  9. 如权利要求8所述的装置，其中，
    所述获取单元，获取所述目标区域的位置信息和大小信息，其中所述位置信息包括所述目标区域的一个顶点在坐标系中的横坐标和纵坐标，所述坐标系以所述待显示页面的一个顶点为原点；所述目标区域的大小信息包括：所述目标区域的高度。
  10. 如权利要求9所述的装置，其中，所述确定单元，进一步根据所述目标区域的位置信息，确定为了使所述目标区域显示在预设的待显示区域，所述待显示页面的第一滚动值。
  11. 如权利要求9所述的装置，其中，所述确定单元，确定所述待显示页面的第一滚动值；
    根据所述待显示页面的第一滚动值，确定为了使所述目标区域显示于所述待显示区域，所述页面窗口的第二滚动值。
  12. 如权利要求10或11所述的装置，其中，所述第一滚动值表示如下：
    newScrollyY＝videoY-(webviewHeight-videoHeight)/2；
    其中，newScrollyY表示所述待显示页面需要移动的第一滚动值，videoY表示所述目标区域的位置信息中的纵坐标，webviewHeight表示所述显示屏幕的高度，videoHeight表示所述目标区域的高度。
  13. 如权利要求10或11所述的装置，其中，所述第一滚动值表示如下：
    newScrollyY＝min(max(0,videoY-(webviewHeight-videoHeight)/2),webHeight)；
    其中，newScrollyY表示所述待显示页面需要移动的第一滚动值，videoY表示所述目标区域的位置信息中的纵坐标，webviewHeight表示所述显示屏幕的高度，videoHeight表示所述目标区域的高度；webHeight表示所述待显示页面的高度，min()表示取最小值，max()表示取最大值。
  14. 如权利要求11所述的装置，其中，所述页面窗口的第二滚动值表示如下：
    int offsetY＝(webviewHeight-videoHeight)/2-videoY+ScrollY
    其中，int offsetY表示所述页面窗口的第二滚动值，webviewHeight表示所述显示屏幕的高度，videoHeight表示所述目标区域的高度，videoY表示所述目标区域的位置信息中的纵坐标，ScrollY表示所述 待显示页面的第一滚动值。
  15. 一种非易失性计算机可读存储介质，存储有计算机可读指令，可以使至少一个处理器执行如权利要求1-7任一项所述的方法。
PCT/CN2017/117638 2017-01-05 2017-12-21 一种视频界面显示方法及装置 WO2018126899A1 (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
US16/375,432 US20190230311A1 (en) 2017-01-05 2019-04-04 Video interface display method and apparatus

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201710007619.9 2017-01-05
CN201710007619.9A CN108282683B (zh) 2017-01-05 2017-01-05 一种视频界面显示方法及装置

Related Child Applications (1)

Application Number Title Priority Date Filing Date
US16/375,432 Continuation US20190230311A1 (en) 2017-01-05 2019-04-04 Video interface display method and apparatus

Publications (1)

Publication Number Publication Date
WO2018126899A1 true WO2018126899A1 (zh) 2018-07-12

Family

ID=62789382

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2017/117638 WO2018126899A1 (zh) 2017-01-05 2017-12-21 一种视频界面显示方法及装置

Country Status (3)

Country Link
US (1) US20190230311A1 (zh)
CN (1) CN108282683B (zh)
WO (1) WO2018126899A1 (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2022183967A1 (zh) * 2021-03-01 2022-09-09 腾讯科技（深圳）有限公司 视频画面的显示方法、装置、设备、介质及程序产品
USD966281S1 (en) 2019-05-24 2022-10-11 Yandex Europe Ag Display screen or portion thereof with graphical user interface
USD970516S1 (en) 2019-06-20 2022-11-22 Yandex Europe Ag Display screen or portion thereof with graphical user interface

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20200186623A1 (en) * 2018-12-11 2020-06-11 Microsoft Technology Licensing, Llc Performant retrieval and presentation of content
CN112783591A (zh) * 2021-01-27 2021-05-11 北京字跳网络技术有限公司 互动方法、装置、电子设备和存储介质
CN113393294A (zh) * 2021-06-11 2021-09-14 北京沃东天骏信息技术有限公司 一种页面显示方法及装置、设备、存储介质
CN114416084B (zh) * 2021-12-31 2023-04-07 北京五八信息技术有限公司 一种数据处理方法、装置、电子设备及存储介质

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102314502A (zh) * 2011-09-01 2012-01-11 百度在线网络技术（北京）有限公司 一种用于在移动终端上显示网页主体内容的方法和设备
CN102402377A (zh) * 2010-09-17 2012-04-04 深圳Tcl新技术有限公司 一种实现屏保的显示装置及其屏保方法
US20130042171A1 (en) * 2011-08-12 2013-02-14 Korea Advanced Institute Of Science And Technology Method and system for generating and managing annotation in electronic book
CN103365930A (zh) * 2012-04-11 2013-10-23 富泰华工业（深圳）有限公司 网页内容显示控制系统及方法
CN104077056A (zh) * 2014-06-27 2014-10-01 广州视睿电子科技有限公司 屏幕显示页面的平移方法和系统
CN105511737A (zh) * 2015-12-18 2016-04-20 北京奇虎科技有限公司 一种管理网页上的菜单选项的方法及电子设备

Family Cites Families (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20020126154A1 (en) * 2001-03-12 2002-09-12 Watson Edwin George Method for displaying and scrolling data including display status feedback
US20100198697A1 (en) * 2006-07-21 2010-08-05 Videoegg, Inc. Fixed Position Interactive Advertising
CN103514202B (zh) * 2012-06-25 2017-05-17 北京新媒传信科技有限公司 一种网页显示的实现方法和装置
US20140095328A1 (en) * 2012-09-28 2014-04-03 Yahoo! Inc. Interactive reveal ad unit
CN104268250A (zh) * 2014-09-30 2015-01-07 北京奇虎科技有限公司 一种网页中视频元素的播放方法和装置
WO2016100408A1 (en) * 2014-12-15 2016-06-23 Vessel Group, Inc. Processing techniques in audio-visual streaming systems
US20170228762A1 (en) * 2016-02-09 2017-08-10 Comcast Cable Communications, Llc Responsive Advertisements
CN105791947A (zh) * 2016-04-21 2016-07-20 腾讯科技（深圳）有限公司 一种视频播放方法及装置
CN106210916A (zh) * 2016-06-29 2016-12-07 乐视控股（北京）有限公司 视频通话界面调节方法及装置
CN105898523B (zh) * 2016-06-29 2019-04-09 无锡天脉聚源传媒科技有限公司 一种视频播放方法及装置

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102402377A (zh) * 2010-09-17 2012-04-04 深圳Tcl新技术有限公司 一种实现屏保的显示装置及其屏保方法
US20130042171A1 (en) * 2011-08-12 2013-02-14 Korea Advanced Institute Of Science And Technology Method and system for generating and managing annotation in electronic book
CN102314502A (zh) * 2011-09-01 2012-01-11 百度在线网络技术（北京）有限公司 一种用于在移动终端上显示网页主体内容的方法和设备
CN103365930A (zh) * 2012-04-11 2013-10-23 富泰华工业（深圳）有限公司 网页内容显示控制系统及方法
CN104077056A (zh) * 2014-06-27 2014-10-01 广州视睿电子科技有限公司 屏幕显示页面的平移方法和系统
CN105511737A (zh) * 2015-12-18 2016-04-20 北京奇虎科技有限公司 一种管理网页上的菜单选项的方法及电子设备

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
USD966281S1 (en) 2019-05-24 2022-10-11 Yandex Europe Ag Display screen or portion thereof with graphical user interface
USD970516S1 (en) 2019-06-20 2022-11-22 Yandex Europe Ag Display screen or portion thereof with graphical user interface
WO2022183967A1 (zh) * 2021-03-01 2022-09-09 腾讯科技（深圳）有限公司 视频画面的显示方法、装置、设备、介质及程序产品

Also Published As

Publication number Publication date
US20190230311A1 (en) 2019-07-25
CN108282683A (zh) 2018-07-13
CN108282683B (zh) 2020-07-14

Similar Documents

Publication Publication Date Title
WO2018126899A1 (zh) 一种视频界面显示方法及装置
US10529106B2 (en) Optimizing image cropping
WO2020034747A1 (zh) 图片生成方法、装置、设备及存储介质
WO2020038167A1 (zh) 视频识图方法、装置、终端及存储介质
US20180046602A1 (en) System and methods for control of content presented on web pages
US20160370987A1 (en) Touch-Based Gesture Recognition and Application Navigation
US11029835B2 (en) Systems and methods for delayed content overlay
US20120297324A1 (en) Navigation Control Availability
US20170263035A1 (en) Video-Associated Objects
US20150248722A1 (en) Web based interactive multimedia system
CN110007829B (zh) 内容显示方法、装置、终端及存储介质
CN112328353B (zh) 子应用播放器的展示方法、装置、电子设备和存储介质
CN109154943A (zh) 自动播放内容到点击播放内容的基于服务器的转换
CN108255546B (zh) 一种数据加载动画的实现方法及装置
US20210042792A1 (en) Advertising during the loading of content
KR102376079B1 (ko) 임베디드 비디오를 열람하기 위한 방법 및 시스템
WO2015078260A1 (en) Method and device for playing video content
US20170091152A1 (en) Generating grid layouts with mutable columns
WO2020001028A1 (zh) 图片错层显示方法、电子设备及存储介质
CN114679621A (zh) 一种视频展示方法、装置及终端设备
US20160255174A1 (en) Data file and rule driven synchronous or asynchronous document generation
WO2017140226A1 (zh) 视频处理方法及其设备
CN113784194A (zh) 一种视频播放器的嵌入方法和装置
JP6339550B2 (ja) 端末用プログラム、端末装置及び端末制御方法
US20230071445A1 (en) Video picture display method and apparatus, device, medium, and program product

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: 17890016

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 17890016

Country of ref document: EP

Kind code of ref document: A1