CN113259752A - Method and device for controlling playing of interactive video in browser page and server - Google Patents
Method and device for controlling playing of interactive video in browser page and server Download PDFInfo
- Publication number
- CN113259752A CN113259752A CN202110782552.2A CN202110782552A CN113259752A CN 113259752 A CN113259752 A CN 113259752A CN 202110782552 A CN202110782552 A CN 202110782552A CN 113259752 A CN113259752 A CN 113259752A
- Authority
- CN
- China
- Prior art keywords
- video
- playing
- target
- interactive
- canvas
- Prior art date
- Legal status (The legal status 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 status listed.)
- Pending
Links
- 230000002452 interceptive effect Effects 0.000 title claims abstract description 146
- 238000000034 method Methods 0.000 title claims abstract description 70
- 230000006870 function Effects 0.000 claims abstract description 38
- 238000004590 computer program Methods 0.000 claims description 13
- 238000012544 monitoring process Methods 0.000 claims description 12
- 230000003993 interaction Effects 0.000 abstract description 14
- 230000008569 process Effects 0.000 abstract description 14
- 239000012141 concentrate Substances 0.000 abstract 1
- 238000010586 diagram Methods 0.000 description 11
- 230000000694 effects Effects 0.000 description 7
- 238000012545 processing Methods 0.000 description 6
- 238000009877 rendering Methods 0.000 description 6
- 230000001960 triggered effect Effects 0.000 description 6
- 238000004891 communication Methods 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 230000000670 limiting effect Effects 0.000 description 3
- 230000004044 response Effects 0.000 description 2
- 238000013500 data storage Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
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/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/4318—Generation of visual interfaces for content selection or interaction; Content or additional data rendering by altering the content in the rendering process, e.g. blanking, blurring or masking an image region
-
- 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/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs
- H04N21/44008—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving operations for analysing video streams, e.g. detecting features or characteristics in the video stream
-
- 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/478—Supplemental services, e.g. displaying phone caller identification, shopping application
- H04N21/4782—Web browsing, e.g. WebTV
-
- 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/478—Supplemental services, e.g. displaying phone caller identification, shopping application
- H04N21/4788—Supplemental services, e.g. displaying phone caller identification, shopping application communicating with other users, e.g. chatting
Landscapes
- Engineering & Computer Science (AREA)
- Multimedia (AREA)
- Signal Processing (AREA)
- General Engineering & Computer Science (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention relates to a playing control method, a device and a server of an interactive video in a browser page, wherein the method comprises the following steps: when a target browser requests to display a target page, a canvas is created at the position of an original video player, then each frame of picture of the target video is drawn on the canvas, the target video is played, the playing progress of the target video is monitored, when the playing progress reaches the preset progress, an interactive title panel corresponding to the preset progress is displayed on the canvas, and when the display of the interactive title panel is finished, the interactive title panel is controlled to be hidden. Compared with the prior art, the method and the device have the advantages that playing control over the interactive video is realized when the browser page is used for playing the interactive video, so that a user can experience intelligent teaching interaction in the process of watching the video, the video player style of the browser can be unified, the complex functions customized by different manufacturers are removed, the user can concentrate on the video content, and the interactive experience of the user is further improved.
Description
Technical Field
The embodiment of the application relates to the technical field of computers, in particular to a playing control method and device for an interactive video in a browser page and a server.
Background
The network teaching is a new learning mode and is a novel teaching mode realized based on computer equipment and internet technology. Along with the gradual development of the network teaching technology, a user can experience intelligent teaching interaction in the process of watching interactive videos, for example, when the user watches the interactive videos to a specific time, interactive questions can be popped up on a video interface to enable the user to answer, and therefore the learning experience of the network teaching is improved.
However, when a user plays an interactive video using a browser, it is difficult to achieve intelligent teaching interaction in the video playing process due to the limitation of a video player in a browser page, and different manufacturers can customize the functions of various video players, which also causes interference to the user in the process of watching the video.
Disclosure of Invention
The embodiment of the application provides a playing control method, a device and a server of an interactive video in a browser page, and the technical scheme is as follows:
in a first aspect, an embodiment of the present application provides a method for controlling playing of an interactive video in a browser page, including:
creating a canvas at a location of an original video player when a target browser requests display of a target page;
playing the target video by drawing each frame of picture of the target video on the canvas;
monitoring the playing progress of the target video;
when the playing progress reaches a preset progress, displaying an interactive title panel corresponding to the preset progress on the canvas;
and when the display of the interactive title panel is finished, controlling the interactive title panel to be hidden.
In a second aspect, an embodiment of the present application provides a device for controlling playing of an interactive video in a browser page, including:
the canvas creating module is used for creating a canvas at the position of the original video player when the target browser requests to display the target page;
the video playing unit is used for playing the target video by drawing each frame of picture of the target video on the canvas;
the playing monitoring unit is used for monitoring the playing progress of the target video;
the theme display unit is used for displaying an interactive theme panel corresponding to a preset progress on the canvas when the playing progress reaches the preset progress;
and the title hiding unit is used for controlling the interactive title panel to be hidden when the display of the interactive title panel is finished.
In a third aspect, an embodiment of the present application provides a server, including a processor, a memory, and a computer program stored in the memory and executable on the processor, where the processor implements the steps of the method for controlling playback of an interactive video in a browser page according to the first aspect when executing the computer program.
In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, where a computer program is stored, and when the computer program is executed by a processor, the steps of the method for controlling playback of an interactive video in a browser page according to the first aspect are implemented.
According to the method and the device, when a target browser requests to display a target page, the canvas is created at the position of an original video player, then each frame of picture of the target video is drawn on the canvas, the target video is played, the playing progress of the target video is monitored, when the playing progress reaches the preset progress, an interactive title panel corresponding to the preset progress is displayed on the canvas, when the display of the interactive title panel is finished, the hiding of the interactive title panel is controlled, the playing control of the interactive video is realized when the interactive video is played by using the browser page, so that a user can experience intelligent teaching interaction in the process of watching the video, the styles of the video players at browser ends can be unified, the complex functions customized by different manufacturers are removed, the user is more concentrated on video content, and the interactive experience of the user is further improved.
For a better understanding and implementation, the technical solutions of the present application are described in detail below with reference to the accompanying drawings.
Drawings
Fig. 1 is a schematic flowchart of a method for controlling playback of an interactive video in a browser page according to an embodiment of the present application;
fig. 2 is a schematic flowchart of S101 in a method for controlling playing of an interactive video in a browser page according to an embodiment of the present application;
fig. 3 is a schematic flowchart of S102 in a method for controlling playing of an interactive video in a browser page according to an embodiment of the present application;
FIG. 4 is a schematic diagram of an interactive topic panel for phonetic topics according to an embodiment of the present application;
FIG. 5 is a schematic view of an interactive topic panel for selecting topics in accordance with an embodiment of the present application;
fig. 6 is a schematic interface diagram of an original video player according to an embodiment of the present application;
fig. 7 is a flowchart illustrating a method for controlling playback of an interactive video in a browser page according to another embodiment of the present application;
fig. 8 is a flowchart illustrating a method for controlling playback of an interactive video in a browser page according to another embodiment of the present application;
FIG. 9 is a diagram of a custom control provided by an embodiment of the present application;
fig. 10 is a schematic structural diagram of a playback control apparatus for an interactive video in a browser page according to an embodiment of the present application;
fig. 11 is a schematic structural diagram of a server according to an embodiment of the present application.
Detailed Description
Reference will now be made in detail to the exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, like numbers in different drawings represent the same or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present application. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present application, as detailed in the appended claims.
The terminology used herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the application. As used in this application and the appended claims, the singular forms "a", "an", and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. It should also be understood that the term "and/or" as used herein refers to and encompasses any and all possible combinations of one or more of the associated listed items.
It is to be understood that although the terms first, second, third, etc. may be used herein to describe various information, such information should not be limited to these terms. These terms are only used to distinguish one type of information from another. For example, first information may also be referred to as second information, and similarly, second information may also be referred to as first information, without departing from the scope of the present application. The word "if/if" as used herein may be interpreted as "at … …" or "when … …" or "in response to a determination", depending on the context.
Before describing the method for controlling playing of an interactive video in a browser page provided in the embodiment of the present application, a brief description is first given to a principle of playing an interactive video in a browser page.
Video courses are widely popularized, and users can choose to install video clients, open the video courses in the clients for learning, and also can play the video courses for learning by accessing browser pages.
When the browser page is used for playing the video courses, the principle is as follows: the browser page is deployed on the server, when a user opens a target page through the browser, the server receives a display request of the target page, calls resources of the target page, and renders and displays the resources to the user through the browser.
Then, since the kernels (also referred to as rendering engines) used by different browsers may be different, the display effect of the video player and the playing effect of the interactive video may be different when the interactive video is played through different browsers.
Such as: the browser in the X5 kernel restricts the overlaying of other views on the playing video, and all the interactive control resources overlaid on the playing video cannot be displayed, such as: some kernel browsers display a number of advertisements on the video player, and then when the browser is used to play the video, the advertisements are rendered by default.
The interactive video refers to a video which can be intelligently interacted with a user through an interactive control in the video playing process.
Therefore, in order to solve the above technical problem, implement AI interaction when a browser page plays an interactive video, and unify a video playing style of a browser end, please refer to fig. 1, which is a schematic flow chart of a playing control method of an interactive video in a browser page according to an embodiment of the present application, the method includes the following steps:
s101: when a target browser requests display of a target page, a canvas is created at the location of the original video player.
The execution main body of the playing control method of the interactive video in the browser page is a server for deploying a target page. The server may be one server or one server cluster, and is not limited in detail herein.
In the embodiment of the application, the browser is a browser client installed in the computer device, and the browser can perform data interaction with the server by means of hardware facilities of the computer device to render and display the webpage.
The computer device may be a PC device or a mobile device, which is not limited herein in detail, and all computer devices that are limited by the kernel of the installed browser and cause the problem that the video AI interaction cannot be performed are within the protection range.
When a user accesses a target page through a target browser, the target browser sends a request for displaying the target page to a server, and when the server receives the request for displaying the target page sent by the target browser, a canvas is created at the position of an original video player.
The original video player refers to a player created by calling the video player resource of the target browser. In the prior art, when video playing needs to be realized on a target page, the video player resources can be called to create an original video player on the target page, and then interactive video streams are bound to the original video player, so that when a user opens the target page through a target browser, the original video player realizes the playing of interactive videos.
However, due to the setting of the kernel (i.e. rendering engine) of the target browser, other views are limited to be overlaid on the playing video of the original video player, so that when a user opens the target page through the target browser, if the original video player is directly used to play the interactive video, AI interaction in the interactive video cannot be realized in the target page, that is, an interactive title panel cannot be displayed.
Therefore, when the server receives a request of any browser for displaying a target page, the browser needs to be judged first, and when the browser is the target browser, the server is triggered to create a canvas at the position of the original video player, and subsequent steps are executed.
Specifically, in an optional embodiment, when the target browser requests to display the target page, the target browser sends a target page display request including its own type information, so the type information of the target browser may be stored in the server in advance, and when the type information included in the target page display request received by the server matches with the type information of the target browser, the server confirms that the request is sent by the target browser, and further creates a canvas at the position of the original video player, and executes subsequent steps.
In an alternative embodiment, the canvas may also be created at the location of the original video player in the target page hidden when the target browser requests the target page to be displayed.
Specifically, this can be done by changing the display attributes of the original video player, for example: the display attribute is changed from "visible" to "invisible", and the above display attribute parameter is only an example and has no limiting effect.
After the display attribute of the original video player is changed, the target browser cannot render and display the original video player, so that the effect of hiding the original video player in the target page is achieved, and the original video player can be prevented from being exposed in the browser page when the canvas size is small.
In an alternative embodiment, the Canvas created at the location of the original video player is referred to as the Canvas in HTML5, which is a rectangular area, and image rendering can be achieved by controlling the pixels of the Canvas.
In order to avoid affecting the display effect of other components in the target page, a canvas needs to be created at the position of the original video player, so as to improve the interaction experience between the user and the browser page, specifically, referring to fig. 2, creating the canvas at the position of the original video player includes steps S1011 to S1012, specifically as follows:
s1011: and acquiring the position of the original video player in the target page and the size of the original video player.
And the server acquires the position of the original video player in the target page and the size of the original video player.
In an optional embodiment, the position of the original video player in the target page is a relative position, and includes a distance between an upper left corner of the original video player and a border on the target page, and a distance between the upper left corner of the original video player and the left border of the target page.
The size of the original video player includes a display width and a display height, and is not limited in detail herein.
S1012: creating the canvas in a target page according to the position of the original video player in the target page and the size of the original video player; wherein the size of the canvas is the same as the size of the original video player.
And the server creates the canvas in the target page according to the position of the original video player in the target page and the size of the original video player. Specifically, the server transmits the position of the original video player in the target page and the size of the original video player into a canvas creation instruction, and the browser renders and displays the canvas in the target page according to the position and the size in the canvas creation instruction.
In this embodiment, by obtaining the position of the original video player in the target page and the size of the original video player, a canvas with the same size as that of the original video player is created in the target page, which not only can ensure that the display of other components in the target page is not affected, but also can ensure the subsequent drawing effect when the target video is drawn, thereby improving the interactive experience of playing the interactive video in the browser page to the greatest extent.
S102: and playing the target video by drawing each frame of picture of the target video on the canvas.
In the embodiment of the present application, the target video and at least one interactive topic panel are included in the interactive video, and the target video includes a plurality of frames of video pictures.
And the server realizes the playing of the target video by drawing each frame of picture of the target video on the canvas.
Specifically, the server acquires a target video object, calls a target video resource based on the target video object, transmits the target video object into a preset drawing function, and executes the drawing function to draw each frame of picture of the target video on the canvas.
In an alternative embodiment, to improve the video rendering effect and the video rendering efficiency, referring to fig. 3, step S102 includes steps S1021 to S1022, which are as follows:
s1021: acquiring the target video, the positioning coordinate of the target video in the canvas and the drawing width and the drawing height of the target video in the canvas; the positioning coordinates of the target video in the canvas comprise an x coordinate and a y coordinate of a picture placed on the canvas, wherein in an optional embodiment, the x coordinate is a relative distance between the upper left corner of the picture and the left border of the canvas, and the y coordinate is a relative distance between the upper right corner of the picture and the upper border of the canvas.
The drawing width and the drawing height of the target video in the canvas refer to the drawing width and the drawing height of each frame of picture in the target video, and the drawing width and the drawing height can jointly determine the size of a drawing area of the target video.
S1022: and according to the positioning coordinate of the target video in the canvas and the drawing width and the drawing height of the target video in the canvas, drawing each frame of picture in the target video on the canvas in sequence and playing the target video.
And the server sequentially draws each frame of picture in the target video on the canvas according to the positioning coordinate of the target video in the canvas and the drawing width and the drawing height of the target video in the canvas, so that the target video is played.
Specifically, the server acquires a target video object, transmits the target video object, the positioning coordinates of the target video in the canvas, and the drawing width and the drawing height of the target video in the canvas into a preset drawing function, and then executes the drawing function to draw the target video on the canvas.
In this embodiment of the application, the preset drawing function is a drawImage function, and the server executes drawImage (video, dx, dy, dWidth, dHeight) to draw the target video on the canvas. Wherein, video is a target video object, dx and dy are positioning coordinates of the target video in the canvas, and dWidth and dhight are the drawing width and the drawing height of the target video in the canvas.
In an alternative embodiment, to further optimize performance, animation effects in the target video may be implemented via the requestAnimationFrame. The requestanimation frame is an existing encapsulated animation implementation method, and can effectively improve drawing efficiency.
In another optional embodiment, in order to ensure that the target video can be completely displayed in the drawing area, the server may further scale each frame of picture in the target video according to the drawing width and the drawing height of the target video in the canvas before drawing each frame of picture in the target video, so as to ensure that the target video can be completely drawn.
S103: and monitoring the playing progress of the target video.
In the embodiment of the application, monitoring needs to be set on the target video object, so that monitoring of the playing progress of the target video is realized.
In an optional embodiment, if the video represents the target video object, the video calls an event monitoring function addEventListener, so that the playing progress of the target video can be monitored, wherein the addEventListener is an existing event monitoring function which is packaged.
S104: and when the playing progress reaches a preset progress, displaying an interactive title panel corresponding to the preset progress on the canvas.
In this embodiment of the application, the preset progress may refer to a certain frame of a picture of the target video, or may refer to a certain playing time in the total playing time of the target video.
For example: when the preset progress is the 100 th frame of the target video, when the 100 th frame of the target video is drawn, the playing progress is judged to reach the preset progress.
When the preset progress is 23 minutes 05 seconds of a certain playing time within 2 hours of the total playing time of the target video, when the 23 minutes 05 seconds are drawn, it is determined that the playing progress reaches the preset progress, and when the video is actually drawn, the time parameter is more accurate, which is only an example.
And each preset progress is provided with a corresponding interactive topic panel, and when the server monitors that the playing progress of the target video reaches the preset progress, the server displays the interactive topic panel corresponding to the preset progress on the canvas.
The interactive topic panel comprises interactive topics and interactive topic controls. The user can watch the content of the interactive subjects through the interactive subject panel and realize intelligent teaching interaction through the interactive subject control.
It should be noted that the interactive topic panel is not drawn on a canvas, but is a page element that can be rendered and displayed in a browser page, and is overlaid on the canvas when displayed.
In an alternative embodiment, displaying the interactive topic panel on the canvas can be performed by changing the display attribute of the interactive topic panel, and in other alternative embodiments, the display of the interactive topic panel can also be realized by the display mode of other page elements, which is not limited in detail herein.
S105: and when the display of the interactive title panel is finished, controlling the interactive title panel to be hidden.
And the server judges whether the display of the interactive title panel is finished, and if so, the server controls the hiding of the interactive title panel.
In an optional embodiment, the interactive topic control comprises an answer submission control, and when the display of the interactive topic panel is finished, the interactive topic panel is controlled to be hidden, including the steps of: and when the answer submitting control receives an answer submitting operation, controlling the interactive title panel to be hidden.
In another optional embodiment, the interactive title control comprises a timing control, and when the display of the interactive title panel is finished, the control of hiding the interactive title panel comprises the steps of: and when the timing control judges that the current answer duration reaches the preset answer duration, controlling the interactive question panel to be hidden.
Referring to fig. 4 and 5, fig. 4 is a schematic diagram of an interactive topic panel of phonetic topics according to an embodiment of the present application; FIG. 5 is a schematic diagram of an interactive topic panel for selecting topics according to an embodiment of the present application.
In fig. 4 and 5, not only the answer submission control but also a timing control are provided in the interactive topic panel.
For the interactive topic panel of the voice topic in fig. 4, the answer submission control captures the voice data output by the user when receiving the long-press operation of the user, and confirms that the answer submission operation is received when the user stops the long-press operation, thereby hiding the interactive topic panel.
For the interactive topic panel of fig. 5 for the selected topic, when receiving the user click operation, the answer submission control confirms that the answer submission operation is received, thereby hiding the interactive topic panel.
As can be seen from fig. 4 and 5, in order to facilitate the user to intuitively know the answering time, the timing control is a countdown control, and the remaining answering time can be dynamically displayed.
According to the method and the device, when a target browser requests to display a target page, the canvas is created at the position of an original video player, then each frame of picture of the target video is drawn on the canvas, the target video is played, the playing progress of the target video is monitored, when the playing progress reaches the preset progress, an interactive title panel corresponding to the preset progress is displayed on the canvas, when the display of the interactive title panel is finished, the hiding of the interactive title panel is controlled, the playing control of the interactive video is realized when the interactive video is played by using the browser page, so that a user can experience intelligent teaching interaction in the process of watching the video, the styles of the video players at browser ends can be unified, the complex functions customized by different manufacturers are removed, the user is more concentrated on video content, and the interactive experience of the user is further improved.
In an optional embodiment, when the progress of playing reaches the preset progress, the server can also pause the playing by pausing the drawing on the canvas for each frame of picture of the target video, and pause the playing of the target video, and when the display of the interactive title panel is finished, the interactive title panel is controlled to be hidden and then continue to play the target video by continuing to draw on the canvas for each frame of picture of the target video, so that the user can be prevented from being unable to view the picture of the target video being drawn when the user performs intelligent teaching interaction with the interactive title panel, and the interactive experience of the user is further ensured.
In some cases, some controls are set by default in the original video player of the browser, for controlling video playing, such as a full screen control, a comment control, and the like. Referring to fig. 6, which is an interface schematic diagram of an original video player according to an embodiment of the present application, it can be seen that a full-screen control is rendered by default, and the control is displayed on a screen during video playing. Therefore, the style of the control needs to be unified again and displayed in the page, so that the user can control the video playing conveniently, and compared with the original video player, the style, the position and the control mode of the control created by the method can be unified in each browser page, so that the interactive experience of the user can be further improved.
Specifically, in another embodiment, referring to fig. 7, after step S101, the method further includes the steps of:
s106: acquiring a custom control, the position of the canvas in the target page and the position of the custom control relative to the canvas; and the user-defined control is used for triggering a play control function of the target video.
The server acquires the position of the canvas in the target page and the position of the user-defined control relative to the canvas, wherein the positions are relative positions.
The user-defined control is a web control and can be a button, a drop-down frame, a progress bar and the like. The playing control function of the target video is packaged in different controls, so that the corresponding playing control function is triggered and executed through the customized control.
S107: and obtaining the position of the custom control in the target page according to the position of the canvas in the target page and the position of the custom control relative to the canvas.
The server obtains the position of the custom control relative to the target page according to the position of the canvas in the target page and the position of the custom control relative to the canvas, and specifically comprises the distance between the upper left corner of the custom control relative to the upper border of the target page and the distance between the upper left corner of the custom control relative to the left border of the target page.
S108: and displaying the custom control on the canvas according to the position of the custom control in the target page.
And the server displays the custom control on the canvas according to the position of the custom control in the target page, and renders the control style through the browser.
In the embodiment, the position, the style and the control mode of the video playing control in each browser page can be the same, so that the interactive experience of a user is improved, and the user can conveniently perform method control operation.
In another embodiment, referring to fig. 8, the method further includes step S109, which is as follows:
s109: and when user operation is monitored through the custom control, triggering and executing a video playing control function corresponding to the custom control, and performing corresponding playing control on the target video.
The server monitors user operation through the custom control, triggers and executes a video playing control function corresponding to the custom control, and performs corresponding playing control on the target video.
Specifically, the number of the custom controls in this embodiment of the present application is multiple, and the user operations monitored by each custom control may be different, which are described below one by one.
(1) And the user-defined control comprises a play/pause control, and when the click operation is monitored through the play/pause control, a play/pause function corresponding to the play/pause control is triggered to be executed, and the target video is paused to be played or is continuously played.
Referring to fig. 9, fig. 9 is a schematic diagram of a custom control according to an embodiment of the present application. As can be seen from the lower left of fig. 9, there is a play/pause control, and when the user clicks the play/pause control in the target page, the play/pause control can monitor the click operation according to the click position of the user, so as to trigger a play/pause function corresponding to the play/pause control, specifically, if the server is currently drawing the target video, the play function is triggered to pause the target video, and if the server target pauses playing the target video, the play function is triggered to continue playing the target video.
(2) The user-defined control comprises a progress adjusting control, and when progress bar dragging operation or progress bar clicking operation is monitored through the progress adjusting control, the current stop position of the progress bar is obtained; confirming a corresponding target picture in the target video according to the current stopping position of the progress bar and the movable length of the progress bar; and skipping to play the target video by skipping to draw a target picture of the target video on the canvas.
Referring to fig. 9, a progress adjustment control is shown right below fig. 9, when a user drags a progress bar in a target page or clicks a certain position of the progress bar, the progress adjustment control may monitor a user operation according to the position of the progress bar dragged by the user or the position of the progress bar clicked by the user, so as to obtain a current stop position of the progress bar operated by the user, determine a corresponding target picture in the target video according to the current stop position of the progress bar and a movable length of the progress bar, and skip to draw the target picture of the target video.
(3) The user-defined control comprises a full screen control, and when the full screen control monitors clicking operation, the screen size of the playing equipment is obtained; adjusting the size of the canvas according to the screen size of the playing equipment, and zooming each frame of picture in the target video; and drawing each frame of picture of the target video after the size is zoomed on the canvas after the size is adjusted, and playing the target video in a full screen mode.
Referring to fig. 9, a full screen control is shown in the lower right of fig. 9, it can be seen that the style of the full screen control is completely different from the style of the full screen control of the original video player in fig. 6, and when the user clicks the full screen control, the full screen control can monitor the click operation according to the click position of the user, so as to obtain the screen size of the playing device. The playing device mentioned here is a computer device provided in S101 and installed with a target browser client, and because the screen sizes of the playing devices of different models and manufacturers are different, when full-screen display is implemented, the screen size of the playing device needs to be obtained, accordingly, the canvas size is adjusted to be the same as the screen size, each frame of picture in the target video is zoomed, and then the target video with the zoomed canvas size is drawn on the canvas with the zoomed size, so that the picture of the target video is spread over the screen of the playing device.
In the embodiment, the operation of the user in the browser page is monitored by setting different custom controls, so that the execution of the corresponding play control function is triggered in response to the user operation, and better user interaction experience is realized. Besides the above-described play/pause control, progress adjustment control, and full screen control, the custom control is not limited to the volume adjustment control, download control, collection control, and pop-up control, and is not limited to one here.
Fig. 10 is a schematic structural diagram of a playback control device for an interactive video in a browser page according to an embodiment of the present application. The apparatus may be implemented as all or part of a server in software, hardware, or a combination of both. The apparatus 10 comprises:
a canvas creation module 1001 for creating a canvas at a location of an original video player when a target browser requests a target page to be displayed;
a video playing unit 1002, configured to play the target video by drawing each frame of picture of the target video on the canvas;
a playing monitoring unit 1003, configured to monitor a playing progress of the target video;
a title display unit 1004, configured to display an interactive title panel corresponding to a preset progress on the canvas when the playing progress reaches the preset progress;
a topic hiding unit 1005, configured to control the interactive topic panel to be hidden when the display of the interactive topic panel is finished.
According to the method and the device, when a target browser requests to display a target page, the canvas is created at the position of an original video player, then each frame of picture of the target video is drawn on the canvas, the target video is played, the playing progress of the target video is monitored, when the playing progress reaches the preset progress, an interactive title panel corresponding to the preset progress is displayed on the canvas, when the display of the interactive title panel is finished, the hiding of the interactive title panel is controlled, the playing control of the interactive video is realized when the interactive video is played by using the browser page, so that a user can experience intelligent teaching interaction in the process of watching the video, the styles of the video players at browser ends can be unified, the complex functions customized by different manufacturers are removed, the user is more concentrated on video content, and the interactive experience of the user is further improved.
It should be noted that, when the playing control device for the interactive video in the browser page provided in the foregoing embodiment executes the playing control method for the interactive video in the browser page, only the division of the functional modules is described as an example, in practical applications, the function distribution may be completed by different functional modules according to needs, that is, the internal structure of the device is divided into different functional modules, so as to complete all or part of the functions described above. In addition, the playing control device for the interactive video in the browser page and the playing control method for the interactive video in the browser page provided by the above embodiments belong to the same concept, and details of implementation processes thereof are referred to in the method embodiments and are not described herein again.
Fig. 11 is a schematic structural diagram of a server according to an embodiment of the present application. As shown in fig. 11, the server 11 may include: a processor 110, a memory 111, and a computer program 112 stored in the memory 111 and operable on the processor 110, such as: a playing control program of an interactive video in a browser page; the processor 110 executes the computer program 112 to implement the steps in the above-mentioned method embodiments, such as the steps S101 to S105 shown in fig. 1. Alternatively, the processor 110, when executing the computer program 112, implements the functions of each module/unit in each device embodiment described above, such as the functions of the modules 1001 to 1005 shown in fig. 10.
The Memory 111 may include a Random Access Memory (RAM) or a Read-Only Memory (Read-Only Memory). Optionally, the memory 111 includes a non-transitory computer-readable medium. The memory 111 may be used to store instructions, programs, code, sets of codes, or sets of instructions. The memory 111 may include a program storage area and a data storage area, wherein the program storage area may store instructions for implementing an operating system, instructions for at least one function (such as touch instructions, etc.), instructions for implementing the various method embodiments described above, and the like; the storage data area may store data and the like referred to in the above respective method embodiments. The memory 111 may optionally be at least one memory device located remotely from the processor 110.
An embodiment of the present application further provides a computer storage medium, where the computer storage medium may store a plurality of instructions, and the instructions are suitable for being loaded by a processor and being used to execute the method steps in the embodiments shown in fig. 1 to 3 and 7 to 8, and a specific execution process may refer to specific descriptions of the embodiments shown in fig. 1 to 3 and 7 to 8, which is not described herein again.
It will be apparent to those skilled in the art that, for convenience and brevity of description, only the above-mentioned division of the functional units and modules is illustrated, and in practical applications, the above-mentioned function distribution may be performed by different functional units and modules according to needs, that is, the internal structure of the apparatus is divided into different functional units or modules, so as to perform all or part of the functions described above. Each functional unit and module in the embodiments may be integrated in one processing unit, or each unit may exist alone physically, or two or more units are integrated in one unit, and the integrated unit may be implemented in a form of hardware, or in a form of software functional unit. In addition, specific names of the functional units and modules are only for convenience of distinguishing from each other, and are not used for limiting the protection scope of the present application. The specific working processes of the units and modules in the system may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again.
In the above embodiments, the descriptions of the respective embodiments have respective emphasis, and reference may be made to the related descriptions of other embodiments for parts that are not described or illustrated in a certain embodiment.
Those of ordinary skill in the art will appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware or combinations of computer software and electronic hardware. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the implementation. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present invention.
In the embodiments provided in the present invention, it should be understood that the disclosed apparatus/terminal device and method may be implemented in other ways. For example, the above-described embodiments of the apparatus/terminal device are merely illustrative, and for example, a module or a unit may be divided into only one logical function, and may be implemented in other ways, for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection through some interfaces, devices or units, and may be in an electrical, mechanical or other form.
Units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.
In addition, functional units in the embodiments of the present invention may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware, and can also be realized in a form of a software functional unit.
The integrated modules/units, if implemented in the form of software functional units and sold or used as separate products, may be stored in a computer readable storage medium. Based on such understanding, all or part of the flow in the method according to the embodiments of the present invention may also be implemented by a computer program, which may be stored in a computer-readable storage medium and used by a processor to implement the steps of the above-described embodiments of the method. Wherein the computer program comprises computer program code, which may be in the form of source code, object code, an executable file or some intermediate form, etc.
The present invention is not limited to the above-described embodiments, and various modifications and variations of the present invention are intended to be included within the scope of the claims and the equivalent technology of the present invention if they do not depart from the spirit and scope of the present invention.
Claims (13)
1. A playing control method of an interactive video in a browser page is disclosed, wherein the interactive video comprises a target video and at least one interactive topic panel, and the method is characterized by comprising the following steps:
creating a canvas at a location of an original video player when a target browser requests display of a target page;
playing the target video by drawing each frame of picture of the target video on the canvas;
monitoring the playing progress of the target video;
when the playing progress reaches a preset progress, displaying an interactive title panel corresponding to the preset progress on the canvas;
and when the display of the interactive title panel is finished, controlling the interactive title panel to be hidden.
2. The method for controlling the playing of the interactive video on the browser page according to claim 1, wherein the step of creating the canvas at the position of the original video player comprises the steps of:
acquiring the position of an original video player in the target page and the size of the original video player;
creating the canvas in a target page according to the position of the original video player in the target page and the size of the original video player; wherein the size of the canvas is the same as the size of the original video player.
3. The method for controlling the playing of the interactive video in the browser page according to claim 1, wherein after the canvas is created at the position of the original video player, the method comprises the following steps:
acquiring a custom control, the position of the canvas in the target page and the position of the custom control relative to the canvas; the user-defined control is used for triggering a play control function of the target video;
obtaining the position of a user-defined control in the target page according to the position of the canvas in the target page and the position of the user-defined control relative to the canvas;
and displaying the custom control on the canvas according to the position of the custom control in the target page.
4. The method for controlling playing of an interactive video on a browser page according to claim 3, wherein after the custom control is displayed on the canvas according to the position of the custom control in the target page, the method further comprises the following steps:
and when user operation is monitored through the custom control, triggering and executing a video playing control function corresponding to the custom control, and performing corresponding playing control on the target video.
5. The method for controlling the playing of the interactive video on the browser page according to claim 4, wherein the custom control comprises a play/pause control;
when user operation is monitored through the custom control, triggering and executing a video playing control function corresponding to the custom control, and performing corresponding playing control on the target video, including the steps of:
and when the clicking operation is monitored through the playing/pausing control, triggering and executing a playing/pausing function corresponding to the playing/pausing control, and pausing the playing of the target video or continuing to play the target video.
6. The method for controlling the playing of an interactive video on a browser page according to claim 4,
the custom control comprises a progress adjusting control;
when user operation is monitored through the custom control, triggering and executing a video playing control function corresponding to the custom control, and performing corresponding playing control on the target video, including the steps of:
when the progress bar dragging operation or the progress bar clicking operation is monitored through the progress adjusting control, the current stopping position of the progress bar is obtained;
confirming a corresponding target picture in the target video according to the current stopping position of the progress bar and the movable length of the progress bar;
and skipping to play the target video by skipping to draw a target picture of the target video on the canvas.
7. The method for controlling the playing of an interactive video on a browser page according to claim 4,
the custom control comprises a full screen control;
when user operation is monitored through the custom control, triggering and executing a video playing control function corresponding to the custom control, and performing corresponding playing control on the target video, including the steps of:
when the full-screen control monitors the click operation, acquiring the screen size of the playing equipment;
adjusting the size of the canvas according to the screen size of the playing equipment, and zooming each frame of picture in the target video;
and drawing each frame of picture of the target video after the size is zoomed on the canvas after the size is adjusted, and playing the target video in a full screen mode.
8. The method for controlling playing of an interactive video on a browser page according to claim 1, wherein said playing of said target video by drawing frames of said target video on said canvas comprises the steps of:
acquiring the target video, the positioning coordinate of the target video in the canvas and the drawing width and the drawing height of the target video in the canvas;
and according to the positioning coordinate of the target video in the canvas and the drawing width and the drawing height of the target video in the canvas, drawing each frame of picture in the target video on the canvas in sequence and playing the target video.
9. The method for controlling the playing of an interactive video on a browser page according to claim 1,
the interactive question panel comprises interactive questions and interactive question controls, and the interactive question controls comprise answer submission controls and/or timing controls;
when the display of the interactive title panel is finished, controlling the interactive title panel to be hidden, comprising the following steps:
and when the answer submitting control receives an answer submitting operation, the interactive question panel is controlled to be hidden, or when the timing control judges that the current answer duration reaches the preset answer duration, the interactive question panel is controlled to be hidden.
10. The method for controlling the playing of an interactive video on a browser page according to claim 1,
the method further comprises the steps of:
when the playing progress reaches a preset progress, pausing the playing of the target video by pausing the drawing of each frame of the target video on the canvas;
when the display of the interactive title panel is finished, after the interactive title panel is controlled to be hidden, the method comprises the following steps:
and continuously playing the target video by continuously drawing each frame of picture of the target video on the canvas.
11. A playing control device for interactive video in a browser page is characterized by comprising:
the canvas creating module is used for creating a canvas at the position of the original video player when the target browser requests to display the target page;
the video playing unit is used for playing the target video by drawing each frame of picture of the target video on the canvas;
the playing monitoring unit is used for monitoring the playing progress of the target video;
the theme display unit is used for displaying an interactive theme panel corresponding to a preset progress on the canvas when the playing progress reaches the preset progress;
and the title hiding unit is used for controlling the interactive title panel to be hidden when the display of the interactive title panel is finished.
12. A server, comprising: processor, memory and computer program stored in the memory and executable on the processor, characterized in that the steps of the method according to any of claims 1 to 10 are implemented when the processor executes the computer program.
13. A computer-readable storage medium, in which a computer program is stored which, when being executed by a processor, carries out the steps of the method according to any one of claims 1 to 10.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110782552.2A CN113259752A (en) | 2021-07-12 | 2021-07-12 | Method and device for controlling playing of interactive video in browser page and server |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110782552.2A CN113259752A (en) | 2021-07-12 | 2021-07-12 | Method and device for controlling playing of interactive video in browser page and server |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113259752A true CN113259752A (en) | 2021-08-13 |
Family
ID=77191104
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110782552.2A Pending CN113259752A (en) | 2021-07-12 | 2021-07-12 | Method and device for controlling playing of interactive video in browser page and server |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113259752A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114007118A (en) * | 2021-10-27 | 2022-02-01 | 腾讯科技（深圳）有限公司 | Video game method, video game device, computer readable medium and electronic equipment |
| CN114339400A (en) * | 2021-12-28 | 2022-04-12 | 上海众源网络有限公司 | Video frame extraction method and device, electronic equipment and storage medium |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20180082450A1 (en) * | 2016-01-22 | 2018-03-22 | Tencent Technology (Shenzhen) Company Limited | Data drawing method and apparatus, terminal, and storage medium |
| CN108024139A (en) * | 2017-12-08 | 2018-05-11 | 广州视源电子科技股份有限公司 | Playback method, device, terminal device and the storage medium of Internet video courseware |
| CN110121112A (en) * | 2019-05-14 | 2019-08-13 | 重庆商勤科技有限公司 | A kind of video playing control method based on browser, system and device |
| CN110557670A (en) * | 2019-09-17 | 2019-12-10 | 广州华多网络科技有限公司 | Method, device, terminal and storage medium for playing video in webpage |
| CN111698547A (en) * | 2019-03-11 | 2020-09-22 | 腾讯科技（深圳）有限公司 | Video interaction method and device, storage medium and computer equipment |
| CN112261459A (en) * | 2020-10-23 | 2021-01-22 | 北京字节跳动网络技术有限公司 | Video processing method and device, electronic equipment and storage medium |
| CN112422508A (en) * | 2020-10-19 | 2021-02-26 | 武汉烽火众智数字技术有限责任公司 | Method and system for playing video in browser webpage |
| CN112770142A (en) * | 2019-11-01 | 2021-05-07 | 北京奇艺世纪科技有限公司 | Interactive video interaction method and device and electronic equipment |
| CN112785885A (en) * | 2021-01-29 | 2021-05-11 | 北京乐学帮网络技术有限公司 | Online learning method and device, electronic equipment and storage medium |
-
2021
- 2021-07-12 CN CN202110782552.2A patent/CN113259752A/en active Pending
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20180082450A1 (en) * | 2016-01-22 | 2018-03-22 | Tencent Technology (Shenzhen) Company Limited | Data drawing method and apparatus, terminal, and storage medium |
| CN108024139A (en) * | 2017-12-08 | 2018-05-11 | 广州视源电子科技股份有限公司 | Playback method, device, terminal device and the storage medium of Internet video courseware |
| CN111698547A (en) * | 2019-03-11 | 2020-09-22 | 腾讯科技（深圳）有限公司 | Video interaction method and device, storage medium and computer equipment |
| CN110121112A (en) * | 2019-05-14 | 2019-08-13 | 重庆商勤科技有限公司 | A kind of video playing control method based on browser, system and device |
| CN110557670A (en) * | 2019-09-17 | 2019-12-10 | 广州华多网络科技有限公司 | Method, device, terminal and storage medium for playing video in webpage |
| CN112770142A (en) * | 2019-11-01 | 2021-05-07 | 北京奇艺世纪科技有限公司 | Interactive video interaction method and device and electronic equipment |
| CN112422508A (en) * | 2020-10-19 | 2021-02-26 | 武汉烽火众智数字技术有限责任公司 | Method and system for playing video in browser webpage |
| CN112261459A (en) * | 2020-10-23 | 2021-01-22 | 北京字节跳动网络技术有限公司 | Video processing method and device, electronic equipment and storage medium |
| CN112785885A (en) * | 2021-01-29 | 2021-05-11 | 北京乐学帮网络技术有限公司 | Online learning method and device, electronic equipment and storage medium |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114007118A (en) * | 2021-10-27 | 2022-02-01 | 腾讯科技（深圳）有限公司 | Video game method, video game device, computer readable medium and electronic equipment |
| CN114339400A (en) * | 2021-12-28 | 2022-04-12 | 上海众源网络有限公司 | Video frame extraction method and device, electronic equipment and storage medium |
| CN114339400B (en) * | 2021-12-28 | 2024-02-02 | 上海众源网络有限公司 | Video frame extraction method and device, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20210035609A1 (en) | Video recording method and apparatus, video playing method and apparatus, device, and storage medium | |
| US20100037138A1 (en) | Client-Configurable Video Delivery Platform | |
| US9285945B2 (en) | Method and apparatus for displaying multi-task interface | |
| CN108174302B (en) | Method and device for updating activity function playing method in live broadcast application | |
| US11620784B2 (en) | Virtual scene display method and apparatus, and storage medium | |
| WO2018161811A1 (en) | H5-based page displaying method and terminal | |
| AU2021314277B2 (en) | Interaction method and apparatus, and electronic device and computer-readable storage medium | |
| CN113259752A (en) | Method and device for controlling playing of interactive video in browser page and server | |
| JP2011128204A (en) | Advertisement distribution device, method, and program | |
| CN104980563A (en) | Operation demonstration method and operation demonstration device | |
| US20160117716A1 (en) | Methods and systems for advertising apps | |
| CN109154943A (en) | Conversion based on server of the automatic broadcasting content to click play content | |
| WO2020143159A1 (en) | User interface processing method and device | |
| WO2018126899A1 (en) | Method and device for displaying video interface | |
| CN113253880B (en) | Method and device for processing pages of interaction scene and storage medium | |
| US20170171277A1 (en) | Method and electronic device for multimedia recommendation based on android platform | |
| CN112764871A (en) | Data processing method, data processing device, computer equipment and readable storage medium | |
| JP5563703B2 (en) | Content distribution apparatus, content distribution method, content distribution program, and terminal program | |
| CN113101633B (en) | Cloud game simulation operation method and device and electronic equipment | |
| CN109656463A (en) | The generation method of individual character expression, apparatus and system | |
| CN111866403B (en) | Video graphic content processing method, device, equipment and medium | |
| CN108011968A (en) | The method, terminal and computer-readable recording medium of message are shared in display | |
| US20190109798A1 (en) | Platform-agnostic thick-client system for combined delivery of disparate streaming content and dynamic content by combining dynamic data with output from a continuous queue transmitter | |
| JP2016042372A (en) | Program for terminal, terminal device and terminal control method | |
| CN111708533B (en) | Method and device for setting mouse display state in application thin client |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210813 |