CN111741348B

CN111741348B - Method, system, equipment and storage medium for controlling webpage video playing

Info

Publication number: CN111741348B
Application number: CN201910447017.4A
Authority: CN
Inventors: 单开元
Original assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Jingdong Shangke Information Technology Co Ltd
Current assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Jingdong Shangke Information Technology Co Ltd
Priority date: 2019-05-27
Filing date: 2019-05-27
Publication date: 2022-09-06
Anticipated expiration: 2039-05-27
Also published as: CN111741348A

Abstract

The invention discloses a method, a system, equipment and a storage medium for controlling webpage video playing, wherein the control method comprises the following steps: setting a drawing image label in a webpage in advance, and acquiring a canvas according to the drawing image label; predetermining a first target image, a target time point corresponding to the first target image and a target background image; acquiring a playing time point corresponding to a target video; judging whether the playing time point belongs to a target time point, if so, acquiring a target background area corresponding to the first target image, and setting the target background area to be in a transparent state; acquiring a second target image; and overlapping the second target image and the target background image corresponding to the playing time point, acquiring the target playing image corresponding to the playing time point and controlling playing. According to the invention, the background images of different time points in the webpage video are flexibly replaced by the self-defined background image, so that the diversity of video playing contents is greatly enhanced, and the video displaying capability of the webpage is improved.

Description

Method, system, equipment and storage medium for controlling webpage video playing

Technical Field

The present invention relates to the field of video playing technologies, and in particular, to a method, a system, a device, and a storage medium for controlling playing of a web video.

Background

With the increasing popularization of networks and the good development of information technology, the communication of multimedia information reaches unprecedented depth and breadth, and the form of multimedia data release is increasingly rich. At a mobile phone end, information is generally transmitted to a user in a video mode, but the video playing effect is often single, and the display content mainly comprises video content. When the background images of the same video at different time points need to be replaced to achieve different playing effects of the same video, the existing mode meets the requirement by making a plurality of videos, obviously increases the burden of operators to a certain extent, and easily causes the problems of resource waste and the like.

Therefore, the background picture of the same video cannot be flexibly changed in the existing webpage video playing, and different playing requirements for different users based on the same video display are difficult to meet.

Disclosure of Invention

The technical problem to be solved by the invention is that the defects that the same video cannot flexibly replace a background picture, different playing requirements are difficult to meet for different users based on the same video display, and the like exist in webpage video playing in the prior art, and the invention aims to provide a control method, a system, equipment and a storage medium for webpage video playing.

The invention solves the technical problems through the following technical scheme:

the invention provides a control method for webpage video playing, which comprises the following steps:

setting a drawing image label in a webpage in advance, wherein the drawing image label is used for providing a canvas for playing a target video;

predetermining a first target image of which a background image needs to be replaced in the target video, a target time point corresponding to the first target image and a target background image;

controlling the target video to be played in the canvas, and acquiring a playing time point corresponding to the target video;

judging whether the playing time point belongs to the target time point, if so, placing the first target image corresponding to the playing time point into the canvas, acquiring a target background area corresponding to the first target image, and setting the target background area to be in a transparent state;

acquiring a second target image except the target background area in the first target image;

overlapping the second target image and the target background image corresponding to the playing time point to acquire a target playing image corresponding to the playing time point;

and controlling the target video to play the target playing image at the playing time point.

Preferably, the step of acquiring the target background area corresponding to the first target image includes:

acquiring a pixel value of each pixel point in the first target image;

and determining a target background area corresponding to the first target image according to the pixel value.

Preferably, the step of determining the target background area corresponding to the first target image according to the pixel value includes:

acquiring the data length corresponding to the first target image;

acquiring the number of pixel points corresponding to the first target image according to the data length;

traversing and comparing the pixel value of each pixel point in the first target image with a set threshold according to the number of the pixel points, and if the pixel value is matched with the set threshold, determining the pixel point as a target pixel point;

taking the region formed by the target pixel points as the target background region;

the step of setting the target background area to a transparent state includes:

and setting the target pixel points in the target background area to be in a transparent state.

Preferably, when the background image of the first target image includes a color, the step of comparing the pixel value of each pixel in the first target image with a set threshold according to the number of pixels in a traversal manner, and if the pixel value matches the set threshold, determining the pixel as a target pixel includes:

setting a first set threshold according to the background image of the first target image;

and traversing and comparing the pixel value of each pixel point in the first target image with the first set threshold according to the number of the pixel points, and determining the pixel point as a target pixel point when the pixel value is equal to the first set threshold.

selecting any one pixel point in the first target image as a first pixel point;

judging whether the pixel values corresponding to the pixel points with the set number around the first pixel point are equal to the first set threshold value or not, and if so, determining the first pixel point as a target pixel point; or the like, or, alternatively,

and judging whether the pixel values corresponding to the pixel points within the set radius range of the first pixel point are equal to the first set threshold value or not, and if so, determining that the first pixel point is a target pixel point.

Preferably, when the background image of the first target image includes more than two colors, the step of comparing the pixel value of each pixel in the first target image with a set threshold according to the number of pixels in a traversal manner, and if the pixel value is matched with the set threshold, determining the pixel as a target pixel includes:

setting a plurality of different second set thresholds according to the background image of the first target image, wherein the number of the second set thresholds is equal to the number of color types included in the background image of the first target image;

and comparing the pixel value of each pixel point in the first target image with the second set threshold, and determining the pixel point as a target pixel point when the pixel value is equal to any one of the second set thresholds.

setting a plurality of different second set thresholds according to the background image of the first target image, wherein the number of the second set thresholds is equal to the number of the color types included in the background image of the first target image;

selecting any one pixel point in the first target image as a second pixel point;

judging whether the pixel values corresponding to the pixels with the set number around the second pixel are equal to the second set threshold value or not, and if so, determining the second pixel as a target pixel; or the like, or, alternatively,

and judging whether the pixel value corresponding to the pixel point within the set radius range of the second pixel point is equal to the second set threshold value or not, and if so, determining that the second pixel point is a target pixel point.

Preferably, before the step of setting a label of the drawing image in the web page in advance, the method further includes:

acquiring a target page script corresponding to the playing operation of the webpage video;

binding the target page script with a video playing event monitoring function;

the step of controlling the target video to be played in the canvas comprises the following steps:

when a trigger operation of clicking a play button of a webpage video is received, updating the target page script;

and when the video playing event monitoring function monitors the updated target page script, determining that the target video starts to be played.

Preferably, the step of obtaining the target page script corresponding to the playing operation of the web page video includes:

initializing a script of a webpage; and/or the presence of a gas in the atmosphere,

the step of setting a drawing image label in the webpage in advance comprises the following steps:

a drawing image tag is previously inserted in a DOM (Document Object Model) tree of a web page.

Preferably, the step of predetermining a first target image of the target video, a target time point corresponding to the first target image, and a target background image that need to replace the background image includes:

acquiring user portrait data of different users from a background server;

determining a viewing preference of a user based on the user representation data;

according to the watching preference, a first target image of which a background image needs to be replaced in the target video, a target time point corresponding to the first target image and a target background image are determined in advance;

before the step of controlling the target video to be played in the canvas, the method further comprises:

acquiring target user portrait data of a target user;

acquiring a target viewing preference corresponding to the target user portrait data;

and acquiring a first target image of the target video corresponding to the target watching preference and needing to replace the background image, a target time point corresponding to the first target image and a target background image.

The invention also provides a control system for playing the webpage video, which comprises a first preset module, a second preset module, a playing time point acquisition module, a judgment module, a target background area acquisition module, a state setting module, a target image acquisition module, a target playing image acquisition module and a control module;

the first preset module is used for setting a drawing image label in a webpage in advance, wherein the drawing image label is used for providing a canvas for playing a target video;

the second preset module is used for predetermining a first target image of a target video needing replacing a background image, a target time point corresponding to the first target image and a target background image;

the playing time point acquisition module is used for controlling the target video to be played in the canvas and acquiring a playing time point corresponding to the target video;

the judging module is used for judging whether the playing time point belongs to the target time point, if so, the target background area obtaining module is called to place the first target image corresponding to the playing time point into the canvas, and a target background area corresponding to the first target image is obtained;

the state setting module is used for setting the target background area to be in a transparent state;

the target image acquisition module is used for acquiring a second target image in the first target image except the target background area;

the target playing image acquisition module is used for overlapping the second target image and the target background image corresponding to the playing time point to acquire a target playing image corresponding to the playing time point;

the control module is used for controlling the target video to play the target playing image at the playing time point.

Preferably, the target background region acquiring module includes a pixel value acquiring unit and a target background region determining unit;

the pixel value acquisition unit is used for acquiring the pixel value of each pixel point in the first target image;

the target background area determining unit is used for determining a target background area corresponding to the first target image according to the pixel value.

Preferably, the target background region determining unit comprises a data length obtaining subunit, a pixel number obtaining subunit, a target pixel determining subunit and a target background region determining subunit;

the data length acquiring subunit is configured to acquire a data length corresponding to the first target image;

the pixel number obtaining subunit is configured to obtain, according to the data length, the number of pixels corresponding to the first target image;

the target pixel point determining subunit is used for comparing the pixel value of each pixel point in the first target image with a set threshold value in a traversing manner according to the number of the pixel points, and if the pixel value is matched with the set threshold value, determining the pixel point as a target pixel point;

the target background area determining subunit is configured to use an area formed by the target pixel as the target background area;

the state setting module is further used for setting the target pixel points in the target background area to be in a transparent state.

Preferably, when the background image of the first target image includes a color, the target pixel point determining subunit is configured to set a first set threshold according to the background image of the first target image;

selecting any one pixel point in the first target image as a first pixel point;

Preferably, when the background image of the first target image includes more than two colors, the target pixel point determining subunit is configured to set a plurality of different second set thresholds according to the background image of the first target image, where a number of the second set thresholds is equal to a number of color types included in the background image of the first target image;

Preferably, when the background image of the first target image includes more than two colors, the target pixel point determining subunit is configured to set a plurality of different second set thresholds according to the background image of the first target image, where the number of the second set thresholds is equal to the number of the color types included in the background image of the first target image;

Preferably, the control system further comprises a page script acquisition module, a binding module, an updating module and a play determination module;

the page script acquisition module is used for acquiring a target page script corresponding to the playing operation of the webpage video;

the binding module is used for binding the target page script with a video playing event monitoring function;

the updating module is used for updating the target page script when receiving the triggering operation of clicking a playing button of the webpage video;

and the playing determining module is used for determining that the target video starts to be played when the video playing event monitoring function monitors the updated target page script.

Preferably, the control system further comprises an initialization module;

the initialization module is used for initializing the script of the webpage; and/or the presence of a gas in the atmosphere,

the first preset module is used for pre-inserting a drawing image tag into a DOM tree of a webpage.

Preferably, the second preset module comprises a portrait data acquisition unit, a viewing preference determination unit and a preset unit;

the portrait data acquisition unit is used for acquiring user portrait data of different users from the background server;

the watching preference determining unit is used for determining the watching preference of the user according to the user portrait data;

the preset unit is used for predetermining a first target image of the target video, a target time point corresponding to the first target image and a target background image, wherein the first target image needs to replace the background image, and the target background image are required to replace the background image according to the watching preference;

the control system also comprises a portrait data acquisition module, a target preference acquisition module and a target data acquisition module;

the portrait data acquisition module is used for acquiring target user portrait data of a target user;

the target preference acquisition module is used for acquiring a target viewing preference corresponding to the target user portrait data;

the target data acquisition module is used for acquiring a first target image of the target video, which corresponds to the target watching preference and needs to replace the background image, a target time point corresponding to the first target image and a target background image.

The invention also provides an electronic device, which comprises a memory, a processor and a computer program which is stored on the memory and can run on the processor, wherein the processor realizes the control method for playing the webpage video when executing the computer program.

The present invention also provides a computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, implements the steps of the above-mentioned method for controlling web video playback.

The positive progress effects of the invention are as follows:

in the invention, different time points of a target video needing to replace a background image are added in a background server, and a target background image corresponding to each time point is used for replacing an original background image; when the target video is played, the background image in the video is replaced according to the time point, so that the background images of different time points in the webpage video are flexibly replaced by the user-defined background image, the diversity of video playing contents is greatly enhanced, the video displaying capability of a webpage is improved, and the user experience is improved; meanwhile, the labor operation cost is reduced, the working efficiency is improved, and the pressure of the server for storing the video is reduced.

Drawings

Fig. 1 is a flowchart of a method for controlling web video playing according to embodiment 1 of the present invention.

Fig. 2 is a first flowchart of a method for controlling webpage video playing according to embodiment 2 of the present invention.

Fig. 3 is a second flowchart of a method for controlling web video playing according to embodiment 2 of the present invention.

Fig. 4 is a schematic diagram of a first target image in the method for controlling webpage video playing according to embodiment 3 of the present invention.

Fig. 5 is a flowchart of a method for controlling webpage video playing according to embodiment 5 of the present invention.

Fig. 6 is a schematic block diagram of a control system for playing a web video according to embodiment 6 of the present invention.

Fig. 7 is a schematic block diagram of a control system for playing a web video according to embodiment 7 of the present invention.

Fig. 8 is a schematic block diagram of a target background area acquisition module in a control system for playing a web video according to embodiment 7 of the present invention.

Fig. 9 is a block diagram of a control system for playing web video according to embodiment 10 of the present invention.

Fig. 10 is a schematic structural diagram of an electronic device implementing a control method for playing a web video according to embodiment 11 of the present invention.

Detailed Description

The invention is further illustrated by the following examples, which are not intended to limit the scope of the invention.

Example 1

As shown in fig. 1, the method for controlling webpage video playing of the present embodiment includes:

s101, setting a drawing image label in a webpage in advance;

the image label is a Canvas label, and the Canvas label is used for generating an image in a webpage and providing a Canvas for playing a target video.

Specifically, a Canvas tag is pre-inserted into a DOM tree of a web page, the Canvas tag is obtained by a document.

S102, predetermining a first target image of a target video needing to replace a background image, a target time point corresponding to the first target image and a target background image;

specifically, videos that need to replace the background map may be predetermined in a background server of the internet platform according to actual needs, where each video needs to replace a different time point of the background map and a target background map corresponding to each time point and used for replacing the original background map (for example, original solid background maps in some frames of images in the video are respectively replaced by wedding photo images, etc.).

The time points of the target background image and the replacing background image can be flexibly configured according to actual requirements.

S103, controlling the target video to be played in the canvas;

s104, acquiring a playing time point corresponding to the target video;

and timing is started after the target video is started to be played, and the recorded time point is the playing time point corresponding to the target video.

S105, judging whether the playing time point belongs to the target time point, if so, executing a step S106;

s106, placing the first target image corresponding to the playing time point into a canvas, and acquiring a target background area corresponding to the first target image;

a method of drawing a picture in a Canvas label is adopted to place a current frame (playing time point) corresponding to a first target image into a Canvas.

S107, setting the target background area to be in a transparent state;

s108, acquiring a second target image except the target background area in the first target image;

s109, overlapping the second target image and the target background image corresponding to the playing time point to obtain a target playing image corresponding to the playing time point;

at this time, the second target image of the non-background area is retained and displayed in the target playing image, and the target background image is also displayed through the target background area in a transparent state, so that the replacing operation of the background image is completed.

Specifically, a method in JavaScript (scripting language) is adopted to set CSS (Cascading Style Sheets) attribute background-image (background image) of the Canvas label as a link of a target background image to be replaced, so that the second target image and the target background image corresponding to the playing time point are overlapped to obtain a final target playing image.

And S1010, controlling the target video to play the target playing image at the playing time.

The control method for webpage video playing in this embodiment may support cross-platform support, such as but not limited to support Windows, Mac, Linux, Android, IOS (Windows, Mac, Linux, Android, IOS are all operating systems), and the like.

In the embodiment, different time points of the target video needing to replace the background image and the target background image corresponding to each time point and used for replacing the original background image are added to the background server; when the target video is played, the background image in the video is replaced according to the time point, so that the background images of different time points in the webpage video are flexibly replaced by the customized background image, the diversity of video playing contents is greatly enhanced, and the capability of the webpage for displaying the video is improved; meanwhile, the labor operation cost is reduced, the working efficiency is improved, and the pressure of the server for storing the video is reduced. In addition, multiple playing contents corresponding to the same video can be cached locally to improve the speed of loading and displaying the video.

Example 2

As shown in fig. 2, the method for controlling the webpage video playing of the present embodiment is a further improvement of embodiment 1, and specifically:

step S101 is preceded by:

s10101, initializing the script of the webpage;

s10102, acquiring a target page script corresponding to the playing operation of the webpage video;

the target page script is a program code for representing operations such as playing and stopping of the webpage video.

S10103, binding the target page script with the video playing event monitoring function;

specifically, when a trigger operation of clicking a play button of a webpage video is received, updating a target page script;

and when the video playing event monitoring function monitors the updated target page script, determining that the target video starts to play.

As shown in fig. 3, step S106 includes:

s1061, obtaining a pixel value of each pixel point in the first target image;

s1062, acquiring the data length corresponding to the first target image;

s1063, acquiring the number of pixel points corresponding to the first target image according to the data length;

s1064, comparing the pixel value of each pixel point in the first target image with a set threshold value in a traversing manner according to the number of the pixel points, and if the pixel value is matched with the set threshold value, determining the pixel point as a target pixel point;

and S1065, taking the area formed by the target pixel points as a target background area.

Specifically, an RGBA (red, green, blue, and transparency values respectively representing the pixel point) is adopted to represent a pixel point, and the data length corresponding to the first target image is L, so that the number N of the pixel points corresponding to the first target image is L/4. And when each pixel point in the first target image is subjected to traversal comparison, acquiring the RGB value of each pixel point, and comparing the RGB value with a set threshold value.

Step S107 includes:

s1071, setting the target pixel points in the target background area to be in a transparent state.

In the embodiment, different time points of the target video needing to replace the background image and the target background image corresponding to each time point and used for replacing the original background image are added to the background server; monitoring target video playing through an event monitoring function, and replacing background images in the video according to time points, so that flexible replacement of the background images at different time points in the webpage video is realized by adopting a customized background image, the diversity of video playing contents is greatly enhanced, and the capability of displaying the video on a webpage is improved; meanwhile, the labor operation cost is reduced, the working efficiency is improved, and the pressure of the server for storing the video is reduced.

Example 3

The method for controlling webpage video playing of the embodiment is a further improvement of the embodiment 2, and specifically includes:

when the background map of the first target image includes one color, step S1064 includes:

setting a first set threshold value according to the background image of the first target image;

and traversing and comparing the pixel value of each pixel point in the first target image with a first set threshold according to the number of the pixel points, and determining the pixel point as a target pixel point when the pixel value is equal to the first set threshold. Or, step S1064 includes:

setting a first set threshold value according to a background image of a first target image;

selecting any one pixel point in the first target image as a first pixel point;

judging whether pixel values corresponding to a set number of pixels around the first pixel are equal to a first set threshold value or not, and if so, determining the first pixel as a target pixel; or the like, or, alternatively,

and judging whether pixel values corresponding to the pixel points within the set radius range of the first pixel point are all equal to a first set threshold value, and if so, determining the first pixel point as a target pixel point.

The following is a detailed description with reference to examples:

as shown in fig. 4, the image of a certain frame in the target video is shown, where the a area represents the background area and the b area represents the non-background area.

Specifically, the a region is assumed to be pure black. The RGB values of the background image to be replaced may be obtained in advance, and the first set threshold is the RGB values. And traversing and comparing the pixel value of each pixel point in the image with a first set threshold value, determining the pixel point as a target pixel point as long as the RGB value of the pixel point of the image is equal to the set RGB value, and setting the RGB value of the pixel point to be 0, namely, the transparent state.

In order to prevent the pixel points with the same color as the color of the area a from existing in the area b, whether the pixel values corresponding to the set number of pixel points around any one pixel point in the first target image are equal to the set RGB value is judged, if yes, the pixel point is determined to be the target pixel point, and the RGB value of the pixel point is set to be 0, namely, the transparent state is realized. Or, judging whether the pixel value corresponding to the pixel point within the set radius range of any pixel point in the first target image is equal to the set RGB value, if so, determining the pixel point as the target pixel point, and setting the RGB value of the pixel point as 0, namely, in a transparent state, thereby ensuring that only the pixel point in the background region is set in the transparent state and the image display of the non-background region is not influenced.

In the embodiment, a Canvas for playing a video is obtained by inserting a Canvas tag into a DOM tree of a webpage; then, setting an image of a background image to be replaced, a replaced time node and a target background image in the target video according to different actual requirements; when the target video is played to a time node needing to replace the background image, acquiring a target background area in a corresponding frame image of the time node, and setting the target background area in a transparent state; finally, overlapping the residual images in the corresponding frame images with the target background image, acquiring a target playing image corresponding to the playing time point, and controlling the playing of the target playing image at the playing time point, thereby realizing the customized playing of the webpage video, greatly enhancing the diversity of the video playing content, and improving the capability of the webpage for displaying the video; meanwhile, the labor operation cost is reduced, the working efficiency is improved, and the pressure of the server for storing the video is reduced.

Example 4

The method for controlling webpage video playing of the embodiment is a further improvement of the embodiment 2, and specifically comprises the following steps:

when the background image of the first target image includes two or more colors, step S1064 includes:

and comparing the pixel value of each pixel point in the first target image with a second set threshold, and determining the pixel point as a target pixel point when the pixel value is equal to any one second set threshold. Or, step S1064 includes:

judging whether pixel values corresponding to a set number of pixels around the second pixel are equal to a second set threshold value or not, and if yes, determining the second pixel as a target pixel; or the like, or, alternatively,

and judging whether the pixel value corresponding to the pixel point within the set radius range of the second pixel point is equal to a second set threshold value or not, and if so, determining the second pixel point as a target pixel point.

The following is a detailed description with reference to examples:

Assuming that the a region includes pixels of three RGB values (i.e., includes three colors), at this time, three second set thresholds are set according to the three RGB values, and the three second set thresholds are respectively equal to the three RGB values.

Traversing and comparing the pixel value of each pixel point in the image with a second set threshold, if the pixel value of a certain pixel point is equal to the first second set threshold, determining the pixel point as a target pixel point, and setting the RGB value of the pixel point to 0, namely, in a transparent state; if the pixel value of the pixel point is not equal to the first second set threshold, otherwise, continuously comparing whether the pixel value of the pixel point is equal to the second set threshold, if the pixel value of the pixel point is equal to the second set threshold, determining the pixel point as a target pixel point, and setting the RGB value of the pixel point to 0, namely, in a transparent state; if not, continuously comparing whether the pixel value of the pixel point is equal to the third second set threshold, if so, determining the pixel point as a target pixel point, and setting the RGB value of the pixel point as 0, namely, a transparent state; otherwise, determining that the pixel point is not the target pixel point.

In order to prevent the existence of the pixel points with the same color as the color of the region a in the region b, whether the pixel value corresponding to the set number of pixel points around any one pixel point in the first target image is equal to any one RGB value in the three second set thresholds is judged, if yes, the pixel point is determined to be the target pixel point, and the RGB value of the pixel point is set to be 0, namely, the transparent state is achieved. Or, judging whether the pixel value corresponding to the pixel point within the set radius range of any pixel point in the first target image is equal to any one of the RGB values in the three second set thresholds, if so, determining that the pixel point is the target pixel point, and setting the RGB value of the pixel point to 0, that is, to be in a transparent state, thereby ensuring that only the pixel point in the background region is set to be in the transparent state without affecting the image display of the non-background region.

In the embodiment, a Canvas used for playing a video is obtained by inserting a Canvas tag into a DOM tree of a webpage; then, setting an image of a background image to be replaced, a time node to be replaced and a target background image in the target video according to different actual requirements; when the target video is played to a time node needing to replace the background image, acquiring a target background area in a corresponding frame image of the time node, and setting the target background area in a transparent state; finally, overlapping the residual images in the corresponding frame images with the target background image to obtain a target playing image corresponding to the playing time point, and controlling the playing of the target playing image at the playing time point, thereby realizing the customized playing of the webpage video, greatly enhancing the diversity of the video playing content, and improving the capability of the webpage for displaying the video; meanwhile, the labor operation cost is reduced, the working efficiency is improved, and the pressure of the server for storing the video is reduced.

Example 5

As shown in fig. 5, the method for controlling the webpage video playing of the present embodiment is a further improvement of embodiment 1, and specifically:

step S102 includes:

s1021, user portrait data of different users are obtained from the background server;

s1022, determining the watching preference of the user according to the user portrait data;

s1023, a first target image of the target video needing replacing the background image, a target time point corresponding to the first target image and the target background image are predetermined according to the watching preference;

step S103 further includes:

s10301, acquiring target user portrait data of a target user;

s10302, acquiring a target viewing preference corresponding to the portrait data of the target user;

s10303, acquiring a first target image corresponding to the target watching preference and needing to replace the background image in the target video, and a target time point and a target background image corresponding to the first target image.

For example, for the situation that a user wants to display a wedding photo in a video background, different images of the wedding photo are adopted to replace background images at different time points in the current target video, so that the purpose of displaying different video playing effects for different types of users is achieved, and the watching experience of the user is improved.

In the embodiment, a Canvas used for playing a video is obtained by inserting a Canvas tag into a DOM tree of a webpage; then, setting an image of a background image to be replaced, a time node to be replaced and a target background image in the target video according to the watching preferences of different users; when the target video is played to a time node needing to replace the background image, acquiring a target background area in a corresponding frame image of the time node, and setting the target background area in a transparent state; finally, overlapping the residual images in the corresponding frame images with the target background image to obtain a target playing image corresponding to the playing time point, and controlling the playing of the target playing image at the playing time point, thereby realizing the customized playing of the webpage video, greatly enhancing the diversity of the video playing content, improving the video displaying capability of the webpage and improving the user experience; meanwhile, the labor operation cost is reduced, the working efficiency is improved, and the pressure of the server for storing the video is reduced.

Example 6

As shown in fig. 6, the control system for playing a web video in this embodiment includes a first preset module 1, a second preset module 2, a playing time point obtaining module 3, a determining module 4, a target background area obtaining module 5, a state setting module 6, a target image obtaining module 7, a target playing image obtaining module 8, and a control module 9.

The first preset module 1 is used for setting a drawing image label in a webpage in advance, wherein the Canvas label is used for providing a Canvas for playing a target video;

the image label is drawn as a Canvas label, and the Canvas label is used for generating an image in a webpage and providing a Canvas for playing a target video.

Specifically, a Canvas label is pre-inserted into a DOM tree of the webpage, the Canvas label is obtained by adopting a document.

The second preset module 2 is used for predetermining a first target image of the target video, which needs to replace the background image, a target time point corresponding to the first target image and a target background image;

The playing time point acquisition module 3 is used for controlling the target video to be played in the canvas and acquiring a playing time point corresponding to the target video;

The judging module 4 is used for judging whether the playing time point belongs to the target time point, if so, the target background area obtaining module 5 is called to place the first target image corresponding to the playing time point into the canvas, and the target background area corresponding to the first target image is obtained;

and placing the first target image corresponding to the current frame into the canvas by adopting a drawImage method.

The state setting module 6 is used for setting the target background area to be in a transparent state;

the target image acquisition module 7 is used for acquiring a second target image in the first target image except for the target background area;

the target playing image obtaining module 8 is configured to overlap the second target image with a target background image corresponding to the playing time point, and obtain a target playing image corresponding to the playing time point;

Specifically, the method in JavaScript is adopted to set the CSS attribute background-image of the Canvas tag as a link of the target background image to be replaced, so as to overlap the second target image and the target background image corresponding to the play time point, and obtain the final target play image. The control module 9 is used for controlling the target video to play the target playing image at the playing time point.

The control method for webpage video playing in the embodiment can be supported by a cross-platform, such as but not limited to Windows, Mac, Linux, Android, IOS, and the like.

In the embodiment, different time points of the target video needing to replace the background image and the target background image corresponding to each time point and used for replacing the original background image are added to the background server; when the target video is played, the background image in the video is replaced according to the time point, so that the background images of different time points in the webpage video are flexibly replaced by the user-defined background image, the diversity of video playing contents is greatly enhanced, and the capability of displaying the video on a webpage is improved; meanwhile, the labor operation cost is reduced, the working efficiency is improved, and the pressure of the server for storing the video is reduced.

Example 7

As shown in fig. 7, the control system for playing a web page video in this embodiment is a further improvement of embodiment 6, specifically:

the control system further comprises an initialization module 10, a page script acquisition module 11, a binding module 12, an updating module 13 and a play determination module 14.

The initialization module 10 is used for performing initialization processing on scripts of the web page.

The page script obtaining module 11 is configured to obtain a target page script corresponding to a playing operation of a web video;

The binding module 12 is configured to bind the target page script with the video playing event monitoring function;

the updating module 13 is configured to update the target page script when receiving a trigger operation of clicking a play button of the web page video;

the playing determining module 14 is configured to determine that the target video starts to be played when the updated target page script is monitored by the video playing event monitoring function.

As shown in fig. 8, the target background region acquisition module 5 includes a pixel value acquisition unit 15 and a target background region determination unit 16.

The pixel value obtaining unit 15 is configured to obtain a pixel value of each pixel point in the first target image;

the target background area determining unit 16 is configured to determine a target background area corresponding to the first target image according to the pixel value.

Specifically, the target background region determining unit 16 includes a data length obtaining subunit 17, a pixel number obtaining subunit 18, a target pixel determining subunit 19, and a target background region determining subunit 20.

The data length acquiring subunit 17 is configured to acquire a data length corresponding to the first target image;

the pixel number obtaining subunit 18 is configured to obtain, according to the data length, the number of pixels corresponding to the first target image;

the target pixel point determining subunit 19 is configured to compare a pixel value of each pixel point in the first target image with a set threshold value according to the number of pixel points in a traversal manner, and determine a pixel point as a target pixel point if the pixel value matches the set threshold value;

the target background area determination subunit 20 is used for taking an area formed by target pixel points as a target background area;

specifically, four RGBA (red, green, blue, and transparency values respectively representing the pixel point) values are used to represent one pixel point, and if the data length corresponding to the first target image is L, the number N of the pixel points corresponding to the first target image is equal to L/4. And when each pixel point in the first target image is subjected to traversal comparison, the RGB value of each pixel point is obtained, and the RGB value is compared with a set threshold value.

The state setting module 6 is further configured to set target pixels in the target background region to be in a transparent state.

In the embodiment, different time points of the target video needing to replace the background image and the target background image corresponding to each time point and used for replacing the original background image are added to the background server; monitoring target video playing through an event monitoring function, and replacing background images in the video according to time points, so that the background images at different time points in the webpage video are flexibly replaced by using a customized background image, the diversity of video playing contents is greatly enhanced, and the capability of the webpage for displaying the video is improved; meanwhile, the labor operation cost is reduced, the working efficiency is improved, and the pressure of the server for storing the video is reduced.

Example 8

The control system for playing the webpage video in the embodiment is a further improvement of the embodiment 7, and specifically:

when the background image of the first target image includes one color, the target background area determining unit 16 includes a data length obtaining subunit, a pixel number obtaining subunit, a first comparing subunit, a target pixel determining subunit, and a target background area determining subunit;

the data length acquiring subunit is used for acquiring the data length corresponding to the first target image;

the pixel number obtaining subunit is used for obtaining the pixel number corresponding to the first target image according to the data length;

the first comparison subunit is used for comparing the pixel value of each pixel point in the first target image with a first set threshold value in a traversing manner according to the number of the pixel points, and when the pixel value is equal to the first set threshold value, calling the target pixel point determination subunit to determine the pixel point as the target pixel point;

the target background area determining subunit is used for taking an area formed by the target pixel points as a target background area. Or the like, or, alternatively,

when the background image of the first target image includes one color, the target background region determining unit 16 includes a selecting subunit, a first judging subunit, a target pixel point determining subunit, and a target background region determining subunit;

the selection subunit is used for selecting any one pixel point in the first target image as a first pixel point;

the first judgment subunit is used for judging whether the pixel values corresponding to the pixel points with the set number around the first pixel point are all equal to a first set threshold value, and if so, determining the first pixel point as a target pixel point; or the like, or a combination thereof,

the first judgment subunit is used for judging whether pixel values corresponding to the pixel points within the set radius range of the first pixel point are all equal to a first set threshold value or not, and if so, calling the target pixel point determination subunit to determine the first pixel point as the target pixel point;

the target background area determining subunit is used for taking the area formed by the target pixel points as a target background area.

The following is a detailed description with reference to examples:

as shown in fig. 4, a frame of image in the target video is shown, where a area represents a background area and b area represents a non-background area.

Example 9

when the background image of the first target image includes more than two colors, the target background region determining unit 16 includes a threshold setting subunit, a second comparing subunit, a target pixel point determining subunit, and a target background region determining subunit;

the threshold setting subunit is used for setting a plurality of different second setting thresholds;

the second comparison subunit is used for comparing the pixel value of each pixel point in the first target image with a plurality of second set thresholds respectively, and when the pixel point is equal to any one of the second set thresholds, calling the target pixel point to determine the pixel point as the target pixel point by the target pixel point determination subunit;

the target background area determining subunit is used for taking the area formed by the target pixel points as a target background area. Or, when the background image of the first target image includes more than two colors, the target background area determining unit 16 includes a threshold setting subunit, a second judging subunit, a target pixel point determining subunit, and a target background area determining subunit;

the second judgment subunit is configured to judge whether pixel values corresponding to a set number of pixels around the second pixel are equal to a second set threshold, and if yes, determine that the second pixel is a target pixel; or the like, or a combination thereof,

the second judgment subunit is used for judging whether the pixel value corresponding to the pixel point within the set radius range of the second pixel point is equal to a second set threshold value or not, and if so, calling the target pixel point determination subunit to determine the second pixel point as the target pixel point;

The following is specifically illustrated by the examples:

Assuming that the a region includes pixel points with three RGB values (i.e., includes three colors), at this time, three second set thresholds are set according to the three RGB values, and the three second set thresholds are respectively equal to the three RGB values.

Traversing and comparing the pixel value of each pixel point in the image with a second set threshold, if the pixel value of a certain pixel point is equal to the first second set threshold, determining the pixel point as a target pixel point, and setting the RGB value of the pixel point to 0, namely, a transparent state; if the pixel value of the pixel point is not equal to the first second set threshold, otherwise, continuously comparing whether the pixel value of the pixel point is equal to the second set threshold, if the pixel value of the pixel point is equal to the second set threshold, determining the pixel point as a target pixel point, and setting the RGB value of the pixel point to 0, namely, in a transparent state; if not, continuously comparing whether the pixel value of the pixel point is equal to the third second set threshold, if so, determining the pixel point as a target pixel point, and setting the RGB value of the pixel point as 0, namely, a transparent state; otherwise, determining that the pixel point is not the target pixel point.

In order to prevent the pixels with the same color as the color of the region a from existing in the region b, whether the pixel value corresponding to the set number of pixels around any one pixel in the first target image is equal to any one of the RGB values in the three second set thresholds is judged, if yes, the pixel is determined to be the target pixel, and the RGB value of the pixel is set to 0, namely, the transparent state is achieved. Or, judging whether the pixel value corresponding to the pixel point within the set radius range of any pixel point in the first target image is equal to any one of the RGB values in the three second set thresholds, if so, determining that the pixel point is the target pixel point, and setting the RGB value of the pixel point to 0, that is, to be in a transparent state, thereby ensuring that only the pixel point in the background region is set to be in the transparent state without affecting the image display of the non-background region.

In the embodiment, a Canvas used for playing a video is obtained by inserting a Canvas tag into a DOM tree of a webpage; then, setting an image of a background image to be replaced, a replaced time node and a target background image in the target video according to different actual requirements; when the target video is played to a time node needing to replace the background image, acquiring a target background area in a frame image corresponding to the time node, and setting the target background area in a transparent state; finally, overlapping the residual images in the corresponding frame images with the target background image, acquiring a target playing image corresponding to the playing time point, and controlling the playing of the target playing image at the playing time point, thereby realizing the customized playing of the webpage video, greatly enhancing the diversity of the video playing content, and improving the capability of the webpage for displaying the video; meanwhile, the labor operation cost is reduced, the working efficiency is improved, and the pressure of the server for storing the video is reduced.

Example 10

As shown in fig. 9, the control system for playing a web page video in this embodiment is a further improvement of embodiment 6, specifically:

the second preset module 2 includes an image data acquiring unit 21, a viewing preference determining unit 22 and a preset unit 23;

the portrait data acquisition unit 21 is used for acquiring user portrait data of different users from the background server;

a viewing preference determination unit 22 for determining a viewing preference of the user from the user portrait data;

the preset unit 23 is configured to determine, in advance according to viewing preferences, a first target image of the target video, a target time point corresponding to the first target image, and a target background image, where the background image needs to be replaced;

the control system further includes a representation data acquisition module 24, a target preference acquisition module 25, and a target data acquisition module 26;

the portrait data acquisition module 24 is used for acquiring target user portrait data of a target user;

the target preference obtaining module 25 is used for obtaining a target viewing preference corresponding to the target user portrait data;

the target data acquiring module 26 is configured to acquire a first target image of the target video corresponding to the target viewing preference, which requires replacing the background image, a target time point corresponding to the first target image, and a target background image.

Example 11

Fig. 10 is a schematic structural diagram of an electronic device according to embodiment 11 of the present invention. The electronic device comprises a memory, a processor and a computer program which is stored on the memory and can run on the processor, and the processor executes the program to realize the control method of the webpage video playing in any one of the embodiments 1 to 5. The electronic device 30 shown in fig. 10 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiment of the present invention.

As shown in fig. 10, the electronic device 30 may be embodied in the form of a general purpose computing device, which may be, for example, a server device. The components of the electronic device 30 may include, but are not limited to: the at least one processor 31, the at least one memory 32, and a bus 33 connecting the various system components (including the memory 32 and the processor 31).

The bus 33 includes a data bus, an address bus, and a control bus.

The memory 32 may include volatile memory, such as Random Access Memory (RAM)321 and/or cache memory 322, and may further include Read Only Memory (ROM) 323.

Memory 32 may also include a program/utility 325 having a set (at least one) of program modules 324, such program modules 324 including, but not limited to: an operating system, one or more application programs, other program modules, and program data, each of which, or some combination thereof, may comprise an implementation of a network environment.

The processor 31 executes various functional applications and data processing, such as a control method of playing a web video in any one of embodiments 1 to 5 of the present invention, by running the computer program stored in the memory 32.

The electronic device 30 may also communicate with one or more external devices 34 (e.g., a keyboard, a pointing device, etc.). Such communication may be through an input/output (I/O) interface 35. Also, model-generating device 30 may also communicate with one or more networks (e.g., a Local Area Network (LAN), a Wide Area Network (WAN), and/or a public network, such as the Internet) via network adapter 36. As shown in FIG. 10, network adapter 36 communicates with the other modules of model-generating device 30 via bus 33. It should be understood that although not shown in the figures, other hardware and/or software modules may be used in conjunction with the model-generating device 30, including but not limited to: microcode, device drivers, redundant processors, external disk drive arrays, RAID (disk array) systems, tape drives, and data backup storage systems, etc.

It should be noted that although in the above detailed description several units/modules or sub-units/modules of the electronic device are mentioned, such a division is merely exemplary and not mandatory. Indeed, the features and functionality of two or more of the units/modules described above may be embodied in one unit/module according to embodiments of the invention. Conversely, the features and functions of one unit/module described above may be further divided into embodiments by a plurality of units/modules.

Example 12

The present embodiment provides a computer-readable storage medium on which a computer program is stored, where the program is executed by a processor to implement the steps in the control method for playing a web page video in any one of embodiments 1 to 5.

More specific examples, among others, that the readable storage medium may employ may include, but are not limited to: a portable disk, a hard disk, random access memory, read only memory, erasable programmable read only memory, optical storage device, magnetic storage device, or any suitable combination of the foregoing.

In a possible implementation manner, the present invention can also be implemented in the form of a program product, which includes program code for causing a terminal device to execute the steps in the control method for implementing the video playing of a web page in any one of embodiments 1 to 5 when the program product runs on the terminal device.

Where program code for carrying out the invention is written in any combination of one or more programming languages, the program code may execute entirely on the user device, partly on the user device, as a stand-alone software package, partly on the user device and partly on a remote device or entirely on the remote device.

While specific embodiments of the invention have been described above, it will be appreciated by those skilled in the art that these are by way of example only, and that the scope of the invention is defined by the appended claims. Various changes and modifications to these embodiments may be made by those skilled in the art without departing from the spirit and scope of the invention, and these changes and modifications are within the scope of the invention.

Claims

1. A control method for playing a webpage video is characterized by comprising the following steps:

predetermining a first target image needing replacing a background image in the target video, a target time point corresponding to the first target image and a target background image;

overlapping the second target image and the target background image corresponding to the playing time point to obtain a target playing image corresponding to the playing time point;

2. The method for controlling video playback on a web page according to claim 1, wherein the step of obtaining the target background area corresponding to the first target image comprises:

acquiring a pixel value of each pixel point in the first target image;

3. The method for controlling video playback of a web page according to claim 2, wherein the step of determining the target background area corresponding to the first target image according to the pixel value comprises:

acquiring the data length corresponding to the first target image;

taking the area formed by the target pixel points as the target background area;

the step of setting the target background area to a transparent state includes:

4. The method for controlling video playback on a web page according to claim 3, wherein when the background map of the first target image includes a color, the step of comparing the pixel value of each pixel in the first target image with a set threshold value according to the number of pixels in a traversal, and if the pixel value matches the set threshold value, determining the pixel as a target pixel comprises:

5. The method for controlling video playback on a web page according to claim 3, wherein when the background map of the first target image includes a color, the step of comparing the pixel value of each pixel in the first target image with a predetermined threshold value according to the number of pixels in the background map of the first target image, and if the pixel value matches the predetermined threshold value, determining the pixel as a target pixel comprises:

selecting any one pixel point in the first target image as a first pixel point;

6. The method for controlling video playback on a web page according to claim 3, wherein when the background image of the first target image includes more than two colors, the step of comparing the pixel value of each pixel in the first target image with a set threshold value according to the number of pixels in a traversal, and if the pixel value matches the set threshold value, determining the pixel as a target pixel comprises:

7. The method for controlling video playback on a web page according to claim 3, wherein when the background image of the first target image includes more than two colors, the step of comparing the pixel value of each pixel in the first target image with a set threshold value according to the number of pixels in a traversal, and if the pixel value matches the set threshold value, determining the pixel as a target pixel comprises:

8. The method for controlling video playback on a web page according to claim 1, wherein the step of setting a label for drawing an image in the web page in advance further comprises:

binding the target page script with a video playing event monitoring function;

the step of controlling the target video to be played in the canvas comprises:

when a trigger operation of clicking a playing button of a webpage video is received, updating the target page script;

9. The method for controlling playback of a web page video according to claim 8, wherein the step of acquiring a target page script corresponding to the playback operation of the web page video comprises:

and pre-inserting a drawing image label in a DOM tree of the webpage.

10. The method for controlling video playback on a web page according to claim 1, wherein the step of predetermining a first target image of the target video, a target time point corresponding to the first target image, and a target background image that need to replace the background image, comprises:

acquiring user portrait data of different users from a background server;

according to the watching preference, a first target image of a background image needing to be replaced in the target video, a target time point corresponding to the first target image and a target background image are predetermined;

the step of controlling the target video to be played in the canvas further comprises the following steps:

acquiring target user portrait data of a target user;

11. A control system for webpage video playing is characterized by comprising a first preset module, a second preset module, a playing time point acquisition module, a judgment module, a target background area acquisition module, a state setting module, a target image acquisition module, a target playing image acquisition module and a control module;

the first preset module is used for setting a drawing image label in a webpage in advance, wherein the drawing image label is used for providing canvas for playing a target video;

12. The system for controlling video playback of a web page according to claim 11, wherein the target background area acquisition module includes a pixel value acquisition unit and a target background area determination unit;

13. The control system for web video playing according to claim 12, wherein the target background region determining unit includes a data length obtaining subunit, a pixel number obtaining subunit, a target pixel determining subunit, and a target background region determining subunit;

the target pixel point determining subunit is configured to compare the pixel value of each pixel point in the first target image with a set threshold value in a traversal manner according to the number of the pixel points, and determine the pixel point as a target pixel point if the pixel value matches the set threshold value;

the target background area determining subunit is configured to use an area formed by the target pixel points as the target background area;

the state setting module is further configured to set the target pixel points in the target background region to be in a transparent state.

14. The system for controlling video playback on a web page according to claim 13, wherein when the background image of the first target image includes a color, the target pixel point determining subunit is configured to set a first set threshold value according to the background image of the first target image;

15. The system for controlling video playback on a web page according to claim 13, wherein when the background image of the first target image includes a color, the target pixel point determining subunit is configured to set a first set threshold value according to the background image of the first target image;

selecting any one pixel point in the first target image as a first pixel point;

16. The system for controlling video playback on a web page according to claim 13, wherein when the background image of the first target image includes more than two colors, the target pixel point determining subunit is configured to set a plurality of different second set thresholds according to the background image of the first target image, wherein the number of the second set thresholds is equal to the number of the color types included in the background image of the first target image;

17. The system for controlling video playback on a web page according to claim 13, wherein when the background image of the first target image includes more than two colors, the target pixel point determining subunit is configured to set a plurality of different second set thresholds according to the background image of the first target image, wherein the number of the second set thresholds is equal to the number of the color types included in the background image of the first target image;

18. The control system for video playback on a web page of claim 11, wherein the control system further comprises a page script obtaining module, a binding module, an updating module, and a playback determining module;

19. The control system for video playback of a web page of claim 18, wherein the control system further comprises an initialization module;

the initialization module is used for initializing the script of the webpage; and/or the presence of a gas in the gas,

20. The system for controlling video playback on a web page according to claim 11, wherein the second predetermined module includes a portrait data acquisition unit, a viewing preference determination unit, and a predetermined unit;

the preset unit is used for predetermining a first target image of the target video needing replacing the background image, a target time point corresponding to the first target image and a target background image according to the watching preference;

21. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements the method for controlling video playback of a web page according to any one of claims 1 to 10 when executing the computer program.

22. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the steps of the method for controlling video playback of a web page according to any one of claims 1 to 10.