CN110557670B - Method, device, terminal and storage medium for playing video in webpage - Google Patents
Method, device, terminal and storage medium for playing video in webpage Download PDFInfo
- Publication number
- CN110557670B CN110557670B CN201910878023.5A CN201910878023A CN110557670B CN 110557670 B CN110557670 B CN 110557670B CN 201910878023 A CN201910878023 A CN 201910878023A CN 110557670 B CN110557670 B CN 110557670B
- Authority
- CN
- China
- Prior art keywords
- video
- browser
- frame
- decoding
- webpage
- 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.)
- Active
Links
Images
Classifications
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/431—Generation of visual interfaces for content selection or interaction; Content or additional data rendering
- H04N21/4312—Generation of visual interfaces for content selection or interaction; Content or additional data rendering involving specific graphical features, e.g. screen layout, special fonts or colors, blinking icons, highlights or animations
-
- 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/435—Processing of additional data, e.g. decrypting of additional data, reconstructing software from modules extracted from the transport stream
- H04N21/4355—Processing of additional data, e.g. decrypting of additional data, reconstructing software from modules extracted from the transport stream involving reformatting operations of additional data, e.g. HTML pages on a television screen
-
- 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, rendering scenes according to MPEG-4 scene graphs
- H04N21/4402—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display
- H04N21/440218—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display by transcoding between formats or standards, e.g. from MPEG-2 to MPEG-4
-
- 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/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
- H04N21/81—Monomedia components thereof
- H04N21/8166—Monomedia components thereof involving executable data, e.g. software
Abstract
The disclosure relates to a method, a device, a terminal and a storage medium for playing a video in a webpage, and belongs to the technical field of internet. The method comprises the following steps: receiving the coded video data and determining a coding and decoding mode corresponding to the coded video data; if the coding and decoding mode is a coding and decoding mode which is not supported by a preset video module in the browser, decoding the coded video data through a decoder which is preset in other application programs except the browser to obtain a plurality of decoded video frames; the video frame obtained by the decoding process is drawn on the canvas of the webpage in the browser frame by frame. By adopting the method and the device, the effect of normally playing the video data can be realized.
Description
Technical Field
The present disclosure relates to the field of internet technologies, and in particular, to a method, an apparatus, a terminal, and a storage medium for playing a video in a webpage.
Background
More and more users choose to watch live as a way of entertainment. Some users watch live broadcast through a mobile phone, and some users watch live broadcast through a personal computer. For the mode of watching the live broadcast through the personal computer, the user can select to download and install the live broadcast application program, and the live broadcast is watched on the personal computer through the live broadcast application program. However, some users consider the process of downloading and installing the live application to be cumbersome, so that the part of users choose to directly view the live application in the webpage through the browser.
When the personal computer detects that a user clicks a webpage through a browser to watch live broadcasting, the personal computer requests live video data from the server, wherein the live video data are obtained through coding processing. At present, the mainstream browsers are browsers developed based on HTML5 technical framework, and a video module is set in such browsers, and is used for decoding video data encoded in an h.264 coding and decoding mode and playing decoded live video data. If the live video data requested by the personal computer from the server is the video data coded in the H.264 coding and decoding mode, the browser can successfully decode the live video data through the video module in the browser and play the decoded live video data. It should be noted that, for a video module inside a browser, it is impossible to directly play decoded video data acquired from the outside, and the decoding and playing processes need to be uniformly completed in the video module. Meanwhile, due to the limitation of the installation space of the browser, various video modules cannot be integrated in the browser so as to be used for decoding the video data coded by different coding and decoding modes.
And encoding the same video data by adopting an H.265 encoding and decoding mode and an H.264 encoding and decoding mode, wherein the data volume of the video data obtained by encoding in the H.265 encoding and decoding mode is smaller, and the data volume of the video data obtained by encoding in the H.264 encoding and decoding mode is larger. Therefore, in order to save data transmission bandwidth, the server sometimes uses the h.265 codec mode for encoding.
In carrying out the present disclosure, the inventors found that at least the following problems exist:
if the live video data requested by the personal computer from the server is not the video data coded in the h.264 coding and decoding mode (if the h.265 coding and decoding mode is adopted), the browser cannot decode the live video data through the video module inside the browser, and further cannot normally play the live video data.
Disclosure of Invention
In order to overcome the problems in the related art, the present disclosure provides the following technical solutions:
according to a first aspect of the embodiments of the present disclosure, there is provided a method for playing a video in a webpage, the method including:
receiving encoded video data, and determining an encoding and decoding mode corresponding to the encoded video data;
if the coding and decoding mode is a coding and decoding mode which is not supported by a preset video module in the browser, decoding the coded video data through a decoder which is preset in other application programs except the browser to obtain a plurality of decoded video frames;
and drawing the video frame obtained by the decoding processing on a canvas of a webpage in the browser frame by frame.
Optionally, the browser supports an HTML5 technical framework, and the codec mode that is not supported by the preset video module in the browser is an h.265 codec mode.
Optionally, the drawing, frame by frame, the video frame obtained through the decoding process on a canvas of a webpage in the browser includes:
and calling a webGL interface, and drawing the video frames obtained through decoding processing on a canvas of a webpage in the browser frame by frame.
Optionally, the method further comprises:
acquiring a video frame rate;
determining the target number of video frames needing to be drawn in unit time length according to the video frame rate;
the drawing, frame by frame, a video frame obtained by a decoding process on a canvas of a webpage in the browser, including:
and drawing the target number of video frames obtained by decoding processing on a canvas of a webpage in the browser within the unit time length frame by frame.
Optionally, the decoding, by a decoder preset in another application program other than the browser, the encoded video data to obtain a plurality of decoded video frames includes:
decoding the encoded video data through a decoder preset in other application programs except the browser to obtain a plurality of decoded video frames and acquisition time points corresponding to each video frame;
the drawing, frame by frame, a video frame obtained by a decoding process on a canvas of a webpage in the browser, including:
acquiring video frames acquired through decoding processing one by one, determining the acquisition time point of the currently acquired video frame as the drawing starting time point of the currently acquired video frame, determining the acquisition time point of the first video frame acquired after the currently acquired video frame as the drawing ending time point of the currently acquired video frame, and drawing the currently acquired video frame on a canvas of a webpage in the browser based on the drawing starting time point and the drawing ending time point of the currently acquired video frame.
Optionally, the drawing the currently acquired video frame on a canvas of a webpage in the browser based on the starting drawing time point and the ending drawing time point of the currently acquired video frame includes:
when the drawing starting time point of the currently acquired video frame is reached, drawing the currently acquired video frame on a canvas of a webpage in the browser;
and when the end drawing time point of the currently acquired video frame is reached, removing the currently acquired video frame drawn on the canvas of the webpage in the browser.
According to a second aspect of the embodiments of the present disclosure, there is provided an apparatus for playing a video in a webpage, the apparatus including:
the determining module is used for receiving the coded video data and determining a coding and decoding mode corresponding to the coded video data;
the decoding module is used for decoding the coded video data through a decoder preset in other application programs except the browser to obtain a plurality of decoded video frames when the coding and decoding mode is a coding and decoding mode which is not supported by a video module preset in the browser;
and the drawing module is used for drawing the video frames obtained through the decoding processing on the canvas of the webpage in the browser frame by frame.
Optionally, the browser supports an HTML5 technical framework, and the codec mode that is not supported by the preset video module in the browser is an h.265 codec mode.
Optionally, the rendering module is configured to:
and calling a webGL interface, and drawing the video frames obtained through decoding processing on a canvas of a webpage in the browser frame by frame.
Optionally, the apparatus further comprises:
the acquisition module is used for acquiring a video frame rate;
the determining module is further configured to determine a target number of video frames that need to be drawn in a unit duration according to the video frame rate;
and the drawing module is used for drawing the video frames of the target number obtained by decoding processing on the canvas of the webpage in the browser within the unit time length frame by frame.
Optionally, the decoding module is configured to decode the encoded video data through a decoder preset in another application program other than the browser, so as to obtain a plurality of decoded video frames and a corresponding acquisition time point of each video frame;
the rendering module is configured to acquire video frames acquired through decoding one by one, determine a collection time point of a currently acquired video frame as a drawing start time point of the currently acquired video frame, determine a collection time point of a first video frame collected after the currently acquired video frame as a drawing end time point of the currently acquired video frame, and render the currently acquired video frame on a canvas of a webpage in the browser based on the drawing start time point and the drawing end time point of the currently acquired video frame.
Optionally, the rendering module is configured to:
when the drawing starting time point of the currently acquired video frame is reached, drawing the currently acquired video frame on a canvas of a webpage in the browser;
and when the end drawing time point of the currently acquired video frame is reached, removing the currently acquired video frame drawn on the canvas of the webpage in the browser.
According to a third aspect of the embodiments of the present disclosure, there is provided a terminal comprising a processor, a communication interface, a memory, and a communication bus, wherein:
the processor, the communication interface and the memory complete mutual communication through the communication bus;
the memory is used for storing a computer program;
the processor is used for executing the program stored in the memory so as to realize the method for playing the video in the webpage.
According to a fourth aspect of the embodiments of the present disclosure, a computer-readable storage medium is provided, in which a computer program is stored, and the computer program, when executed by a processor, implements the above method for playing a video in a webpage.
The technical scheme provided by the embodiment of the disclosure can have the following beneficial effects:
through the embodiment of the disclosure, if the live video data requested by the terminal from the server is not the video data coded in the h.264 coding and decoding mode, the coded video data is decoded by a decoder preset in other application programs except the browser, and after the decoding process is performed, the video frames obtained through the decoding process can be drawn on the canvas of the webpage in the browser frame by frame, so as to realize the effect of normally playing the live video data.
It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and together with the description, serve to explain the principles of the disclosure. In the drawings:
FIG. 1 is a block diagram illustrating a system for playing a video in a web page in accordance with an exemplary embodiment;
FIG. 2 is a flowchart illustrating a method of playing a video in a web page in accordance with an exemplary embodiment;
FIG. 3 is a flowchart illustrating a method of playing a video in a web page in accordance with an exemplary embodiment;
FIG. 4 is a diagram illustrating a video frame drawing effect according to an exemplary embodiment;
FIG. 5 is a block diagram illustrating an apparatus for playing a video in a webpage according to an exemplary embodiment;
fig. 6 is a schematic diagram illustrating a structure of a terminal according to an exemplary embodiment.
With the foregoing drawings in mind, certain embodiments of the disclosure have been shown and described in more detail below. These drawings and written description are not intended to limit the scope of the disclosed concepts in any way, but rather to illustrate the concepts of the disclosure to those skilled in the art by reference to specific embodiments.
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 implementations described in the exemplary embodiments below are not intended to represent all implementations consistent with the present disclosure. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present disclosure, as detailed in the appended claims.
The embodiment of the disclosure provides a method for playing a video in a webpage, which can be realized by a terminal and can also be realized by the cooperation of a server. The terminal may be a personal computer or the like, among others. Fig. 1 is a schematic structural diagram of a system for playing a video in a webpage according to an embodiment of the present disclosure.
In the application, some users watch live broadcast through a mobile phone, and some users watch live broadcast through a personal computer. For the mode of watching the live broadcast through the personal computer, the user can select to download and install the live broadcast application program, and the live broadcast is watched on the personal computer through the live broadcast application program. However, some users consider the process of downloading and installing the live application to be cumbersome, so that the part of users choose to directly view the live application in the webpage through the browser. A video module (also referred to as a video tag) may be preset in the browser, and the video module may be configured to decode video data encoded in the h.264 codec mode, and may also be configured to play decoded live video data. However, because the installation space of the browser is limited, it is difficult to preset a plurality of video modules in the browser, so that different types of video modules decode video data encoded by different types of coding and decoding modes. Therefore, when the live video data is encoded in the h.265 encoding and decoding mode, the video module preset in the browser cannot normally decode the type of live video data, and thus cannot directly play the live video data in the web page in the browser. The method provided by the embodiment of the present disclosure solves the problem, and when the live video data is data encoded in an h.265 encoding/decoding mode, the live video data may also be directly played in a web page in a browser.
An exemplary embodiment of the present disclosure provides a method for playing a video in a webpage, as shown in fig. 2, a processing flow of the method may include the following steps:
step S201, receiving the encoded video data, and determining an encoding/decoding mode corresponding to the encoded video data.
In implementation, the encoded video data may be live video data or other types of data, which is described in this embodiment of the disclosure, and the other types of data are similar to the live video data, and are not described herein again. The server can receive live video data to be coded uploaded by the anchor terminal, can perform coding processing on the live video data to be coded, and can perform coding processing on the live video data to be coded by adopting different types of coding and decoding modes. The codec modes may include h.264, h.265, etc. modes. When a terminal requests live broadcast of video data, the server can send the encoded video data to the terminal requesting the live broadcast of the video data. Accordingly, the terminal can receive the encoded video data.
The encoded video data may also carry corresponding encoding and decoding mode information, and the terminal may determine the encoding and decoding mode corresponding to the encoded video data based on the encoding and decoding mode information. If the encoding and decoding mode corresponding to the encoded video data is determined to be the H.264 encoding and decoding mode, the terminal can decode the encoded video data through the video module, and can play the decoded live video data in a webpage of the browser.
Step S202, if the coding and decoding mode is a coding and decoding mode which is not supported by a video module preset in the browser, decoding the coded video data through a decoder preset in other application programs except the browser to obtain a plurality of decoded video frames.
In implementation, the codec mode that is not supported by the video module preset in the browser may be predetermined, the codec mode that is not supported by the video module preset in the browser is stored in the unsupported codec mode list, and if the codec mode corresponding to the encoded video data matches any codec mode in the unsupported codec mode list, the codec mode corresponding to the encoded video data is determined to be the codec mode that is not supported by the video module preset in the browser, and the encoded video data may be decoded by a decoder preset in another application program other than the browser. If the browser supports the HTML5 technical framework, the codec mode which is not supported by the preset video module in the browser is H.265 codec mode.
For example, a plurality of applications including a browser and an X video playback application are installed in a personal computer, and a plurality of decoders may be preset in the X video playback application, and the plurality of decoders may be used to perform decoding processing on video data encoded in different types of codec modes. The browser can call the X video playing application program to decode the video data coded by the coding and decoding mode which is not supported by the video module. For example, the browser may call a video playing application program X capable of decoding video data encoded in the h.265 codec mode. After the encoded video data is decoded by a decoder preset in an application program other than the browser, a plurality of decoded video frames can be obtained. The decoded video frames may be YUV (a color coding method, "Y" represents brightness (Luma) or gray scale value, and "U" and "V" represent Chroma (Chroma) and saturation, which are used to specify the color of the pixels) data.
Optionally, if the codec mode is a codec mode that is not supported by a video module preset in the browser, the decoding processing on the encoded video data by a decoder preset in another application program other than the browser to obtain a plurality of decoded video frames may include: if the coding and decoding mode is a coding and decoding mode which is not supported by a preset video module in the browser, and the total number of threads of a Central Processing Unit (CPU) of a terminal where the browser is located is greater than or equal to a preset threshold, decoding the encoded video data by using a decoder which is preset in other application programs except the browser, so as to obtain a plurality of decoded video frames. And if the total number of the CPU threads of the terminal where the browser is located is less than a preset threshold value, requesting the server to issue video data coded by a coding and decoding mode supported by a video module preset in the browser.
In implementation, the server may use different types of codec modes to encode the live video data to be encoded. In order to save data transmission bandwidth, the server can preferentially select to send video data coded by the H.265 coding and decoding mode to the terminal. However, video data encoded in the h.264 codec mode also exists in the server, so different types of video streams exist in the server, and when the terminal cannot normally receive or play the video data encoded in the h.265 codec mode, the server can switch to transmitting the video data encoded in the h.264 codec mode to the terminal.
For a terminal, in the process of decoding encoded video data, CPU resources of the terminal may be used, which may have a certain requirement on the performance of the CPU. If the performance of the CPU is too low, a video playing stuck phenomenon may occur during the decoding process. Therefore, before actually performing the decoding processing, it may be determined in advance whether the total number of the CPU threads is greater than or equal to a preset threshold, and if the total number of the CPU threads is greater than or equal to the preset threshold, it indicates that the performance of the CPU is high, and the process of performing the decoding processing may be adapted. For the browser, the operation parameters of the terminal which can be taken by the browser are limited, for example, the number of cores of a CPU (central processing unit) of the terminal, the model of the CPU, the number of idle threads of the CPU and the like which are difficult to be taken by the browser, but the total number of CPU threads of the terminal can be taken by the browser, so that the performance of the CPU can be judged according to the total number of the CPU threads.
In a possible implementation manner, if the codec mode is a codec mode that is not supported by a video module preset in the browser, and the total number of CPU threads of the terminal where the browser is located is greater than or equal to 4, decoding the encoded video data by using a decoder preset in an application program other than the browser, so as to obtain a plurality of decoded video frames. And if the total number of the CPU threads of the terminal where the browser is located is less than 4, requesting the server to issue video data coded by a coding and decoding mode supported by a video module preset in the browser.
In step S203, the video frame obtained by the decoding process is drawn on the canvas of the webpage in the browser frame by frame.
In implementation, the canvas may also be referred to as a canvas. If the encoded video data is the video data encoded by adopting the H.265 encoding and decoding mode, the video module cannot decode the encoded video data, so that an application program outside the browser is required to assist in decoding, and then a plurality of decoded video frames are returned to the browser. The browser can draw the video frame obtained by the decoding process in the in-browser webpage frame by HTML5 element such as canvas. The canvas has a width and height attribute for describing the size of the display area occupied in the webpage. When the video frame obtained through decoding processing is drawn on the canvas of the webpage in the browser frame by frame, the effect of playing the video frame can be realized, and thus the live video data can be normally watched in the webpage.
Optionally, the method provided by the embodiment of the present disclosure may further include: acquiring a video frame rate; determining the target number of video frames needing to be drawn in unit time length according to the video frame rate; step S203 may include: and drawing the target number of video frames obtained by decoding processing on the canvas of the webpage in the browser within a unit time length frame by frame.
In an implementation, the terminal may obtain a video frame rate, such as 60 frames per second. The target number of video frames that need to be rendered per unit time length may be determined from the video frame rate, for example, if the unit time length is second and the video frame rate is 60 frames per second, the target number of video frames that need to be rendered per unit time length is 60 frames.
Theoretically, the time intervals between every two adjacent video frames are all consistent, but due to network jitter and other reasons, if a packet loss phenomenon occurs, several video frames may be lost between some two adjacent video frames, and the time interval between the two adjacent video frames is relatively large. Furthermore, if a situation that several video frames may be lost between two adjacent video frames is ignored, and the video frames are played at a fixed time interval, a situation that sound and pictures are inconsistent may occur. For example, when 3 video frames in the middle of the first frame and the fifth frame are lost, and the time interval between every two normal adjacent video frames is 16ms, if the playing duration of the first frame is not extended, the fifth frame starts to be played at an interval of 16ms after the first frame is played, when the fifth frame is played, the sent audio may correspond to the picture of the second frame, and further, the sound and the picture may be inconsistent.
And decoding the encoded video data through a decoder preset in other application programs except the browser to obtain a plurality of decoded video frames and acquisition time points corresponding to each video frame. If the target number of the video frames needing to be drawn in unit time length is 60 frames, the terminal can firstly acquire 60 video frames which are not played currently and collected firstly, each video frame corresponds to a collection time point, the collection time point t1 of the first collected video frame in the 60 video frames can be determined, the collection time point t60 of the last collected video frame in the 60 video frames is determined, the time difference obtained by subtracting the collection time point t1 from the collection time point t60 is calculated, and if the time difference is equal to the unit time length, the 60 video frames are drawn on a canvas of a webpage in a browser in the unit time length frame by frame; if the time difference is larger than the unit duration, the number of the video frames is reduced from the last collected video frame in the 60 video frames one by one, the time difference between the new last collected video frame and the first collected video frame is recalculated, and when the recalculated time difference is smaller than or equal to the unit duration, the current remaining video frames are drawn on a canvas of a webpage in the browser within the unit duration frame by frame. The subtracted video frame may be processed at the next unit duration.
Optionally, step S202 may include: decoding the encoded video data through a decoder preset in other application programs except the browser to obtain a plurality of decoded video frames and acquisition time points corresponding to each video frame; step S203 may include: the method comprises the steps of acquiring video frames acquired through decoding processing one by one, determining the acquisition time point of the currently acquired video frame as the drawing starting time point of the currently acquired video frame, determining the acquisition time point of the first video frame acquired after the currently acquired video frame as the drawing ending time point of the currently acquired video frame, and drawing the currently acquired video frame on a canvas of a webpage in a browser based on the drawing starting time point and the drawing ending time point of the currently acquired video frame.
In implementation, after the encoded video data is decoded, in addition to obtaining a plurality of decoded video frames, a corresponding capture time point of each video frame may also be obtained. When the video frames obtained by the decoding processing are drawn, each video frame has a drawing start time point and a drawing end time point, and the corresponding video frame can be drawn at the drawing start time point and cleared at the drawing end time point. Before the video frame is drawn, the video frames obtained by the decoding process may be acquired one by one, the capture time point of the currently acquired video frame may be determined as a start drawing time point of the currently acquired video frame, and the capture time point of the first video frame captured after the currently acquired video frame may be determined as an end drawing time point of the currently acquired video frame.
For example, taking the first video frame as an example, if the capture time point of the first video frame is 0ms, and the capture time point of the second video frame is 16ms, then 0ms may be used as the start rendering time point of the first video frame, and 16ms may be used as the end rendering time point of the first video frame. The first video frame may be drawn on a canvas of a webpage in the browser based on a start drawing time point and an end drawing time point of the first video frame.
Optionally, the step of drawing the currently acquired video frame on the canvas of the webpage in the browser based on the start drawing time point and the end drawing time point of the currently acquired video frame may include: when the starting drawing time point of the currently acquired video frame is reached, drawing the currently acquired video frame on a canvas of a webpage in a browser; and when the end drawing time point of the currently acquired video frame is reached, clearing the currently acquired video frame drawn on the canvas of the webpage in the browser.
In an implementation, when video frames obtained by the decoding process are drawn, each video frame has a drawing start time point and a drawing end time point, and the corresponding video frame may be drawn at the drawing start time point and cleared at the drawing end time point.
For example, the drawing start time point and the drawing end time point of the first video frame are 0ms and 16ms in sequence, when the 0ms is reached, the first video frame may be drawn on the canvas of the webpage page in the browser, and after 16ms is passed and the 16ms is reached, the interface for clearing the canvas in the browser may be called to clear the first video frame drawn on the canvas of the webpage page in the browser. After the first video frame is cleared, the drawing of the second video frame may continue.
Alternatively, step S203 may include: and calling a webGL interface, and drawing the video frames obtained through the decoding processing on a canvas of a webpage page in the browser frame by frame.
In an implementation, the video frame may be drawn on the canvas of the webpage by software or hardware means. The drawing speed of drawing the video frame on the canvas of the webpage page in a hardware mode is higher. The terminal can call a webGL interface, the webGL drawing technology allows JavaScript and OpenGL ES 2.0 to be combined together, and the webGL interface can provide hardware accelerated rendering for HTML5 canvas by adding one JavaScript binding of OpenGL ES 2.0.
When the video frame is drawn, the encoded video data can be continuously received from the server, and the encoded video data can be decoded. Therefore, after the video frame obtained by decoding before is drawn, a new video frame obtained by decoding can be obtained, and the newly obtained video frame obtained by decoding can be continuously drawn by the method provided above, so that the effect of playing live video data is realized.
As shown in fig. 3, the web player may also be referred to as a video module, and the web player may process the encoded video data and audio data, respectively. For the encoded video data, the web player may determine the total number of CPU threads, and if the total number of CPU threads is greater than or equal to a preset threshold and the encoding and decoding mode of the encoded video data is the h.265 encoding and decoding mode, an external decoder is invoked to perform decoding processing on the encoded video data, where the encoded video data may be a file in an flv format, and YUV data may be obtained after the decoding processing. If the codec mode of the encoded video data is the h.264 encoding mode and the encoded video data can be a flv format file, the flv format file can be converted into an mp4 format file, and the mp4 format file can be played through a video module. Then, the webGL interface may be called, and finally the YUV data is rendered and drawn on a canvas. For the audio data, the audio data may be a flv format file, the flv (Flash video, streaming media) format file may be converted into an mp4(Moving Picture Experts Group 4) format file, and the mp4 format file may be played through a video module. A video frame drawn on a canvas by the above method may be as shown in fig. 4.
Through the embodiment of the disclosure, if the live video data requested by the terminal from the server is not the video data coded in the h.264 coding and decoding mode, the coded video data is decoded by a decoder preset in other application programs except the browser, and after the decoding process is performed, the video frames obtained through the decoding process can be drawn on the canvas of the webpage in the browser frame by frame, so as to realize the effect of normally playing the live video data.
Yet another exemplary embodiment of the present disclosure provides an apparatus for playing a video in a webpage, as shown in fig. 5, the apparatus including:
a determining module 501, configured to receive encoded video data and determine an encoding/decoding mode corresponding to the encoded video data;
a decoding module 502, configured to, when the coding and decoding mode is a coding and decoding mode that is not supported by a video module preset in a browser, perform decoding processing on the encoded video data through a decoder preset in another application program other than the browser, to obtain a plurality of decoded video frames;
a drawing module 503, configured to draw the video frame obtained through the decoding process on the canvas of the webpage in the browser frame by frame.
Optionally, the browser supports an HTML5 technical framework, and the codec mode that is not supported by the preset video module in the browser is an h.265 codec mode.
Optionally, the drawing module 503 is configured to:
and calling a webGL interface, and drawing the video frames obtained through decoding processing on a canvas of a webpage in the browser frame by frame.
Optionally, the apparatus further comprises:
the acquisition module is used for acquiring a video frame rate;
the determining module 501 is further configured to determine, according to the video frame rate, a target number of video frames that need to be drawn in a unit duration;
the drawing module 503 is configured to draw the target number of video frames obtained through the decoding processing on the canvas of the webpage in the browser frame by frame within the unit time length.
Optionally, the decoding module 502 is configured to decode the encoded video data through a decoder preset in another application program other than the browser, so as to obtain a plurality of decoded video frames and a corresponding acquisition time point of each video frame;
the drawing module 503 is configured to acquire video frames acquired through decoding one by one, determine a collection time point of a currently acquired video frame as a drawing start time point of the currently acquired video frame, determine a collection time point of a first video frame collected after the currently acquired video frame as a drawing end time point of the currently acquired video frame, and draw the currently acquired video frame on a canvas of a webpage in the browser based on the drawing start time point and the drawing end time point of the currently acquired video frame.
Optionally, the drawing module 503 is configured to:
when the drawing starting time point of the currently acquired video frame is reached, drawing the currently acquired video frame on a canvas of a webpage in the browser;
and when the end drawing time point of the currently acquired video frame is reached, removing the currently acquired video frame drawn on the canvas of the webpage in the browser.
With regard to the apparatus in the above-described embodiment, the specific manner in which each module performs the operation has been described in detail in the embodiment related to the method, and will not be elaborated here.
Through the embodiment of the disclosure, if the live video data requested by the terminal from the server is not the video data coded in the h.264 coding and decoding mode, the coded video data is decoded by a decoder preset in other application programs except the browser, and after the decoding process is performed, the video frames obtained through the decoding process can be drawn on the canvas of the webpage in the browser frame by frame, so as to realize the effect of normally playing the live video data.
It should be noted that: in the above embodiment, when the apparatus for playing a video in a web page plays a video in the web page, only the division of the functional modules is used for illustration, in practical applications, the function distribution may be completed by different functional modules according to needs, that is, the internal structure of the terminal is divided into different functional modules, so as to complete all or part of the above described functions. In addition, the apparatus for playing a video in a web page provided by the above embodiment and the method embodiment for playing a video in a web page belong to the same concept, and specific implementation processes thereof are detailed in the method embodiment and are not described herein again.
Fig. 6 shows a schematic structural diagram of a terminal 1900 provided in an exemplary embodiment of the present disclosure. The terminal 1900, which may vary significantly depending on configuration or performance, may include one or more processors (CPUs) 1910 and one or more memories 1920. The memory 1920 stores at least one instruction, which is loaded and executed by the processor 1910 to implement the method for playing video in a webpage according to the above embodiments.
Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the disclosure disclosed herein. This application is intended to cover any variations, uses, or adaptations of the disclosure following, in general, the principles of the disclosure and including such departures from the present disclosure as come within known or customary practice within the art to which the disclosure pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the disclosure being indicated by the following claims.
It will be understood that the present disclosure is not limited to the precise arrangements described above and shown in the drawings and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.
Claims (10)
1. A method for playing a video in a web page, the method comprising:
receiving encoded video data, and determining an encoding and decoding mode corresponding to the encoded video data;
if the coding and decoding mode is a coding and decoding mode which is not supported by a preset video module in a browser and the total number of processor threads of a terminal where the browser is located is greater than or equal to a preset threshold value, decoding the coded video data through a decoder which is preset in other application programs except the browser to obtain a plurality of decoded video frames; if the coding and decoding mode is a coding and decoding mode which is not supported by a preset video module in the browser and the total number of processor threads of a terminal where the browser is located is less than the preset threshold, requesting a server to issue video data coded by the coding and decoding mode which is supported by the preset video module in the browser;
and drawing the video frame obtained by the decoding processing on a canvas of a webpage in the browser frame by frame.
2. The method of claim 1, wherein the browser supports HTML5 technical framework, and wherein the codec mode not supported by the preset video module in the browser is h.265 codec mode.
3. The method according to claim 1, wherein said drawing a video frame obtained by a decoding process on a canvas of a webpage in the browser frame by frame comprises:
and calling a webGL interface, and drawing the video frames obtained through decoding processing on a canvas of a webpage in the browser frame by frame.
4. The method of claim 1, further comprising:
acquiring a video frame rate;
determining the target number of video frames needing to be drawn in unit time length according to the video frame rate;
the drawing, frame by frame, a video frame obtained by a decoding process on a canvas of a webpage in the browser, including:
and drawing the target number of video frames obtained by decoding processing on a canvas of a webpage in the browser within the unit time length frame by frame.
5. The method according to claim 1, wherein the decoding the encoded video data by a decoder preset in an application program other than the browser to obtain a plurality of decoded video frames comprises:
decoding the encoded video data through a decoder preset in other application programs except the browser to obtain a plurality of decoded video frames and acquisition time points corresponding to each video frame;
the drawing, frame by frame, a video frame obtained by a decoding process on a canvas of a webpage in the browser, including:
acquiring video frames acquired through decoding processing one by one, determining the acquisition time point of the currently acquired video frame as the drawing starting time point of the currently acquired video frame, determining the acquisition time point of the first video frame acquired after the currently acquired video frame as the drawing ending time point of the currently acquired video frame, and drawing the currently acquired video frame on a canvas of a webpage in the browser based on the drawing starting time point and the drawing ending time point of the currently acquired video frame.
6. The method according to claim 5, wherein said drawing the currently captured video frame on a canvas of a webpage in the browser based on a start drawing time point and an end drawing time point of the currently captured video frame comprises:
when the drawing starting time point of the currently acquired video frame is reached, drawing the currently acquired video frame on a canvas of a webpage in the browser;
and when the end drawing time point of the currently acquired video frame is reached, removing the currently acquired video frame drawn on the canvas of the webpage in the browser.
7. An apparatus for playing a video in a web page, the apparatus comprising:
the determining module is used for receiving the coded video data and determining a coding and decoding mode corresponding to the coded video data;
the decoding module is used for decoding the encoded video data through a decoder preset in other application programs except the browser to obtain a plurality of decoded video frames when the coding and decoding mode is a coding and decoding mode which is not supported by a video module preset in the browser and the total number of processor threads of a terminal where the browser is located is greater than or equal to a preset threshold; when the coding and decoding mode is a coding and decoding mode which is not supported by a preset video module in the browser and the total number of processor threads of a terminal where the browser is located is less than the preset threshold, requesting a server to issue video data coded by the coding and decoding mode which is supported by the preset video module in the browser;
and the drawing module is used for drawing the video frames obtained through the decoding processing on the canvas of the webpage in the browser frame by frame.
8. The apparatus of claim 7, wherein the browser supports HTML5 technical framework, and wherein the codec mode not supported by the preset video module in the browser is h.265 codec mode.
9. A terminal, characterized in that the terminal comprises a processor, a communication interface, a memory and a communication bus, wherein:
the processor, the communication interface and the memory complete mutual communication through the communication bus;
the memory is used for storing a computer program;
the processor is configured to execute the program stored in the memory to implement the method steps of any of claims 1-6.
10. A computer-readable storage medium, characterized in that a computer program is stored in the computer-readable storage medium, which computer program, when being executed by a processor, carries out the method steps of any one of claims 1 to 6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910878023.5A CN110557670B (en) | 2019-09-17 | 2019-09-17 | Method, device, terminal and storage medium for playing video in webpage |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910878023.5A CN110557670B (en) | 2019-09-17 | 2019-09-17 | Method, device, terminal and storage medium for playing video in webpage |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110557670A CN110557670A (en) | 2019-12-10 |
| CN110557670B true CN110557670B (en) | 2021-12-21 |
Family
ID=68740573
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910878023.5A Active CN110557670B (en) | 2019-09-17 | 2019-09-17 | Method, device, terminal and storage medium for playing video in webpage |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110557670B (en) |
Families Citing this family (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111356023B (en) * | 2019-12-30 | 2021-12-24 | 杭州海康威视数字技术股份有限公司 | Playing mode determining method and device |
| CN111372128A (en) * | 2020-03-11 | 2020-07-03 | 北京旷视科技有限公司 | Video playing method and device, computer equipment and readable storage medium |
| CN111355976B (en) * | 2020-03-31 | 2022-10-11 | 北京东方国信科技股份有限公司 | Video live broadcast method and system based on HEVC standard |
| CN111554312A (en) * | 2020-05-15 | 2020-08-18 | 西安万像电子科技有限公司 | Method, device and system for controlling audio coding type |
| CN114390353A (en) * | 2020-10-21 | 2022-04-22 | 西安诺瓦星云科技股份有限公司 | Program playing method, device and system and computer readable storage medium |
| CN112291568B (en) * | 2020-11-13 | 2022-12-20 | Oppo广东移动通信有限公司 | Data processing method, device, medium, network access equipment and electronic equipment |
| CN112788431A (en) * | 2020-12-24 | 2021-05-11 | 四川云从天府人工智能科技有限公司 | Video playing method, device, system, medium and browser based on HTML5 |
| CN112929733B (en) * | 2021-01-18 | 2022-06-28 | 稿定（厦门）科技有限公司 | Video preview playing method and device |
| CN113395585A (en) * | 2021-02-09 | 2021-09-14 | 腾讯科技（北京）有限公司 | Video detection method, video playing control method and device and electronic equipment |
| CN114979719A (en) * | 2021-02-24 | 2022-08-30 | 北京金山云网络技术有限公司 | Video playing method, device, medium and electronic equipment |
| CN113259752A (en) * | 2021-07-12 | 2021-08-13 | 广州闪畅信息科技有限公司 | Method and device for controlling playing of interactive video in browser page and server |
| CN113691740A (en) * | 2021-07-13 | 2021-11-23 | 稿定（厦门）科技有限公司 | Mobile terminal webpage video background processing method, system and storage medium |
| CN113840173A (en) * | 2021-09-18 | 2021-12-24 | 北京百度网讯科技有限公司 | Webpage video playing method, device, equipment, storage medium and program product |
| CN114125550A (en) * | 2021-11-24 | 2022-03-01 | 天翼数字生活科技有限公司 | Video processing method, device and equipment and readable storage medium |
Family Cites Families (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8448214B2 (en) * | 2009-11-17 | 2013-05-21 | Broadcom Corporation | Method and system for providing complete internet anywhere with partial server processing |
| EP2767905A1 (en) * | 2013-02-15 | 2014-08-20 | Samsung Electronics Co., Ltd | Terminal apparatus, server, browser of terminal apparatus operating system and method of operating browser |
| CN104346228B (en) * | 2013-07-26 | 2017-12-05 | 华为终端有限公司 | The method and terminal of sharing application program |
| US10412130B2 (en) * | 2016-04-04 | 2019-09-10 | Hanwha Techwin Co., Ltd. | Method and apparatus for playing media stream on web browser |
| KR102321859B1 (en) * | 2016-07-21 | 2021-11-03 | 한화테크윈 주식회사 | Method and apparatus for streaming media data using java script |
| CN109547838B (en) * | 2018-12-06 | 2021-06-01 | 青岛海信传媒网络技术有限公司 | Video window processing method and device |
-
2019
- 2019-09-17 CN CN201910878023.5A patent/CN110557670B/en active Active
Also Published As
| Publication number | Publication date |
|---|---|
| CN110557670A (en) | 2019-12-10 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110557670B (en) | Method, device, terminal and storage medium for playing video in webpage | |
| CN109168014B (en) | Live broadcast method, device, equipment and storage medium | |
| US10225613B2 (en) | Method and apparatus for video playing processing and television | |
| CN110636346B (en) | Code rate self-adaptive switching method and device, electronic equipment and storage medium | |
| CN110784740A (en) | Video processing method, device, server and readable storage medium | |
| US20230144483A1 (en) | Method for encoding video data, device, and storage medium | |
| CN107911709A (en) | live interface display method, device and terminal | |
| CN111447455A (en) | Live video stream playback processing method and device and computing equipment | |
| CN105359544A (en) | Trick play in digital video streaming | |
| WO2017185609A1 (en) | Video processing method and device | |
| CN110519640B (en) | Video processing method, encoder, CDN server, decoder, device, and medium | |
| CN108769816B (en) | Video playing method, device and storage medium | |
| CN113473126B (en) | Video stream processing method and device, electronic equipment and computer readable medium | |
| US20210320957A1 (en) | Method of requesting video, computing device, and computer-program product | |
| US11438645B2 (en) | Media information processing method, related device, and computer storage medium | |
| CN108966006A (en) | Playback method, browser equipment and the readable storage medium storing program for executing of video | |
| CN108471548B (en) | Live video quick playing method and device | |
| CN109862409A (en) | Video decoding, playback method, device, system, terminal and storage medium | |
| CN109963176B (en) | Video code stream processing method and device, network equipment and readable storage medium | |
| CN107634928B (en) | Code stream data processing method and device | |
| CN106612462B (en) | Fast forward and fast backward processing method and terminal | |
| CN112804579B (en) | Video playing method and device, computer equipment and readable storage medium | |
| CN112714341B (en) | Information acquisition method, cloud set top box system, entity set top box and storage medium | |
| US20150026711A1 (en) | Method and apparatus for video content distribution | |
| CN115278307A (en) | Video playing method, device, equipment and medium |
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 | ||
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20210115 Address after: 511442 3108, 79 Wanbo 2nd Road, Nancun Town, Panyu District, Guangzhou City, Guangdong Province Applicant after: GUANGZHOU CUBESILI INFORMATION TECHNOLOGY Co.,Ltd. Address before: 511446 28th floor, block B1, Wanda Plaza, Wanbo business district, Nancun Town, Panyu District, Guangzhou City, Guangdong Province Applicant before: GUANGZHOU HUADUO NETWORK TECHNOLOGY Co.,Ltd. |
|
| EE01 | Entry into force of recordation of patent licensing contract | ||
| EE01 | Entry into force of recordation of patent licensing contract |
Application publication date: 20191210 Assignee: GUANGZHOU HUADUO NETWORK TECHNOLOGY Co.,Ltd. Assignor: GUANGZHOU CUBESILI INFORMATION TECHNOLOGY Co.,Ltd. Contract record no.: X2021440000054 Denomination of invention: Method, device, terminal and storage medium for playing video in web page License type: Common License Record date: 20210208 |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |