WO2015184745A1

WO2015184745A1 - Method and system for displaying hover play window

Info

Publication number: WO2015184745A1
Application number: PCT/CN2014/092280
Authority: WO
Inventors: 李歆; 孙昆明; 郭慧敏; 唐桂尧; 姚键; 潘柏宇; 卢述奇
Original assignee: 合一网络技术(北京)有限公司
Priority date: 2014-06-03
Filing date: 2014-11-26
Publication date: 2015-12-10
Also published as: CN103986962A; CN103986962B

Abstract

Disclosed are a method and system for displaying a hover play window, the method comprising: on a page displayed in a browser window, generating a position marking line for the bottom edge of a play window on the page; monitoring the position of the position marking line in the browser window, and when detecting that the position marking line is located at the top edge of the browser window, generating activation prompt information; generating a play thumbnail window according to the activation prompt information, and displaying in a hover mode the play thumbnail window on the page in the current browser window; and acquiring the video stream data of a video played in the play window and the time schedule data of the current video, and simultaneously playing the video stream data and the time schedule data in the generated thumbnail play window. The present invention solves the problem that a video playing window cannot be watched when being fixedly embedded in the page and scrolling with the page out of the display range of the browser window.

Description

Method and system for displaying a floating play window

Technical field

The present application relates to the field of page play display, and more particularly to a method and system for displaying a floating play window.

Background technique

With the rapid development of Internet technology, the way people access information has changed: from traditional books, newspapers, television, radio, etc., and then through the Internet. In particular, the Internet shares rich and comprehensive online video resources such as movies, news, advertisements, chat videos, game videos and surveillance videos, so that online video has become an irreplaceable and important way for people to learn, socialize and entertain.

For a video website with a large number of video resources, the user can access the on-demand page of the video website through the browser on the terminal to watch various videos that the user wants to watch.

Currently, a play page in a video website is usually composed of a web player area, an interactive communication area (including a comment area, a related video recommendation area, etc.), and the player window is set in the "embedded" manner on the page, that is, When the user scrolls the page, the player window will scroll along with the page. For the browser, the size of the display window is often smaller than the overall area of the page, and the user can only browse the entire content of the page by scrolling the page. For example, when a user wants to perform a comment operation on a currently viewed video, a scroll operation is inevitably performed to adjust the comment area in the page to the browser window, so that the user can view the comment area through the browser display window, however, The player window will follow the page scrolling to the display range of the current browser display window. When browsing the comment content or making comments, the user cannot see the content played in the current player window, which may result in the loss of video content, which is serious. Affect the user's browsing experience.

Summary of the invention

In view of this, the technical problem to be solved by the present application is to provide a method and system for displaying a floating play window, so as to solve the problem that the video play window in the page is fixedly embedded in the page, and the following page is scrolled together to the browser window. Problems that cannot be viewed outside the range.

In order to solve the above technical problem, the present application discloses a method for displaying a floating play window, including:

In the page displayed in the browsing window, a position marking is generated at the bottom edge of the player window on the page;

Monitoring a position of the position marking line in the browsing window, and generating startup prompt information when detecting that the position marking line is located at a top boundary of the browsing window;

Generating a play thumbnail window according to the startup prompt information, and displaying the play thumbnail window in a floating manner in a page in the current browsing window;

Obtaining video stream data of the video played in the player window and time progress data of the current video, and performing synchronous play in the generated play thumbnail window.

Wherein, preferably, the method further comprises:

The closing prompt information is generated when the position marking of the player window is displayed in the page in the browsing window, and the thumbnail window displayed in suspension is closed according to the closing prompt information.

Preferably, the play thumbnail window is moved in the browsing window according to the received drag indication information, the position after the playback thumbnail window is moved, the location data is generated and stored, When the play thumbnail window is displayed again, the stored location data is read and displayed in a floating manner in a page within the browse window.

Wherein, preferably, the play thumbnail window is displayed in a page within the browsing window with an initial size of 330*195 pixels.

Preferably, the display size of the play thumbnail window is adjusted according to the received size adjustment indication information, and the adjusted size of the play thumbnail window is recorded, and the size data is generated and stored, and the play is abbreviated. When the window is displayed again, the stored size data is read and displayed in a floating manner in a page within the browsing window.

In order to solve the above technical problem, the present application further discloses a system for displaying a floating play window, which is coupled to a browser, and the system includes: a marking unit, a monitoring unit, a display unit, and a playing unit, wherein

The marking unit is configured to generate a position marking line at a bottom edge of the player window on the page in the page displayed in the browsing window;

The monitoring unit is configured to monitor a position of the position marking line in the browsing window, and generate startup prompt information when detecting that the position marking line is located at a top boundary of the browsing window;

The display unit is configured to generate a play thumbnail window according to the startup prompt information, and display the play thumbnail window in a floating manner in a page in the current browsing window;

The playing unit is configured to acquire video stream data of the video played in the player window and time progress data of the current video, and perform synchronous play in the generated play thumbnail window.

Preferably, the monitoring unit is further configured to: generate a closing prompt information when the position marking of the player window is displayed in a page in the browsing window;

The display unit is further configured to: close the thumbnail window displayed in a floating manner according to the closing prompt information.

Preferably, the display unit is further configured to move the play thumbnail window in the browsing window according to the received drag indication information, record a position after the play thumbnail window is moved, and generate a position. The data is stored and, when the play thumbnail window is displayed again, the stored location data is read and displayed in a floating manner in a page in the browse window.

Preferably, the display unit is further configured to: adjust a display size of the play thumbnail window according to the received size adjustment indication information, record an adjusted size of the play thumbnail window, and generate size data. And storing, when the play thumbnail window is displayed again, reading the stored size data and displaying it in a floating manner in a page in the browsing window.

Compared with the prior art, a method and system for displaying a floating play window according to the present application achieves the following effects:

1) This application generates a position marking on the bottom edge of the player window on the page, and monitors the position marking in real time. If the position marking is located at the top boundary of the browsing window, it indicates that the player window has been scrolled. When the display window is outside the display range, the floating play window is displayed in the current browsing window, so that the user can continue to watch the currently played video, which is effective. It solves the problem that the video play window in the page is fixed in the embedded page, and the following page cannot be viewed after scrolling along the display range of the browser window.

2) The floating play window in the present application can be dragged freely in the page, and the display size can also be adjusted according to the user's preference, and the floating play window is provided with control keys related to the play, and the user can control at any time. The playback of the video can give the user a good browsing experience.

3) The floating play window in this application can be applied to different browsers and different terminals, and is highly practical.

Of course, implementing any of the products of the present application necessarily does not necessarily require all of the technical effects described above to be achieved at the same time.

DRAWINGS

The drawings described herein are intended to provide a further understanding of the present application, and are intended to be a part of this application. In the drawing:

1 is a flow chart of a method for displaying a floating play window according to Embodiment 1 of the present application.

2 is a flow chart of a method for displaying a floating play window according to Embodiment 2 of the present application.

3 is a schematic diagram of a player window on a video play page in Embodiment 3 of the present application.

4 is a schematic diagram of a floating play window in the third embodiment of the present application.

FIG. 5 is a structural block diagram of a system for displaying a floating play window according to Embodiment 4 of the present application.

detailed description

Certain terms are used throughout the description and claims to refer to particular components. Those skilled in the art will appreciate that hardware manufacturers may refer to the same component by different nouns. The present specification and the claims do not use the difference in the name as the means for distinguishing the components, but the difference in function of the components as the criterion for distinguishing. The word "comprising" as used throughout the specification and claims is an open term and should be interpreted as "including but not limited to". "Approximate" means acceptable Within the scope of the error, those skilled in the art can solve the technical problem within a certain error range, and basically achieve the technical effects. In addition, the term "coupled" is used herein to include any direct and indirect electrical coupling means. Therefore, if a first device is coupled to a second device, the first device can be directly electrically coupled to the second device, or electrically coupled indirectly through other devices or coupling means. Connected to the second device. The description of the specification is intended to be illustrative of the preferred embodiments of the invention. The scope of protection of the application is subject to the definition of the appended claims.

Embodiment 1

As shown in FIG. 1 , a method for displaying a floating play window according to the first embodiment of the present application, the method includes:

Step 101: In the page displayed in the browsing window, a position marking is generated for the bottom edge of the player window on the page.

The browsing window may be a carrier for displaying a website page in the terminal, which may be a browser running in the terminal, an application (application), etc., wherein the terminal includes but is not limited to: a computer terminal and/or a mobile terminal (including : Tablets, mobile phones and other mobile devices). It should be noted here that for a computer terminal, the browsing window is usually the display window of the browser; for the mobile terminal, the browsing window may be a browser window running on the mobile terminal, or an APP window running on the mobile terminal ( The display range of the APP window at this time is the display range of the screen of the mobile terminal, that is, in this case, the browsing window is the screen of the mobile terminal).

In the video play page, not the entire page plays the video, but the video is played in the player window set in the page, and in step 101, the position mark can be set at the bottom edge of the player window, The position mark coincides with the bottom edge of the player window, since the size of the player window usually does not change in the page, that is, the size of the player window does not change, and the player window is embedded in the video play page. Therefore, the generated position marking has a strong calibration. In this embodiment, the position marking may be recorded in an HTML (HyperText Mark-up Language) file, a browser information file, or an application source file having a video playing function, and the generated position marking is not Displayed directly on the video playback page, the location marking line is set in the following way: page height coordinate mode, page label, etc. The manner in which the position marking is placed does not constitute a limitation of the present application.

Step 102: Monitor a position of the position marking line in the browsing window, and generate startup prompt information when it is detected that the position marking line is located at a top boundary of the browsing window.

The size of the browsing window is usually smaller than the size of the video playing page. That is, when the video playing page is browsed through the browsing window, the page displayed in the browsing window is only a part of the entire video playing page, in the video playing page, except the player window. In addition, there are other content (such as: comment content), the user can scroll to the video playback page to browse to other content on the page, but the player window will also scroll along with the video playback page, which is larger in scrolling. When the player window disappears in the display range of the current browsing window, the user cannot continue to view, so in step 102, the positional line of the player window needs to be monitored in real time, when the position marking coincides with the top boundary of the browsing window. Then, the page above the position mark (including the player window) is scrolled outside the current browse window. This state is in accordance with the start condition of the floating play window in this application. Therefore, in step 102, startup prompt information for launching the floating play window will be generated.

In this embodiment, the startup prompt information may be generated by a monitoring thread running in the terminal.

Step 103: Generate a play thumbnail window according to the startup prompt information, and display the play thumbnail window in a floating manner in a page in the current browsing window.

The generated playback thumbnail window has a size of at least 330*195px (Pixel), and the playback thumbnail window is located at the outermost layer of the browsing window, that is, the playback thumbnail window is suspended in other content of the video playing page. In this embodiment, the play thumbnail window can also be moved according to an operation instruction of the user (eg, click, drag, etc.).

Step 104: Obtain video stream data of the video played in the player window and time progress data of the current video, and perform synchronous play display in the generated play thumbnail window.

The terminal where the player window is located obtains the video stream data from the corresponding video server for playing, so in order to play the unified content, after the playback thumbnail window is generated, the same video stream data is also acquired and played in the playback thumbnail window. . The user may have watched for a certain period of time in the player window. Then, the video played in the playback thumbnail window is also consistent with the playback progress in the player window in time. In step 104, the current video is acquired. The time progress data can be synchronized with the player window to display the display.

Embodiment 2

As shown in FIG. 2, a method for displaying a floating play window according to Embodiment 2 of the present application, the method includes:

Step 201: In the page displayed in the browsing window of the browser, a position marking is generated at the bottom edge of the player window on the page displayed by the browser.

In this embodiment, the browser window in the computer terminal is not limited, and may also be a video application of the mobile terminal.

Step 202: Monitor a position of the position marking in the browsing window, and generate startup prompt information when it is detected that the position marking is located at a top boundary of the browser display window.

For step 202, the top boundary of the browsing window may be the boundary of the screen of the mobile terminal, in addition to the top border of the browser displaying the page.

Step 203: Generate a play thumbnail window according to the startup prompt information, and display the play thumbnail window in a floating manner in a page in the current browsing window.

In step 203, the play thumbnail window may be moved according to the user's drag action, that is, the play thumbnail window is moved in the browse window according to the received drag instruction information, and the play thumbnail is recorded. The position after the window is moved, the position data is generated and stored, when the play thumbnail window is displayed again.

Step 204: Obtain video stream data of the video played in the player window and time progress data of the current video, and perform synchronous play display in the generated play thumbnail window.

It should be noted that, in the first display, the play thumbnail window is displayed in the page in the browsing window with the initial size of 330*195 pixels.

The user can adjust the size of the play thumbnail window, that is, adjust the display size of the play thumbnail window according to the received size adjustment indication information, record the adjusted size of the play thumbnail window, generate size data, and perform storage.

Step 205: Generate a closing prompt message when the position marking of the player window is displayed in a page in the browsing window, and close the floating thumbnail window displayed in a floating manner according to the closing prompt information. .

When the user scrolls the page to make the player window display and browse the window again, the playback thumbnail window is closed. Of course, in the embodiment, when the playback thumbnail window is displayed again, the stored location data and size are read. The data is then displayed in a floating manner in a page within the browsing window.

Embodiment 3

The specific application of the method for displaying a floating play window will be described in detail below with reference to FIGS. 3 and 4.

Step 1: The user views the video by accessing the video website in the browser of the computer terminal, displays the playing page of the current video in the display window of the browser, and the browser generates a position marking line at the bottom edge of the player window on the page. L1.

As shown in FIG. 1, the bottom edge of the player window in the current page is located at the position of L1 in FIG. 1. If the page scrolls and exceeds the position (L1), the player window will completely disappear from the browser. Browse the window range. The browser needs to monitor the position (L1) in real time to generate a positional line L1.

It should be noted that the position marking line L1 is not displayed in the current playing page, but is written into the HTML file of the browser in the manner of the page height coordinate value.

Step 2: The user scrolls the current play page, browses the comment area at the bottom of the page, and the player window scrolls along with the page. The monitoring thread in the browser monitors the position mark L1 in real time, and monitors the position mark in the current browser. The position in the display window generates a startup prompt message when it is detected that the position marking line L1 is located at the top boundary of the browser display window.

Step 3: The browser generates a play thumbnail window S1 according to the startup prompt information, and as shown in FIG. 4, the play thumbnail window S1 is displayed in a floating manner on the page displayed by the current browser window, and then the player is acquired. The video stream data of the video played in the window and the playback progress of the current video are synchronized and displayed in the generated floating playback thumbnail window S1.

The content displayed in the playback thumbnail window S1 is consistent with the content in the player window, and the playback progress is also the same, so the playback thumbnail window S1 ensures that the user can continue to watch the video content even when viewing the comment area, thereby not The video content will be missed due to user comments, etc.

The initial position of the play thumbnail window S1 in the page is randomly selected, but usually displayed in the middle position of the page. After the floating display, the position of the play thumbnail window S1 can be arbitrarily moved according to the user's drag action, in one In the mode, when the user's mouse pointer moves into the range of the play thumbnail window S1, the video content is no longer displayed in the play thumbnail window S1, but as shown in FIG. 4, the text prompt information is displayed to prompt the user. The play thumbnail window S1 can be dragged, thereby increasing the browsing experience of the user.

After the user drags the play thumbnail window S1, the browser will record the new position of the play thumbnail window S1, and the browser records the position coordinate value in the page, and can also be written into the corresponding HTML file. The play thumbnail window S1 will be displayed at the recorded position, and even if the browser is closed, when the user views the video using the browser, the play thumbnail window S1 will still be displayed at the recorded position.

In addition, the size of the playback thumbnail window S1 is the calibration size at the initial display, that is, 330*195px, the user can resize the playback thumbnail window S1, and the adjusted size will also be recorded by the browser, even if The play thumbnail window S1 is generated again, and will also be displayed according to the adjusted size.

Step 4: When it is detected that the position marking line L1 on the player window appears again in the browser display window, the closing prompt information is generated and the thumbnail window displayed in the floating state is closed according to the closing prompt information.

In this embodiment, the play thumbnail window S1 has the same control key as that on the player window, and the user can directly control the play of the video in the play thumbnail window S1.

Embodiment 4

As shown in FIG. 5, a system for displaying a floating play window according to Embodiment 4 of the present application is coupled to a browser, and the system includes: a marking unit 501, a monitoring unit 502, a display unit 503, and a playing unit. 504, wherein

The marking unit 501 is coupled to the browser and the monitoring unit 502 for generating a positional line at a bottom edge of the player window on the page in the page displayed in the browsing window.

The monitoring unit 502 is coupled to the marking unit 501 and the display unit 503 for monitoring The position of the position marking line generated by the marking unit 501 in the browsing window is sent to the display unit 503 when the position marking line is located at the top boundary of the browsing window.

The display unit 503 is coupled to the monitoring unit 502 and the playing unit 504, and configured to generate a playback thumbnail window according to the startup prompt information, and display the playback thumbnail window in a floating manner on the page in the current browsing window. in.

The playing unit 504 is configured to acquire video stream data of the video played in the player window and time progress data of the current video, and perform synchronous play in the generated play thumbnail window.

In this embodiment, the monitoring unit 502 is further configured to generate a shutdown prompt message when the position marking of the player window is displayed in a page in the browsing window. Then, the display unit 503 will close the thumbnail window displayed in suspension according to the closing prompt information.

The generated playback thumbnail window has a size of at least 330*195px (Pixel), that is, the playback thumbnail window is displayed in the page in the browsing window with the initial size of 330*195 pixels, and the playback thumbnail window is located in the browsing window. The most superficial layer of the window, that is, the playback thumbnail window is suspended in other content of the video playback page. In this embodiment, the play thumbnail window can also be moved according to an operation instruction of the user (eg, click, drag, etc.).

Specifically, when the user drags the play thumbnail window, the display unit 503 will move the play thumbnail window in the browsing window according to the received drag instruction information, and record the play thumbnail window movement. After the position, the location data is generated and stored, and when the playback thumbnail window is displayed again, the stored location data is read and displayed in a floating manner in a page in the browsing window.

When the user adjusts the size of the playback thumbnail window, the display unit 503 adjusts the display size of the playback thumbnail window according to the received size adjustment indication information, and records the adjusted size of the playback thumbnail window to generate a size. The data is stored and, when the play thumbnail window is displayed again, the stored size data is read and displayed in a floating manner in a page within the browse window.

The detailed description of the corresponding parts of the system and the method involved in the embodiment is omitted here, and will not be described again. For specific content in the system For a description, refer to the content of the method embodiment, which is not specifically limited herein.

1) This application generates a position marking on the bottom edge of the player window on the page, and monitors the position marking in real time. If the position marking is located at the top boundary of the browsing window, it indicates that the player window has been scrolled. When the display window is outside the display range, the floating play window is displayed in the current browsing window, so that the user can continue to watch the currently played video, effectively solving the problem that the video play window in the page is fixed in the embedded page. The page scrolls together to the point where the browser window is outside the display range and cannot be viewed.

It is also to be understood that the terms "comprises", "comprising" or "comprising" or any other variations are intended to encompass a non-exclusive inclusion, such that a process, method, article, or Other elements not explicitly listed, or elements that are inherent to such a process, method, commodity, or system. An element that is defined by the phrase "comprising a ..." does not exclude the presence of additional equivalent elements in the process, method, item, or system including the element, without further limitation.

Those skilled in the art will appreciate that embodiments of the present application can be provided as a method, system, or computer program product. Thus, the present application can take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment in combination of software and hardware. Moreover, the application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) including computer usable program code.

The above description is only an embodiment of the present application and is not intended to limit the application. Various changes and modifications can be made to the present application by those skilled in the art. Where in the spirit and principle of this application Any modifications, equivalent substitutions, improvements, etc. made within the scope of the claims are intended to be included within the scope of the appended claims.

Claims

A method for displaying a floating play window, comprising:

In the page displayed in the browsing window, a position marking is generated at the bottom edge of the player window on the page;

Monitoring a position of the position marking line in the browsing window, and generating startup prompt information when detecting that the position marking line is located at a top boundary of the browsing window;

Generating a play thumbnail window according to the startup prompt information, and displaying the play thumbnail window in a floating manner in a page in the current browsing window;

Obtaining video stream data of the video played in the player window and time progress data of the current video, and performing synchronous play in the generated play thumbnail window.
The method of displaying a floating play window according to claim 1, further comprising:

The closing prompt information is generated when the position marking of the player window is displayed in the page in the browsing window, and the thumbnail window displayed in suspension is closed according to the closing prompt information.
The method of displaying a floating play window according to claim 1, wherein the play thumbnail window is moved in the browsing window according to the received drag indication information, and the play thumbnail window is recorded to be moved. After the position, the location data is generated and stored, and when the playback thumbnail window is displayed again, the stored location data is read and displayed in a floating manner in a page in the browsing window.
The method for displaying a floating play window according to claim 1, wherein the play thumbnail window is displayed in a page within the browsing window with an initial size of 330*195 pixels.
The method for displaying a floating play window according to claim 4, wherein the display size of the play thumbnail window is adjusted according to the received size adjustment indication information, and the record is recorded. The size of the thumbnail window is adjusted, and the size data is generated and stored. When the play thumbnail window is displayed again, the stored size data is read and displayed in a floating manner in a page in the browse window. .
A system for displaying a floating play window, coupled to a browser, wherein the system includes: a marking unit, a monitoring unit, a display unit, and a playing unit, wherein

The marking unit is configured to generate a position marking line at a bottom edge of the player window on the page in the page displayed in the browsing window;

The monitoring unit is configured to monitor a position of the position marking line in the browsing window, and generate startup prompt information when detecting that the position marking line is located at a top boundary of the browsing window;

The display unit is configured to generate a play thumbnail window according to the startup prompt information, and display the play thumbnail window in a floating manner in a page in the current browsing window;

The playing unit is configured to acquire video stream data of the video played in the player window and time progress data of the current video, and perform synchronous play in the generated play thumbnail window.
A system for displaying a floating play window as claimed in claim 6 wherein:

The monitoring unit is further configured to: generate a shutdown prompt message when the position marking of the player window is displayed in a page in the browsing window;

The display unit is further configured to: close the thumbnail window displayed in a floating manner according to the closing prompt information.
The system for displaying a floating play window according to claim 6, wherein the display unit is further configured to move the play thumbnail window within the browsing window according to the received drag indication information Recording the position of the playback thumbnail window after moving, generating location data and storing, and when the playback thumbnail window is displayed again, reading the stored location data and displaying the location data in a floating manner in the browsing window In the page.
A system for displaying a floating play window as claimed in claim 6 wherein: The play thumbnail window is displayed in a page within the browsing window with an initial size of 330*195 pixels.
The system for displaying a floating play window according to claim 9, wherein the display unit is further configured to: adjust a display size of the play thumbnail window according to the received size adjustment indication information, Recording the adjusted size of the play thumbnail window, generating size data and storing, when the play thumbnail window is displayed again, reading the stored size data and displaying the page in the browse window in a floating manner in.