WO2023284295A1

WO2023284295A1 - Method and system for processing webpage video background of mobile end, and storage medium

Info

Publication number: WO2023284295A1
Application number: PCT/CN2022/076306
Authority: WO
Inventors: 魏陈南; 唐斌
Original assignee: 稿定（厦门）科技有限公司
Priority date: 2021-07-13
Filing date: 2022-02-15
Publication date: 2023-01-19
Also published as: CN113691740A

Abstract

The present invention relates to a method and system for processing a webpage video background of a mobile end, and a storage medium. The method includes the following steps: S1, acquiring a video file and a video format type of the video file, wherein the video format type comprises a first video format set and a second video format set; S2, acquiring a userAgent attribute of a browser, and if the browser supports a standard video element and the video format type belongs to the first video format set, proceeding to step S3, otherwise, proceeding to step S4; S3, calling the standard video element to play the video file, such that same serves as a video background; and S4, decoding the video file and drawing same into a plurality of pictures frame by frame, and playing the pictures according to a time sequence, such that same serve as the video background. By means of the present invention, a userAgent attribute of a browser is acquired, such that different video processing strategies are taken for different browsers. Therefore, a video is compatible with a mobile-end browser, thereby realizing a webpage video background.

Description

A method, system, and storage medium for processing the video background of a mobile web page

technical field

The invention relates to the field of webpage video background processing, and specifically refers to a mobile terminal webpage video background processing method, system, and storage medium.

Background technique

Webpage video background is that the browser uses dynamic video as the background of text, title, etc., showing a dynamic effect.

At present, mobile browsers are not uniform in the implementation of web standards. Using native video elements to implement video backgrounds on web pages will have many compatibility issues, such as: videos cannot be played automatically, video elements cannot be covered as pop-up elements, and playback cannot be hidden Buttons and videos will be played in full screen by default, which will cause the webpage video background to fail in mobile browsers. As shown in Figure 1, the picture on the left in Figure 1 is a screenshot of the mobile terminal where the background of the webpage video is displayed normally, and the pictures in the middle and right are screenshots of the mobile terminal where compatibility issues cause layers to be misplaced or cannot be played automatically.

It is the purpose of the present invention to design a mobile terminal webpage video background processing method, system, and storage medium for the above-mentioned problems in the prior art.

Contents of the invention

In view of the above-mentioned problems in the prior art, the present invention provides a method, system, and storage medium for processing the video background of a mobile web page, which can effectively solve the above-mentioned problems in the prior art.

Technical scheme of the present invention is:

A mobile terminal webpage video background processing method, comprising the following steps:

S1. Obtain a video file and a video format type of the video file, where the video format type includes a first video format collection and a second video format collection;

S2, acquire the userAgent attribute of the browser, if the browser supports standard video elements and the video format type belongs to the first video format collection, go to step S3, otherwise, go to step S4;

S3, calling the standard video element to play the video file as the video background;

S4. Decode the video file and draw it frame by frame into multiple pictures, and play the pictures in time sequence as the video background.

Further, in step S4, the video file is decoded and drawn into multiple pictures frame by frame through the Canvas interface.

Further, in step S4, the decoding of the video file and rendering the video file frame by frame into multiple pictures is specifically:

The browser capability detection is performed on the browser, and an appropriate browser interface supported by the browser is selected to decode the video file and draw it into multiple pictures frame by frame.

Further, the browser capability detection is performed on the browser, and the support of the browser to the Web Workers interface and the WebGL interface is obtained.

Further, the browser interface supported by the selected browser is specifically:

If described browser does not support described Web Workers interface and also does not support described WebGL interface, select the Canvas 2d interface of described browser for use;

If described browser does not support described Web Workers interface, supports described WebGL interface, selects the Canvas WebGI interface of described browser for use;

If described browser supports described Web Workers interface, does not support described WebGL interface, selects the Canvas 2d interface of described browser for use;

If the browser supports the Web Workers interface and also supports the WebGL interface, select the Canvas WebGI interface of the browser.

further,

If the browser does not support the Web Workers interface, the browser decodes the video file through the main program;

If the browser supports the Web Workers interface, the browser decodes the video file through the Web Workers interface.

Further, the Canvas WebGI interface is rendered by GPU.

Further, the first set of video formats includes at least MP4 format, and the second set of video formats includes at least TS format.

Further provide a mobile terminal webpage video background processing system, including:

An acquisition module, configured to acquire a video file and a video format type of the video file, wherein the video format type includes a first video format collection and a second video format collection;

The browser attribute judging module is used to obtain the browser userAgent attribute, judge whether the browser supports standard video elements and the video format type belongs to the first video format collection, if so, go to step S3, otherwise go to step S4 ;

A standard video element playback module, used to call the standard video element to play the video file as the video background if the browser supports the standard video element;

The drawing and playing module is used to decode the video file and draw it into multiple pictures frame by frame if the browser does not support standard video elements, and play the pictures in time sequence as the video background.

Further provide a kind of computer-readable storage medium, store computer program, when described computer program is executed by processor, realize above-mentioned web page video background processing processing method.

Therefore, the present invention provides following effect and/or advantage:

The present invention adopts different video processing strategies for different browsers by acquiring the browser userAgent attribute. In this way, it is compatible with mobile browsers and realizes webpage video background.

For incompatible mobile browsers, the present invention decodes the video file and draws it into multiple pictures frame by frame, plays the pictures in time sequence, realizes the webpage video background, and can support different browsers and different video file formats , Different hardware devices realize web page video background.

The visual effect of the present invention is better, but the video is not limited by this, it can use complete RGB24 bit color (16777216 kinds of colors) to represent the picture, so the visual effect of the video background will be better. The present invention can be used for playback control, but GIF pictures cannot be used for playback control, but the present invention can realize the playback control of the video background through operations such as video playback and pause.

According to the capabilities of different browsers, the present invention can use WebGL to directly generate the texture of video images for browsers that support WebGL capabilities, and can directly use GPU rendering capabilities to improve the efficiency of image rendering and rendering, thereby reducing resource production. Compared with GIF video resources, it has richer resources and lower production costs. However, in the production process of GIF, it is often necessary to consider the impact of volume and to do a lot of optimization operations such as compression, frame extraction, cropping, etc., which greatly reduces the threshold for generation.

The present invention can transfer the work of video decoding to the Web Workers thread for browsers that support Web Workers, so as to reduce the resource occupation of the browser's main process and improve the efficiency of program execution. For browsers that do not support Web Workers The work of video decoding can be handed over to the main program to ensure the generation of background video.

It is to be understood that both the foregoing general description and the following detailed description of the invention are exemplary and explanatory and are intended to provide further explanation of the invention as claimed.

Description of drawings

Figure 1 is a screenshot of the webpage video background displayed by different mobile browsers.

Fig. 2 is a schematic diagram of the main flow of the present invention.

Fig. 3 is a schematic diagram of the overall flow of the present invention.

FIG. 4 is a schematic diagram of a frame picture set.

detailed description

In order to facilitate the understanding of those skilled in the art, the structure of the present invention will be further described in detail with the embodiments in conjunction with the accompanying drawings:

Referring to Figure 2-3, a mobile webpage video background processing method includes the following steps:

S1. Obtain a video file and the video format type of the video file. The video format type includes a first video format collection and a second video format collection; in this embodiment, after the video file is obtained, the video file is parsed The information includes at least the type of video format, such as MP4, TS, AVI, etc. This embodiment does not require the format of the video file, and the format of the video file is obtained to facilitate the subsequent adoption of corresponding strategies. For example, standard Video elements can be directly decoded Video files in MP4 format, but cannot decode video files in TS format for example, so further confirming the format of the video file in this step is beneficial for subsequent processing steps to carry out different distinguishing processes for different video files.

S2. Obtain the userAgent attribute of the browser. If the browser supports standard video elements and the video format type belongs to the first video format collection, go to step S3; otherwise, go to step S4. The browser userAgent attribute refers to the information of the browser, including hardware platform, system software, application software, and user personal preferences. The browser name, browser version number, rendering engine, and operating system can be analyzed through the browser userAgent attribute. The method of use can be directly opened and viewed, or the browser userAgent attribute of other browsers can be copied for analysis. For example, if you get the browser userAgent attribute for iphone6, you can get, for example: "Mozilla/5.0 (iPhone; CPU iPhone OS 9_1like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143Safari/601.1" A row of data, including the hardware platform is iPhone, using AppleWebKit, Version/9.0 mobile terminal, and the browser is Safari/601.1. Different browsers have different capabilities to support the format of video files. Different browsers can be distinguished through the browser userAgent attribute to determine whether the browser supports standard video elements, and different backgrounds are used for browsers that support and do not support Video implementation strategy.

S3, calling the standard video element to play the video file as the video background; browsers that support the behavior of the standard Video element use the video element to play the video in MP4 format to implement the video background. The standard video element is specially used in HTML5 to play videos or movies on the Internet. When using the video element to play, no other plug-ins are needed, as long as the browser supports HTML5. Video in mp4 format can be played by calling the standard video element on IE9.0 or above, Safari3.1 or above, iso5.0 or above, and Android4.0 or above, without any other plug-ins or codes.

S4. Decode the video file and draw it frame by frame into multiple pictures, and play the pictures in time sequence as the video background. In this embodiment, the video format is TS format, and the video is decoded and drawn into multiple pictures frame by frame. As shown in FIG. 4 , a frame picture set is obtained, and the frame picture set is named according to the frame order. In this embodiment, there is no need to adjust the resolution of the picture, and it only needs to be the same as the original resolution of the video file. Compared with the traditional conversion of video to GIF, this embodiment is not limited to the fact that the GIF format can only use 8-bit colors (256 colors) to represent pictures, so as to achieve better visual effects.

Further, in step S4, the video file is decoded and drawn into multiple pictures frame by frame through the Canvas interface. The Canvas interface enables users to draw various graphics in the Web. The Canvas interface is a pixel-based drawing, which is equivalent to the HTML5 node of the sketchpad. Users can operate the drawing with JS and save the resulting image in .png or .jpg format.

Further, the browser capability detection is carried out to the browser, and the support situation of the browser to the Web Workers interface and the WebGL interface is obtained.

Browser capability detection can also be called feature detection. Its goal is to identify browser capabilities. For example, IE8 browsers and below are not compatible with getElementsByClassName. In order to determine whether the current browser supports getElementsByClassName, perform capability detection on the browser. Create a getElementsByClassName element that returns true if the browser is compatible with the element. Through browser capability detection, it is possible to detect browser support for various elements and interfaces. The browser capability detection method belongs to the prior art, and does not belong to the core improvement point of this application, so it will not be expanded here in detail. This embodiment obtains the support situation of described browser to Web Workers interface, WebGL interface by browser ability detection, and Web Worker interface provides a kind of simple method for Web content running script in background thread, and thread can carry out task and Do not interfere with the user interface. The resource occupation of the browser's main process can be reduced through the Web Worker interface. WebGL can invoke the rendering capabilities of the GPU to improve the efficiency of image rendering. Therefore, different strategies are made for the browser's support for the Web Workers interface and the WebGL interface. The specific strategies are as follows.

If the browser does not support the Web Workers interface and does not support the WebGL interface, select the Canvas 2d interface of the browser;

If the browser supports the Web Workers interface and does not support the WebGL interface, select the Canvas 2d interface of the browser;

When the browser is running, the rendering speed of the Canvas 2d interface is slower than that of the Canvas WebGI interface. Therefore, browsers that support the Canvas WebGI interface are preferentially rendered using the Canvas WebGI interface.

further,

The browser needs to create and select a corresponding process to run the corresponding task. Choosing the right thread can perform tasks without interfering with the user interface. For the situation that the browser supports the Web Workers interface, the browser can create and select a corresponding process to decode the video file through the Web Workers interface, so as to optimize the decoding video efficiency. And for the situation that does not support described Web Workers interface, need browser to select main program to decode described video file, thereby guarantee the carrying out of decoding.

Further, the Canvas WebGI interface is rendered by GPU.

Further, the first set of video formats includes at least MP4 format, and the second set of video formats includes at least TS format. In this embodiment, the first video format collection belongs to the video format supported by the standard video element, such as MP4, and some browsers may also support formats such as WebM, and the second video format is a video that is not supported by the standard video element Formats, such as TS, AVI and other formats.

Embodiment two

A mobile webpage video background processing system, comprising:

Embodiment Three

A computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the webpage video background processing method described in Embodiment 1 is implemented.

The above descriptions are only preferred embodiments of the present invention, and all equivalent changes and modifications made according to the scope of the patent application of the present invention shall fall within the scope of the present invention.

Claims

A mobile terminal webpage video background processing method, characterized in that: comprising the following steps:

S1. Obtain a video file and a video format type of the video file, where the video format type includes a first video format collection and a second video format collection;

S2, obtaining the browser userAgent attribute, judging whether the browser supports standard video elements and the video format type belongs to the first video format collection, if so, go to step S3, otherwise go to step S4;

S3, calling the standard video element to play the video file as the video background;

S4. Decode the video file and draw it frame by frame into multiple pictures, and play the pictures in time sequence as the video background.
The method for processing the video background of a mobile web page according to claim 1, wherein in step S4, the video file is decoded and drawn into multiple pictures frame by frame through the Canvas interface.
A method for processing a mobile webpage video background according to any one of claims 1-2, characterized in that: in step S4, said decoding the video file and drawing it into multiple pictures frame by frame is specifically:

The browser capability detection is performed on the browser, and an appropriate browser interface supported by the browser is selected to decode the video file and draw it into multiple pictures frame by frame.
A kind of mobile terminal webpage video background processing method according to claim 3, is characterized in that: described browser is carried out browser ability detection, obtains described browser to the support situation of Web Workers interface, WebGL interface.
The method for processing the video background of a mobile webpage according to claim 4, wherein the browser interface supported by the selected browser is specifically:

If the browser does not support the Web Workers interface and does not support the WebGL interface, select the Canvas 2d interface of the browser;

If described browser does not support described Web Workers interface, supports described WebGL interface, selects the Canvas WebGI interface of described browser for use;

If the browser supports the Web Workers interface and does not support the WebGL interface, select the Canvas 2d interface of the browser;

If the browser supports the Web Workers interface and also supports the WebGL interface, select the Canvas WebGI interface of the browser.
A method for processing the video background of a mobile webpage according to claim 5, wherein: further,

If the browser does not support the Web Workers interface, the browser decodes the video file through the main program;

If the browser supports the Web Workers interface, the browser decodes the video file through the Web Workers interface.
A method for processing a mobile webpage video background according to claim 5, wherein the Canvas WebGI interface is rendered by GPU.
The method for processing the video background of a mobile webpage according to claim 5, wherein the first video format collection includes at least MP4 format, and the second video format collection includes at least TS format.
A mobile webpage video background processing system, characterized in that: comprising:

An acquisition module, configured to acquire a video file and a video format type of the video file, wherein the video format type includes a first video format collection and a second video format collection;

The browser attribute judging module is used to obtain the browser userAgent attribute, judge whether the browser supports standard video elements and the video format type belongs to the first video format collection, if so, go to step S3, otherwise go to step S4 ;

A standard video element playback module, used to call the standard video element to play the video file as the video background if the browser supports the standard video element;

The drawing and playing module is used to decode the video file and draw it into multiple pictures frame by frame if the browser does not support standard video elements, and play the pictures in time sequence as the video background.
A computer-readable storage medium storing a computer program, characterized in that, when the computer program is executed by a processor, the webpage video background processing method described in claim 1 is implemented.