Video processing method and apparatus

Abstract

The application discloses a video processing method and device, and relates to the technical field of computers. A specific implementation of the method comprises the following steps: creating a video tag in a browser engine, and obtaining a to-be-processed video based on the video tag; the to-be-processed video corresponds to a pre-prepared mask video; for any pair of video frames in the to-be-processed video and the mask video, using a shader based on a preset drawing protocol to set the transparency of the background part pixels identified by a second color in the mask frame of the pair of video frames to a first numerical value; for any pixel of the subject part identified by a first color in the mask frame of the pair of video frames, using the shader to assign the color of the corresponding pixel in the to-be-processed frame of the pair of video frames to any pixel and set the transparency of any pixel to a second numerical value, so that the mask frame forms a target frame; and outputting a target video composed of the target frame on a webpage for display. The implementation can realize transparent presentation of the video background in the webpage.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular to a video processing method and apparatus. Background Technology

[0002] With the increasing application and popularity of media functions on web platforms, video, due to its high compression rate and ease of use, has been widely used in webpage decoration and content. However, because current webpage video playback does not support transparent background display, it is difficult to integrate videos with text and other content on webpages effectively. For example, if special effects videos of the sky or the sea could be organically combined with webpage content, it would enrich the webpage's visual appeal; however, due to current technological limitations, the background of these special effects videos cannot be made transparent, preventing such organic integration. Summary of the Invention

[0003] In view of this, embodiments of the present invention provide a video processing method and apparatus that can achieve transparent presentation of video backgrounds in web pages.

[0004] To achieve the above objectives, according to one aspect of the present invention, a video processing method is provided.

[0005] The video processing method of this invention includes: creating a video tag in a browser engine, and obtaining a video to be processed based on the video tag; wherein the video to be processed corresponds to a pre-made masking video, the masking video and the video to be processed having a main body portion and a background portion with the same shape and size; the pixels of the main body portion of the masking video are a first color, and the pixels of the background portion are a second color different from the first color; for any pair of video frames in the video to be processed and the masking video, using a shader based on a preset drawing protocol, setting the transparency of the background portion pixels identified by the second color in the masking frame of the pair of video frames to a first value representing high transparency; for any pixel of the main body portion identified by the first color in the masking frame of the pair of video frames, using the shader, assigning the color of the corresponding pixel in the video to be processed in the pair of video frames to the any pixel, and setting the transparency of the any pixel to a second value representing low transparency, so that the masking frame forms a target frame; and outputting the target video composed of the target frames on a webpage for display.

[0006] Optionally, the method further includes: before setting the transparency of the background portion pixels identified by the second color in the mask frame of the pair of video frames to a first value representing high transparency using a shader based on a preset drawing protocol, creating a canvas tag in the browser engine, and attaching the pair of video frames as a texture to a buffer created by calling the drawing protocol interface based on the canvas formed by the canvas tag.

[0007] Optionally, the first color is white; and the step of assigning the color of the corresponding pixel in the frame to be processed of the pair of video frames to any pixel using the shader includes: determining the corresponding pixel in the frame to be processed that has the same coordinates as any pixel; adding the pixel value of any pixel to the pixel value of the corresponding pixel to obtain the pixel value of any pixel in the target frame.

[0008] Optionally, the second color is black, the first value is zero, the second value is one, and the shader is a vertex shader.

[0009] Optionally, the video tag is the Video tag of HTML5, the canvas tag is the Canvas tag of HTML5, and the drawing protocol is the WebGL drawing protocol.

[0010] To achieve the above objectives, according to another aspect of the present invention, a video processing apparatus is provided.

[0011] The video processing apparatus of this invention may include: a video determination unit, configured to create video tags in a browser engine and obtain a video to be processed based on the video tags; wherein the video to be processed corresponds to a pre-made mask video, the mask video and the video to be processed having a main body portion and a background portion with the same shape and size; the main body portion pixels of the mask video are a first color, and the background portion pixels are a second color different from the first color; a target frame forming unit, configured to: for any pair of video frames in the video to be processed and the mask video, use a shader based on a preset drawing protocol to set the transparency of the background portion pixels identified by the second color in the mask frame of the pair of video frames to a first value representing high transparency; for any pixel of the main body portion identified by the first color in the mask frame of the pair of video frames, use the shader to assign the color of the corresponding pixel in the video to be processed in the pair of video frames to the any pixel, and set the transparency of the any pixel to a second value representing low transparency, so that the mask frame forms a target frame; and an output unit, configured to output the target video composed of the target frames on a webpage for display.

[0012] Optionally, the first color is white; the apparatus further includes: a buffer unit, configured to: before setting the transparency of the background portion pixels identified by the second color in the mask frame of the pair of video frames to a first value representing high transparency using a shader based on a preset drawing protocol, create a canvas tag in the browser engine, and attach the pair of video frames as textures to a buffer created by calling the drawing protocol interface based on the canvas formed by the canvas tag; the target frame forming unit is further configured to: determine the corresponding pixel in the frame to be processed that has the same coordinates as any of the pixels; add the pixel value of the any of the pixels to the pixel value of the corresponding pixel to obtain the pixel value of the any of the pixels in the target frame.

[0013] Optionally, the second color is black, the first value is zero, the second value is one, the shader is a vertex shader, the video tag is the HTML5 Video tag, the canvas tag is the HTML5 Canvas tag, and the drawing protocol is the WebGL drawing protocol.

[0014] To achieve the above objectives, according to another aspect of the present invention, an electronic device is provided.

[0015] An electronic device according to the present invention includes: one or more processors; and a storage device for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the video processing method provided by the present invention.

[0016] To achieve the above objectives, according to another aspect of the present invention, a computer-readable storage medium is provided.

[0017] The present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the video processing method provided by the present invention.

[0018] According to the technical solution of the present invention, the embodiments described above have the following advantages or beneficial effects:

[0019] Before making the background transparent of the video to be processed on the webpage, a corresponding mask video is pre-created. This mask video is identical to the video to be processed except for its color. In terms of color, the main body and background of the mask video each have a first color and a second color, respectively, allowing for accurate differentiation between the main body and background in the video. When drawing using the vertex shader, the background in the mask video is positioned using the second color and its opacity is set to zero. The main body in the mask video is positioned using the first color and its color is assigned to the corresponding pixel in the video to be processed (i.e., assigned the original color). This achieves background transparency while ensuring the quality of the main video image, which helps to expand the scope of video usage on the webpage, improve the video's visual effect, and enrich the webpage's content presentation.

[0020] The further effects of the aforementioned unconventional alternative methods will be explained below in conjunction with specific implementation methods. Attached Figure Description

[0021] The accompanying drawings are provided to better understand the invention and are not intended to unduly limit the scope of the invention. Wherein:

[0022] Figure 1 This is a schematic diagram of the main steps of the video processing method in an embodiment of the present invention;

[0023] Figure 2 This is a schematic diagram of the video to be processed and the masked video according to an embodiment of the present invention;

[0024] Figure 3 This is a schematic diagram of the WebGL rendering process according to an embodiment of the present invention;

[0025] Figure 4 This is a schematic diagram illustrating the specific execution steps of the video processing method in an embodiment of the present invention;

[0026] Figure 5 This is a schematic diagram of the components of the video processing device in an embodiment of the present invention;

[0027] Figure 6 This is an exemplary system architecture diagram that can be applied thereto according to embodiments of the present invention;

[0028] Figure 7 This is a schematic diagram of the electronic device structure used to implement the video processing method in the embodiments of the present invention. Detailed Implementation

[0029] The following description, in conjunction with the accompanying drawings, illustrates exemplary embodiments of the present invention, including various details to aid understanding. These details should be considered merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of the invention. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description.

[0030] It should be noted that, unless otherwise specified, the embodiments of the present invention and the technical features thereof can be combined with each other.

[0031] Figure 1 This is a schematic diagram of the main steps of the video processing method according to an embodiment of the present invention.

[0032] like Figure 1 As shown, the video processing method of this invention can be executed by a front-end Web platform, and the specific execution steps are as follows:

[0033] Step S101: Create video tags in the browser engine and obtain the video to be processed based on the video tags.

[0034] In this embodiment of the invention, the browser engine can be any browser engine that supports HTML5 (HTML stands for HyperText Markup Language), and the video tag can be the HTML5 Video tag. The video tag is used to define video in a webpage, such as video streams of various formats. In this step, in order to present the video with a transparent background in the webpage, the web platform first creates a video tag, and after assigning values ​​to various parameters of the video tag (such as the video stream address src) and adding the video tag using relevant methods, adds the video tag to the webpage, thereby initializing the video element, that is, obtaining the video to be processed in the webpage. It should be noted that the video to be processed above refers to the initial video directly obtained using the src parameter, and the colors of the subject and background in the video to be processed are the initial colors (i.e., the original colors) without subsequent processing. It can be understood that the subject above refers to the target to be presented in the image or video, and the background refers to the part outside the subject.

[0035] Specifically, in the practical application of this invention, for any video to be processed, the operator pre-creates a corresponding mask video. The mask video differs from the video to be processed only in the color of the main body or background portion; everything else is identical. That is, the mask video and the corresponding video to be processed have a main body portion of the same shape and size, and a background portion of the same shape and size. The only difference between them is that the colors of some pixels in the main body or background portion may differ. Furthermore, in the mask video, the main body portion and the background portion can be accurately distinguished by color (i.e., pixel values). The pixels of the main body portion are a first color, and the pixels of the background portion are a second color, where the second color is different from the first color. For example, if the main body portion of the mask video is set to white (first color) and the background portion is set to black (second color), then all pixels of the main body portion in the mask video can be located by selecting white pixel values, and all pixels of the background portion in the mask video can be located by selecting black pixel values. The black and white values ​​mentioned above are merely examples; any other applicable colors can be used for the first and second colors.

[0036] Obviously, for corresponding videos to be processed and masked videos, a pair of video frames at the same video playback time (including the to be processed frame in the to be processed video and the masked frame in the masked video) are corresponding to each other. That is, in a pair of video frames, the to be processed frame and the masked frame may only have color differences in the main body or background parts, and both have background parts with the same shape and size as the main body parts. Figure 2 This is a schematic diagram of the video to be processed and the masked video according to an embodiment of the present invention. The left half is the masked frame of the masked video at a certain moment, and the right half is the frame to be processed of the video to be processed at the same moment. It can be seen that in the masked frame in the left half, the main body and the background are strictly separated by white and black colors; in the frame to be processed in the right half, the color of the main body is its natural color, and the only difference between the left and right halves is the color of the main body. In this step, after obtaining the video to be processed, the Web platform retrieves the corresponding masked video according to a pre-determined storage address.

[0037] Step S102: For any pair of video frames in the video to be processed and the masked video, use a shader based on a preset drawing protocol to set the transparency of the background pixels identified by the second color in the masked frame of the pair of video frames to a first value representing high transparency; for any pixel in the main body portion identified by the first color in the masked frame of the pair of video frames, use a shader to assign the color of the corresponding pixel in the frame to be processed of the pair of video frames to the pixel and set the transparency of the pixel to a second value representing low transparency, so that the masked frame forms the target frame.

[0038] In this step, background transparency can be achieved using shaders created based on a predefined drawing protocol such as WebGL (Web Graphics Library). In practical applications, shaders in the WebGL system can include vertex shaders and fragment shaders. Both of these shaders are known functional modules in graphics cards. Vertex shaders are generally used to calculate vertex-related data, while fragment shaders are generally used to process fragments generated after rasterization. For this step, the background transparency is mainly performed by the vertex shader.

[0039] Preferably, the web platform performs a similar processing procedure for each pair of video frames in the video to be processed and the masking video to achieve background transparency. Taking any pair of video frames as an example, after obtaining the video to be processed and the masking video, the web platform first creates a canvas tag (such as the HTML5 Canvas tag) in the browser engine. The canvas tag forms a canvas, and based on the canvas, the pair of video frames are attached as textures to the buffer created by calling the drawing protocol interface (such as the WebGL createBuffer interface). Then, background transparency processing can be performed in the buffer. It can be understood that the canvas tag can also be pre-created at a historical moment.

[0040] Specifically, the web platform uses a vertex shader to independently execute two steps for each mask frame. These two steps can be executed in any order, either sequentially or simultaneously. First, the web platform sets the transparency (i.e., the alpha value) of the background pixels identified by the second color in the mask frame of the pair of video frames to a first value. This first value represents high transparency (including complete transparency) and can be zero or a value close to zero (such as a positive number less than 0.1), depending on the actual situation. In this way, by accurately locating the background portion in the mask frame using the second color and setting its transparency to zero, the background portion is made transparent.

[0041] Secondly, for any pixel in the main body portion identified by the first color in the masking frame of the pair of video frames, the Web platform assigns the color of the corresponding pixel in the frame to be processed (i.e., the pixel whose coordinates in the frame to be processed are the same as the coordinates of any of the above pixels in the masking frame) to any of the above pixels, and sets the transparency of any of the above pixels to a second value. The second value represents low transparency (including opacity), and can be a value of 1 or slightly less than 1 (such as a value between 0.9 and 1) depending on the actual situation. In this way, the Web platform first uses the first color to accurately locate the main body portion in the masking frame, and then assigns the main body portion a value using the original color of the corresponding pixel in the frame to be processed, and sets the main body portion to low transparency, thereby realizing the color restoration of the main body portion and its normal presentation on the webpage. After the above processing, the above masking frame finally forms a target frame with a transparent background and an original color main body, which meets the pre-display requirements. When each masking frame in the masked video becomes a target frame, the masked video becomes a target video with a transparent background and an original color main body, which meets the pre-display requirements.

[0042] In practical applications, the background of videos generated through video tags is generally black. Therefore, some traditional techniques achieve background transparency by directly setting the transparency of black pixels to zero. However, since the subject pixels often also contain black pixels, this method severely degrades image quality. The method described in this invention overcomes this defect. As can be seen from the above description, this invention first strictly defines the subject and background by masking the video, and then assigns transparency and color values ​​to the accurately segmented subject and background to achieve background transparency, thus without damaging the subject of the image.

[0043] In one embodiment, when the main body of the masked video is white, the web platform can assign color values ​​using image addition. Specifically, in this case, the web platform first determines the corresponding pixel in the frame to be processed that has the same coordinates as any of the aforementioned pixels. Then, it adds the pixel value of any of the aforementioned pixels to the pixel value of the corresponding pixel to obtain the pixel value of any of the aforementioned pixels in the target frame, thereby more conveniently assigning color values ​​to the pixels of the main body in the masked video.

[0044] Step S103: Output the target video composed of target frames on the webpage for display.

[0045] In this step, the Web platform renders the previously generated target video with a transparent background and natural subject, which meets the pre-defined requirements, onto the webpage and displays it to the user, thereby achieving the page display of the transparent background video. Since the target video can be organically combined with the text and other content in the webpage, the solution of this invention can expand the scope of video use in the webpage, improve the video usage effect, and enrich the content presentation of the webpage.

[0046] Figure 3 This is a schematic diagram of the WebGL rendering process according to an embodiment of the present invention. See also: Figure 3 First, JavaScript creates a buffer object through the interface provided by WebGL, passing the necessary coordinates and color information into the buffer. Next, the vertex shader reads the data from the buffer object, extracting the vertex coordinates and their corresponding RGB (red, green, and blue) color component values ​​based on the passed parameters. After obtaining the vertex coordinate data, the graphics rendering process instructs WebGL to draw the graphics based on these coordinates. Subsequently, rasterization converts the area covered by the graphics into pixel fill information, involving known algorithms such as anti-aliasing and sampling. After rasterization, WebGL calls the fragment shader to draw each fragment, ultimately filling each pixel with the rasterized color and writing it to the color buffer, thus displaying the final graphics and colors in the browser.

[0047] The following describes a specific embodiment of the present invention, which relates to introducing animated video into a webpage. See also... Figure 2 and Figure 4 .

[0048] The following are some existing methods for embedding videos in web pages:

[0049] First, GIF animation: GIF is a compressed bitmap format that supports transparent background images and is suitable for multiple operating systems. GIF is created by saving multiple images into one image file, thus forming a video. It can be created using relevant software and finally embedded into a webpage by front-end engineers using front-end technologies.

[0050] Second, Video animation: Video is a new tag element introduced in HTML5. You can directly assign the video file address to the src attribute to complete the video presentation. At the same time, you can set the video to play automatically or loop to achieve video effects.

[0051] Third, CSS3 (Cascading Style Sheets) animations: CSS3 transition animations can smoothly animate changes in the style or state of an element, achieving the effect of animated videos. CSS3 animations are true CSS3 animations; through the control of keyframes and loop counts, page elements smoothly transition according to pre-defined style changes, and complex animation effects can be achieved.

[0052] The three methods mentioned above are just the most frequently used animation techniques in front-end development. In addition, animation can also be implemented using other technologies, such as Flash, JavaScript + HTML, JavaScript + Canvas, etc.

[0053] Existing methods for embedding animated videos in web pages have the following drawbacks:

[0054] (1) GIF animations only support 256 colors, so detailed animations may appear to have been color-corrected. They also only support limited transparency and lack semi-transparency or fading effects. In addition, high-definition GIF animations are relatively large in size. If compressed and displayed, frame loss will result in poor interactivity. The large size will also have a certain impact on the performance of the front-end page. If a large number of GIF images are introduced during the initial rendering process, page rendering will be blocked due to loading, resulting in a white screen. In this case, the user experience is very poor.

[0055] (2) The default background color of the Video tag is black. If you want to achieve other colors, you can use CSS styles and z-index of hierarchical elements to modify and override them, but you cannot achieve a transparent background.

[0056] (3) CSS3 is currently a popular way to implement animation, but its animation implementation is limited to a certain tag element, and the animation effect is relatively simple and single, such as rotation, scaling, and gradation. It is more suitable for optimizing the interactive effect of the page and satisfying the user's basic perception. However, if you want to achieve complex animation effects, then CSS3 properties are not enough.

[0057] This embodiment primarily addresses the shortcomings of existing technologies for displaying complex animation effects on web front-end pages. Existing technologies often result in excessive static resources, large file sizes, and slow page loading. Furthermore, existing resources may be too simplistic, failing to achieve the desired effects. This invention leverages the inherent advantages of WebGL—its ability to render high-performance interactive 3D and 2D graphics in any compatible web browser—and the excellent animation rendering capabilities of Canvas. By reconstructing and optimizing the Video tag to include an alpha channel (transparency), it enables transparent background colors. Combined with the Video tag's looping, autoplay, and audio channel features, it achieves high-performance, small-sized animations that can also play sound. Finally, after further encapsulation and packaging, it is published to the NPM (Node Package Manager) repository. For users, it is simply a plugin; they only need to download and configure the relevant parameters for easy use.

[0058] This technical solution will eventually be released on NPM as a plugin, which reduces the learning cost for users and allows for out-of-the-box use. At the same time, this plugin combines the advantages of technologies such as Canvas, WebGL, and Video, reducing page performance consumption and unnecessary lag when used and displayed on web front-end pages, resulting in a good user experience.

[0059] The specific execution steps of this embodiment are as follows:

[0060] Step 1: Define a class, namely the constructor AlphaVideo in JavaScript, and set the default parameters autoplay: true (whether to play automatically), onError (error handling function), and onPlay (video playback function). In addition, this constructor can also set parameters src (video stream address), loop (whether to loop), Canvas (the canvas element for the animation), width (width), and height (height). After calling this constructor and passing in the corresponding parameters, it can return the target video with a transparent background.

[0061] The second step is to initialize the Video element. First, you need to call the document.createElement('video') method to create the Video tag, and assign the user-provided parameters and default parameters. Then, call the addEventListener method to add the play (redraw animation) and error (error handling) methods to the Video tag. Finally, use the document.body.appendChild method to add the video tag to the webpage.

[0062] The third step involves initializing the Video element, then calling the WebGL-provided textImage2D method to set TEXTURE_2D as a texture object, specifying the color standard as RGB, and the data type of the pixel data as UNSIGNED_TYPE. Finally, the image pointer is specified as the Video element, thus binding the texture object to the video, and the WebGL-provided drawArrays method is called to begin drawing the graphics.

[0063] Fourth, since a video animation is formed by many frames, the processing of each frame is the same in this embodiment. A loop can be used to process each frame in the video animation.

[0064] After obtaining each frame of the video, the areas in each frame that need to be transparent need to be identified and set to transparent. Since the original color of the animation may also be black, directly finding black elements and setting them to transparent may disrupt the original animation effect. Therefore, the UI designer needs to pre-create a symmetrical video (see...). Figure 2 This involves pre-creating a masked video, where the masked video animation element on the left is white with a black background, and the video animation to be processed on the right is its original color with a black background. In practice, the pixels on the left are analyzed; white represents the main subject, and black represents the background that needs to be made transparent. The RGB values ​​of the pixels corresponding to the main subject on the right are obtained and assigned to the white area on the left, with the transparency set to 1. This restores the color of the white pixels on the left. Simultaneously, the transparency of the background pixels on the left is set to zero, thus converting the black background on the left into a transparent background. The main steps involved are as follows:

[0065] First, obtain the Canvas element, set its width and height. If it is not found in the DOM (Document Object Model) element, create it using document.createElement('canvas') and add it to the DOM element using the appendChild method. Then, call the Canvas method getContext('webgl') to create a WebGLRenderingContext 3D rendering context object for drawing within the Canvas element in the HTML.

[0066] Second, call `new Float32Array()` to set the buffer's position coordinates, call `createBuffer()` provided by WebGL to create the buffer, call `bindBuffer()` in WebGL to bind the buffer object to the masked video and the video to be processed, and finally call `bufferData()` in WebGL to write the buffer object into the vertex data. In practical applications, two buffers can be created to store the entire frame image (i.e., the masked frame combined with the frame to be processed) and the left image (the masked frame) respectively. The former facilitates the assignment of color and transparency values, while the latter can be used to write the target frame.

[0067] Third, the vertex shader reads the data from the buffer object, redraws the image based on the vertex coordinates and corresponding RGB values, and calls the texture2D method to convert it, thus achieving a transparent background.

[0068] Fourth, rasterization is performed to achieve a smooth color transition.

[0069] Fifth, after rasterization is complete, the fragment shader is called on a fragment-by-fragment basis to fill each pixel with the rasterized color, presenting the final effect.

[0070] The above process only covers the complete steps for one frame of an image. For video, it is necessary to process each frame of the image in a loop. In this case, the requestAnimationFrame() method can be used to achieve this functionality.

[0071] When making the background transparent for multiple videos, the AlphaVideo constructor can be exposed. Users only need to create an instance based on the constructor, pass in the predefined parameters, and finally call AV.play() (AV represents the instance name) to present the final effect. The above method is finally packaged and published to NPM, and users can download and use it directly by using the command npm installAlphaVideo.

[0072] In this way, it is possible to achieve a transparent background effect for animated videos based on WebGL technology combined with Canvas and Video, which can reduce the size of animated videos and the performance consumption of the client, while providing a simple method to make it usable out of the box.

[0073] It should be noted that, for the sake of ease of description, the foregoing method embodiments are described as a series of actions. However, those skilled in the art should understand that the present invention is not limited to the described order of actions, and some steps may actually be performed in other orders or simultaneously. Furthermore, those skilled in the art should also understand that the embodiments described in the specification are preferred embodiments, and the actions and modules involved are not necessarily essential for implementing the present invention.

[0074] To facilitate better implementation of the above-described solutions of the embodiments of the present invention, related apparatus for implementing the above-described solutions is also provided below.

[0075] Please see Figure 5 As shown, the video processing apparatus provided in this embodiment of the invention may include: a video determination unit 501, a target frame forming unit 502, and an output unit 503.

[0076] The video determination unit 501 can be used to create video tags in the browser engine and obtain the video to be processed based on the video tags. The video to be processed corresponds to a pre-made mask video. The mask video and the video to be processed have a main body and a background with the same shape and size. The pixels of the main body of the mask video are a first color, and the pixels of the background are a second color different from the first color. The target frame forming unit 502 can be used to: for any pair of video frames in the video to be processed and the mask video, use a shader based on a preset drawing protocol to set the transparency of the background pixels identified by the second color in the mask frame of the pair of video frames to a first value representing high transparency; for any pixel of the main body identified by the first color in the mask frame of the pair of video frames, use the shader to assign the color of the corresponding pixel in the video to be processed to the pixel and set the transparency of the pixel to a second value representing low transparency, so that the mask frame forms a target frame; the output unit 503 can be used to output the target video composed of the target frames on a webpage for display.

[0077] In this embodiment of the invention, the first color is white; the device 500 may further include: a buffer unit, configured to: before setting the transparency of the background portion pixels identified by the second color in the mask frame of the pair of video frames to a first value representing high transparency using a shader based on a preset drawing protocol, create a canvas tag in the browser engine, and attach the pair of video frames as textures to a buffer created by calling the drawing protocol interface based on the canvas formed by the canvas tag; the target frame forming unit 502 may further be configured to: determine the corresponding pixel in the frame to be processed that has the same coordinates as any of the pixels; add the pixel value of the any pixel to the pixel value of the corresponding pixel to obtain the pixel value of the any pixel in the target frame.

[0078] As a preferred embodiment, the second color is black, the first value is zero, the second value is one, the shader is a vertex shader, the video tag is the HTML5 Video tag, the canvas tag is the HTML5 Canvas tag, and the drawing protocol is the WebGL drawing protocol.

[0079] According to the technical solution of this invention, before performing background transparency processing on the video to be processed on a webpage, a corresponding mask video is pre-created. This mask video is identical to the video to be processed except for its color. In terms of color, the main body and background of the mask video each have a first color and a second color, respectively, thus enabling accurate differentiation between the main body and background in the video. When drawing using a vertex shader, the background in the mask video is positioned using the second color and its transparency is set to zero. The main body in the mask video is positioned using the first color and assigned a value based on the color of the corresponding pixel in the video to be processed. This achieves background transparency while ensuring the quality of the main video image, which is beneficial for expanding the scope of video usage on webpages, improving video performance, and enriching webpage content presentation.

[0080] Figure 6 An exemplary system architecture 600 is shown for which the video processing method or video processing apparatus of embodiments of the present invention can be applied.

[0081] like Figure 6 As shown, system architecture 600 may include terminal devices 601, 602, and 603, network 604, and server 605 (this architecture is merely an example; the components included in a specific architecture may be adjusted according to the specific application). Network 604 serves as the medium for providing a communication link between terminal devices 601, 602, and 603 and server 605. Network 604 may include various connection types, such as wired or wireless communication links or fiber optic cables.

[0082] Users can use terminal devices 601, 602, and 603 to interact with server 605 via network 604 to receive or send messages, etc. Various client applications, such as browser applications (for example only), can be installed on terminal devices 601, 602, and 603.

[0083] Terminal devices 601, 602, and 603 can be various electronic devices with displays and web browsing capabilities, including but not limited to smartphones, tablets, laptops, and desktop computers.

[0084] Server 605 can be a server that provides various services, such as a web server (for example only) that supports browser applications operated by users using terminal devices 601, 602, and 603. The web server can process received web page requests and return the processing results (such as the requested web page - for example only) to terminal devices 601, 602, and 603.

[0085] It should be noted that the video processing method provided in the embodiments of the present invention is generally executed by server 605, and correspondingly, the video processing device is generally located in server 605.

[0086] It should be understood that Figure 6 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.

[0087] The present invention also provides an electronic device. The electronic device according to an embodiment of the present invention includes: one or more processors; and a storage device for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the video processing method provided by the present invention.

[0088] The following is for reference. Figure 7 It shows a schematic diagram of the structure of a computer system 700 suitable for implementing an electronic device according to embodiments of the present invention. Figure 7 The electronic device shown is merely an example and should not be construed as limiting the functionality and scope of use of the embodiments of the present invention.

[0089] like Figure 7 As shown, the computer system 700 includes a central processing unit (CPU) 701, which can perform various appropriate actions and processes based on programs stored in read-only memory (ROM) 702 or programs loaded from storage section 708 into random access memory (RAM) 703. The RAM 703 also stores various programs and data required for the operation of the computer system 700. The CPU 701, ROM 702, and RAM 703 are interconnected via a bus 704. An input / output (I / O) interface 705 is also connected to the bus 704.

[0090] The following components are connected to the I / O interface 705: an input section 706 including a keyboard, mouse, etc.; an output section 707 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and speakers, etc.; a storage section 708 including a hard disk, etc.; and a communication section 709 including a network interface card such as a LAN card, modem, etc. The communication section 709 performs communication processing via a network such as the Internet. A drive 710 is also connected to the I / O interface 705 as needed. A removable medium 711, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., is installed on the drive 710 as needed so that computer programs read from it can be installed into the storage section 708 as needed.

[0091] In particular, according to the embodiments disclosed in this invention, the processes described in the above main step diagrams can be implemented as computer software programs. For example, embodiments of this invention include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the main step diagrams. In the above embodiments, the computer program can be downloaded and installed from a network via communication section 709, and / or installed from removable medium 711. When the computer program is executed by central processing unit 701, it performs the functions defined in the system of this invention.

[0092] It should be noted that the computer-readable medium shown in this invention can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this invention, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this invention, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium may be transmitted using any suitable medium, including but not limited to: wireless, wire, optical fiber, RF, etc., or any suitable combination thereof.

[0093] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of the present invention. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram or flowchart, and combinations of blocks in a block diagram or flowchart, may be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0094] The units described in the embodiments of the present invention can be implemented in software or hardware. The described units can also be housed in a processor; for example, a processor can be described as including a video determination unit, a target frame forming unit, and an output unit. The names of these units do not necessarily limit the specific unit; for example, the video determination unit can also be described as "a unit that provides the target frame forming unit with the video to be processed and the masked video."

[0095] In another aspect, the present invention also provides a computer-readable medium, which may be included in the device described in the above embodiments; or it may exist alone and not assembled into the device. The aforementioned computer-readable medium carries one or more programs. When the device executes the one or more programs, the steps performed by the device include: creating a video tag in a browser engine; obtaining a video to be processed based on the video tag; wherein the video to be processed corresponds to a pre-made mask video, the mask video and the video to be processed having a main body portion and a background portion with the same shape and size; the main body portion pixels of the mask video are a first color, and the background portion pixels are a second color different from the first color; for any pair of video frames in the video to be processed and the mask video, using a shader based on a preset drawing protocol, setting the transparency of the background portion pixels identified by the second color in the mask frame of the pair of video frames to a first value representing high transparency; for any pixel of the main body portion identified by the first color in the mask frame of the pair of video frames, using the shader, assigning the color of the corresponding pixel in the video to be processed in the pair of video frames to the any pixel, and setting the transparency of the any pixel to a second value representing low transparency, so that the mask frame forms a target frame; and outputting the target video composed of the target frames on a webpage for display.

[0096] In the technical solution of this invention embodiment, before performing background transparency processing on the video to be processed on the webpage, a corresponding mask video is pre-created. This mask video is identical to the video to be processed except for its color. In terms of color, the main body and background of the mask video each have a first color and a second color, respectively, thus enabling accurate differentiation between the main body and background in the video. When drawing using a vertex shader, the background in the mask video is positioned using the second color and its transparency is set to zero. The main body in the mask video is positioned using the first color and assigned a value based on the color of the corresponding pixel in the video to be processed. This achieves background transparency while ensuring the quality of the main video image, which is beneficial for expanding the scope of video usage on webpages, improving video performance, and enriching webpage content presentation.

[0097] The specific embodiments described above do not constitute a limitation on the scope of protection of this invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can occur depending on design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this invention should be included within the scope of protection of this invention.

Claims

1. A video processing method, characterized in that, include: A video tag is created in the browser engine, and the video to be processed is obtained based on the video tag. The video to be processed corresponds to a pre-made mask video. The mask video and the video to be processed have a main body and a background with the same shape and size. The pixels of the main body of the mask video are a first color, and the pixels of the background are a second color different from the first color. For any video to be processed, a corresponding mask video is pre-made. The mask video and the video to be processed differ only in the color of the main body or the background; everything else is the same. In the mask video, the main body and the background can be accurately distinguished by color. For any pair of video frames in the video to be processed and the masked video, a shader based on a preset drawing protocol is used to set the transparency of the background pixels identified by the second color in the masked frame of the pair of video frames to a first value representing high transparency; for any pixel in the main body portion identified by the first color in the masked frame of the pair of video frames, the shader is used to assign the color of the corresponding pixel in the video to be processed frame of the pair of video frames to the pixel and set the transparency of the pixel to a second value representing low transparency, so that the masked frame forms the target frame; The target video, composed of the target frames, is output and displayed on a webpage.

2. The method according to claim 1, characterized in that, The method further includes: Before setting the transparency of the background pixels identified by the second color in the mask frame of the pair of video frames to a first value representing high transparency using a shader based on a preset drawing protocol, the browser engine creates a canvas tag, and attaches the pair of video frames as a texture to a buffer created by calling the drawing protocol interface based on the canvas formed by the canvas tag.

3. The method according to claim 1, characterized in that, The first color is white; and the step of assigning the color of the corresponding pixel in the frame to be processed of the pair of video frames to any one of the pixels using the shader includes: Determine the corresponding pixel in the frame to be processed that has the same coordinates as any of the pixels; The pixel value of any pixel is added to the pixel value of the corresponding pixel to obtain the pixel value of any pixel in the target frame.

4. The method according to claim 3, characterized in that, The second color is black, the first value is zero, the second value is one, and the shader is a vertex shader.

5. The method according to claim 2, characterized in that, The video tag is the Video tag in HTML5, the canvas tag is the Canvas tag in HTML5, and the drawing protocol is the WebGL drawing protocol.

6. A video processing apparatus, characterized in that, include: A video determination unit is used to create video tags in the browser engine and obtain the video to be processed based on the video tags. The video to be processed corresponds to a pre-made mask video, which has a main body and a background portion with the same shape and size as the video to be processed. The pixels of the main body portion of the mask video are a first color, and the pixels of the background portion are a second color different from the first color. For any video to be processed, a corresponding mask video is pre-made. The mask video differs from the video to be processed only in the color of the main body or background portion; everything else is the same. In the mask video, the main body portion and the background portion can be accurately distinguished by color. The target frame forming unit is configured to: for any pair of video frames in the video to be processed and the masked video, use a shader based on a preset drawing protocol to set the transparency of the background pixels identified by the second color in the masked frame of the pair of video frames to a first value representing high transparency; for any pixel of the main body portion identified by the first color in the masked frame of the pair of video frames, use the shader to assign the color of the corresponding pixel in the video to be processed frame of the pair of video frames to the pixel and set the transparency of the pixel to a second value representing low transparency, so that the masked frame forms a target frame; The output unit is used to output the target video composed of the target frames on a webpage for display.

7. The apparatus according to claim 6, characterized in that, The first color is white; The device further includes a buffer unit, configured to: before setting the transparency of the background portion pixels identified by the second color in the mask frame of the pair of video frames to a first value representing high transparency using a shader based on a preset drawing protocol, create a canvas tag in the browser engine, and attach the pair of video frames as a texture to a buffer created by calling the drawing protocol interface based on the canvas formed by the canvas tag. The target frame forming unit is further configured to: determine the corresponding pixel in the frame to be processed that has the same coordinates as any pixel; and add the pixel value of any pixel to the pixel value of the corresponding pixel to obtain the pixel value of any pixel in the target frame.

8. The apparatus according to claim 7, characterized in that, The second color is black, the first value is zero, the second value is one, and the shader is a vertex shader; The video tag is the Video tag in HTML5, the canvas tag is the Canvas tag in HTML5, and the drawing protocol is the WebGL drawing protocol.

9. An electronic device, characterized in that, include: One or more processors; Storage device for storing one or more programs. When the one or more programs are executed by the one or more processors, the one or more processors implement the method as described in any one of claims 1-5.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the method as described in any one of claims 1-5.

Images