CN114610212A - Front-end visual video content editing method, device, equipment and storage medium - Google Patents

Front-end visual video content editing method, device, equipment and storage medium Download PDF

Info

Publication number
CN114610212A
CN114610212A CN202210242544.3A CN202210242544A CN114610212A CN 114610212 A CN114610212 A CN 114610212A CN 202210242544 A CN202210242544 A CN 202210242544A CN 114610212 A CN114610212 A CN 114610212A
Authority
CN
China
Prior art keywords
html text
module
picture
png format
video content
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202210242544.3A
Other languages
Chinese (zh)
Inventor
穆国峰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Zhongliang Proton Network Information Technology Co ltd
Original Assignee
Beijing Zhongliang Proton Network Information Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Zhongliang Proton Network Information Technology Co ltd filed Critical Beijing Zhongliang Proton Network Information Technology Co ltd
Priority to CN202210242544.3A priority Critical patent/CN114610212A/en
Publication of CN114610212A publication Critical patent/CN114610212A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/31Programming languages or programming paradigms
    • G06F8/315Object-oriented languages
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/20Servers specifically adapted for the distribution of content, e.g. VOD servers; Operations thereof
    • H04N21/23Processing of content or additional data; Elementary server operations; Server middleware
    • H04N21/234Processing of video elementary streams, e.g. splicing of video streams or manipulating encoded video stream scene graphs

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Computing Systems (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Two-Way Televisions, Distribution Of Moving Picture Or The Like (AREA)

Abstract

The invention discloses a method, a device, equipment and a storage medium for editing front-end visual video content, which relate to the technical field of computers, and the method comprises the following steps: the front end submits an html text of the content edited by the user, and stores a JavaScript file and a css file which are associated with the html text into a cloud space; the method comprises the steps that a JavaScript file and a css file which are associated with an html text are obtained by a rear end from a cloud space, and headless browser rendering is conducted on the html text; the rear end carries out picture format conversion processing on the rendered html text according to the JavaScript file to obtain a png format picture; and the back end calls an image processing program to compress the png format picture and the original video into a whole. The invention realizes simple operation of users and one-time editing of video contents (including characters, logo, watermark and the like) which can be reused in batches by matching front and back end programs.

Description

Front-end visual video content editing method, device, equipment and storage medium
Technical Field
The invention relates to the technical field of computers, in particular to a front-end visual video content editing method, device, equipment and storage medium.
Background
With the development of short video applications, short video content is made to meet the common needs of people. The common short video content production mode is that manual work is matched with a video editing tool to produce, but the problems that the demand of content materials is large or the use threshold of the editing tool is high still exist for general users.
Disclosure of Invention
The invention provides a front-end visual video content editing method, a front-end visual video content editing device, a front-end visual video content editing equipment and a storage medium, which solve the problems.
The invention provides a front-end visual video content editing method, which comprises the following steps:
step m 1: the front end submits html text of the content edited by the user, and a JavaScript file and a css file which are associated with the html text are stored in a cloud space;
step s 1: after receiving the html text, the rear end acquires a JavaScript file and a css file which are associated with the html text from a cloud space, and performs headless browser rendering on the html text;
step s 2: the rear end carries out picture format conversion processing on the rendered html text according to the JavaScript file to obtain a png format picture;
step s3: and the back end calls an image processing program to compress the png format picture and the original video into a whole.
Optionally, the headless browser rendering of the html text specifically includes: performing headless browser rendering on html text by using a selenium tool;
the step s2 is specifically as follows: and the rear end calls an html2canvas method in the JavaScript file to convert the rendered html text into a picture format to obtain a png format picture.
Optionally, the headless browser rendering on the html text specifically includes: in a Python program, performing headless browser rendering on html text by using a selenium tool; then also comprises the following steps: detecting whether the rendered html text is converted into a png format picture; if yes, returning a result to the front end; otherwise, continuously detecting whether the rendered html text is converted into the png format picture.
Optionally, the detecting whether the rendered html text is converted into a png format picture specifically includes: detecting whether the label is written, if so, detecting that the rendered html text is converted into a png format picture; otherwise, detecting that the rendered html text is not converted into the png format picture;
after obtaining the png format picture in step s2, the method further includes: and writing the label.
The invention also provides a front-end visual video content editing device, which comprises: the device comprises a submission module, a storage module, a receiving module, an acquisition module, a headless rendering module, a format conversion module and an image processing module;
the submission module is used for submitting the html text of the edited content of the user to the back end;
the storage module is used for storing the JavaScript file and the css file which are associated with the html text into a cloud space;
the receiving module is used for receiving the html text from the front end;
an obtaining module for obtaining a JavaScript file and a css file associated with the html text from the cloud space,
the headless rendering module is used for performing headless browser rendering on the html text;
the format conversion module is used for converting the rendered html text into a picture format according to the JavaScript file to obtain a png format picture;
and the image processing module is used for calling an image processing program to compress the png format picture and the original video into a whole.
Optionally, the headless rendering module is specifically configured to perform headless browser rendering on the html text by using a selenium tool;
the format conversion module is specifically used for calling an html2canvas method in the JavaScript file to convert the rendered html text into a picture format to obtain a png format picture.
Optionally, the method further comprises: a detection module;
the headless rendering module is specifically used for performing headless browser rendering on html text by using a selenium tool in a Python program;
the detection module is used for detecting whether the rendered html text is converted into a png format picture; if yes, sending a return request result to the front end; otherwise, continuously detecting whether the rendered html text is converted into the png format picture.
Optionally, the detection module is specifically configured to determine whether the tag has been written, and if so, detect that the rendered html text has been converted into a png format picture; otherwise, detecting that the rendered html text is not converted into the png format picture;
and the format conversion module is also used for writing the png format picture into a label after obtaining the png format picture.
The present invention provides an apparatus comprising: a processor;
a memory for storing executable instructions;
the processor is used for reading the executable instruction from the memory and executing the executable instruction so as to realize the front-end visual video content editing method.
The present invention provides a computer-readable storage medium storing a computer program which, when executed by a processor, causes the processor to implement the above-described front-end visual video content editing method.
The invention has the beneficial effects that: the front-end visual video content editing method, device, equipment and storage medium provided by the invention realize the editing scheme of video content (non-video content such as characters, logo, watermark and the like) which can be reused in batches by simple operation of a user and one-time editing through a front-end program and back-end program matching mode.
Drawings
Fig. 1 is a flowchart of a front-end visual video content editing method according to embodiment 1 of the present invention.
Detailed Description
The technical solutions in the present invention will be described clearly and completely with reference to the accompanying drawings, and it is obvious that the described embodiments are only some embodiments of the present invention, not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
Example 1
The embodiment provides a method for editing video content with front-end visualization, as shown in fig. 1, including:
step m 1: the front end submits html text of the content edited by the user, and a JavaScript file and a css file which are associated with the html text are stored in a cloud space;
step s 1: after receiving the html text, the rear end acquires a JavaScript file and a css file which are associated with the html text from a cloud space, and performs headless browser rendering on the html text;
step s 2: the rear end carries out picture format conversion processing on the rendered html text according to the JavaScript file to obtain a png format picture;
step s3: and the back end calls an image processing program to compress the png format picture and the original video into a whole.
Preferably, the headless browser rendering of the html text specifically includes: performing headless browser rendering on html text by using a selenium tool;
step s2 specifically includes: and the rear end calls an html2canvas method in the JavaScript file to convert the rendered html text into a picture format to obtain a png format picture.
Preferably, headless browser rendering is performed on the html text, specifically: in a Python program, performing headless browser rendering on html text by using a selenium tool; then also comprises the following steps: detecting whether the rendered html text is converted into a png format picture; if yes, returning a result to the front end; otherwise, continuously detecting whether the rendered html text is converted into the png format picture.
Preferably, detecting whether the rendered html text is converted into a png format picture, specifically: detecting whether the label is written, if so, detecting that the rendered html text is converted into a png format picture; otherwise, detecting that the rendered html text is not converted into the png format picture;
after obtaining the png format picture in step s2, the method further includes: and writing the label.
The embodiment further provides a front-end visual video content editing device, including:
the device comprises a submission module, a storage module, a receiving module, an acquisition module, a headless rendering module, a format conversion module and an image processing module;
the submission module is used for submitting the html text of the edited content of the user to the back end;
the storage module is used for storing the JavaScript file and the css file which are associated with the html text into a cloud space;
the receiving module is used for receiving the html text from the front end;
the acquisition module is used for acquiring a JavaScript file and a css file which are associated with the html text from the cloud space;
the headless rendering module is used for performing headless browser rendering on the html text;
the format conversion module is used for converting the rendered html text into a picture format according to the JavaScript file to obtain a png format picture;
and the image processing module is used for calling an image processing program to compress the png format picture and the original video into a whole.
Preferably, the headless rendering module is specifically configured to perform headless browser rendering on html text using a selenium tool;
and the format conversion module is specifically used for calling an html2canvas method in the JavaScript file to convert the rendered html text into a picture format to obtain a png format picture.
Preferably, a front-end visual video content editing apparatus may further include: a detection module;
the headless rendering module is specifically used for performing headless browser rendering on the html text by using a selenium tool in a Python program;
the detection module is used for detecting whether the rendered html text is converted into a png format picture; if yes, sending a return request result to the front end; otherwise, continuously detecting whether the rendered html text is converted into the png format picture.
Preferably, the detection module is specifically configured to determine whether the tag has been written, and if so, detect that the rendered html text has been converted into a png format picture; otherwise, detecting that the rendered html text is not converted into the png format picture;
and the format conversion module is also used for writing the png format picture into the label after obtaining the png format picture.
The present embodiment also provides an apparatus, including: a memory for storing executable instructions;
the processor is used for reading the executable instructions from the memory and executing the executable instructions so as to realize the front-end visual video content editing method.
The present embodiment also provides a computer-readable storage medium, which stores a computer program, and when the computer program is executed by a processor, the computer program causes the processor to implement the front-end visual video content editing method.
The method, the apparatus, the device and the storage medium for editing the front-end visual video content provided by this embodiment implement a simple operation by a user and edit a video content (referring to non-video content such as text, logo and watermark) that can be reused in batches at one time by means of a front-end and back-end program cooperation.
Example 2
The embodiment provides a front-end visual video content editing method, which includes:
the front-end content real-time interactive editing and rendering is carried out through the h5 technology, a user submits an html text through an html code after confirming that the self-input content and the style are correct, and the dependent js (JavaScript) and css (cascading style forms) are synchronously stored in the cloud space, so that the problems of overlarge files and low efficiency caused by directly transmitting js and css files can be solved.
And the rear end receives the html text in the format of the html code at the front end, pulls js and css files stored in the cloud space, and renders the files by using a selenium tool headless browser, so that the content style written by the front end can be restored by 100% without depending on a display card and any interface.
The rendered html content needs to be converted into the png format picture by using an html2canvas method, then the png format picture is submitted to the downstream of a link, and the png format picture and the video are pressed together by using image processing programs such as ffmpeg and the like, so that the effect of editing the video content in real time at the front end is achieved.
Specifically, the method comprises the following steps:
first, the invention uses html code to carry out front-end and back-end communication, and has the advantages of small data volume and high reduction degree. And one request can accept a plurality of generation requests, thereby greatly reducing the service processing time. Secondly, a backend crawler technology framework (selenium tool) is used for rendering the headless browser, so that the limitation that a page must be rendered in the environment with a display card and the browser is solved, and the rendering process can be completely submitted to backend simulation.
And finally, performing image conversion processing on the html content which is rendered by simulation by using an html2canvas method. The format transferred out supports the real png format picture without background, and can meet the requirement of video synthesis. The difficulty in this embodiment is: in the embodiment, when a python framework selenium tool is used for simulating and rendering html codes, html conversion to png format pictures is carried out in a js link and uploaded to a cloud space. Essentially, the processes are 2 independent processes, and the python process does not know the progress of converting the rendered html content into the png format picture in the js link and does not know when the generated png format picture is uploaded completely. This problem can result in the python host process not knowing when the task processing is complete, which has no way to give the processing results to the requesting peer in a reasonable time. If the python main process sleep fixed time is forced to be used as the timeout time, the request time length is wasted when the real processing time is less than the timeout time; when the real processing time is longer than the timeout time, the response result is abnormal, and the task fails.
Aiming at the problem, the invention synchronously uploads the picture by using an async method in a js link and manually writes a transDone self-defined label when the picture is finished. And forces a wait at the host process using the WebDriverWait method until a transDone tag is retrieved. By utilizing the design idea, the problem of mutual communication of two opposite language processes is successfully solved, and the effect of processing real-time response in real time is achieved.
The front-end visual video content editing method provided by the embodiment realizes a video content (non-video content such as characters, logo, watermark and the like) editing scheme which can be reused in batches by a user through simple operation and one-time editing in a front-end and back-end program matching mode.
The above description is only an embodiment of the present invention, but the scope of the present invention is not limited thereto, and any changes or substitutions that can be easily conceived by those skilled in the art within the technical scope of the present invention are included in the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.

Claims (10)

1. A front-end visual video content editing method is characterized by comprising the following steps:
step m 1: the front end submits html text of the content edited by the user, and a JavaScript file and a css file which are associated with the html text are stored in a cloud space;
step s 1: after receiving the html text, the rear end acquires a JavaScript file and a css file which are associated with the html text from a cloud space, and performs headless browser rendering on the html text;
step s 2: the rear end carries out picture format conversion processing on the rendered html text according to the JavaScript file to obtain a png format picture;
and step s3, the back end calls an image processing program to compress the png format picture and the original video into a whole.
2. The front-end visual video content editing method according to claim 1,
the headless browser rendering of the html text specifically comprises the following steps: performing headless browser rendering on html text by using a selenium tool;
the step s2 is specifically as follows: and the rear end calls an html2canvas method in the JavaScript file to convert the rendered html text into a picture format to obtain a png format picture.
3. The front-end visual video content editing method according to claim 2,
the headless browser rendering of the html text specifically comprises the following steps: in a Python program, performing headless browser rendering on html text by using a selenium tool; then also comprises the following steps: detecting whether the rendered html text is converted into a png format picture; if yes, returning a result to the front end; otherwise, continuously detecting whether the rendered html text is converted into the png format picture.
4. The front-end visual video content editing method according to claim 3,
the detecting whether the rendered html text is converted into the png format picture specifically comprises the following steps: detecting whether the label is written, if so, detecting that the rendered html text is converted into a png format picture; otherwise, detecting that the rendered html text is not converted into the png format picture;
after obtaining the png format picture in step s2, the method further includes: and writing the label.
5. A front-end visual video content editing apparatus, comprising:
the device comprises a submitting module, a storage module, a receiving module, an obtaining module, a headless rendering module, a format conversion module and an image processing module;
the submission module is used for submitting the html text of the edited content of the user to the back end;
the storage module is used for storing the JavaScript file and the css file which are associated with the html text into a cloud space;
the receiving module is used for receiving the html text from the front end;
the acquisition module is used for acquiring a JavaScript file and a css file which are associated with the html text from the cloud space;
the headless rendering module is used for performing headless browser rendering on the html text;
the format conversion module is used for converting the rendered html text into a picture format according to the JavaScript file to obtain a png format picture;
and the image processing module is used for calling an image processing program to compress the png format picture and the original video into a whole.
6. The front-end visual video content editing apparatus according to claim 5, wherein the headless rendering module is specifically configured to perform headless browser rendering on html text using a selenium tool;
the format conversion module is specifically used for calling an html2canvas method in the JavaScript file to convert the rendered html text into a picture format to obtain a png format picture.
7. The front-end visual video content editing apparatus according to claim 6, further comprising: a detection module;
the headless rendering module is specifically used for performing headless browser rendering on html text by using a selenium tool in a Python program;
the detection module is used for detecting whether the rendered html text is converted into a png format picture; if yes, sending a return request result to the front end; otherwise, continuously detecting whether the rendered html text is converted into the png format picture.
8. The front-end visual video content editing apparatus according to claim 7, wherein the detection module is specifically configured to determine whether a tag has been written, and if so, detect that the rendered html text has been converted into a png format picture; otherwise, detecting that the rendered html text is not converted into the png format picture;
and the format conversion module is also used for writing the png format picture into a label after obtaining the png format picture.
9. An apparatus, comprising: a processor;
a memory for storing executable instructions;
the processor is configured to read the executable instructions from the memory and execute the executable instructions to implement the front-end visual video content editing method of any one of claims 1 to 4.
10. A computer-readable storage medium, characterized in that the storage medium stores a computer program which, when executed by a processor, causes the processor to implement the front-end visual video content editing method of any one of claims 1-4.
CN202210242544.3A 2022-03-11 2022-03-11 Front-end visual video content editing method, device, equipment and storage medium Pending CN114610212A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210242544.3A CN114610212A (en) 2022-03-11 2022-03-11 Front-end visual video content editing method, device, equipment and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210242544.3A CN114610212A (en) 2022-03-11 2022-03-11 Front-end visual video content editing method, device, equipment and storage medium

Publications (1)

Publication Number Publication Date
CN114610212A true CN114610212A (en) 2022-06-10

Family

ID=81863833

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210242544.3A Pending CN114610212A (en) 2022-03-11 2022-03-11 Front-end visual video content editing method, device, equipment and storage medium

Country Status (1)

Country Link
CN (1) CN114610212A (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115329225A (en) * 2022-10-18 2022-11-11 中孚信息股份有限公司 Page prerendering method, system and equipment based on server browser

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130044260A1 (en) * 2011-08-16 2013-02-21 Steven Erik VESTERGAARD Script-based video rendering
US20140325349A1 (en) * 2013-04-30 2014-10-30 Adobe Systems Incorporated Real-time Representations of Edited Content
CN109493120A (en) * 2018-10-19 2019-03-19 微梦创科网络科技(中国)有限公司 A kind of method and apparatus of online editing video ads
CN111857937A (en) * 2020-08-04 2020-10-30 杭州智会学科技有限公司 Full-platform compatible image-text question display method
CN111915705A (en) * 2019-05-07 2020-11-10 百度在线网络技术(北京)有限公司 Picture visual editing method, device, equipment and medium

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130044260A1 (en) * 2011-08-16 2013-02-21 Steven Erik VESTERGAARD Script-based video rendering
US20140325349A1 (en) * 2013-04-30 2014-10-30 Adobe Systems Incorporated Real-time Representations of Edited Content
CN109493120A (en) * 2018-10-19 2019-03-19 微梦创科网络科技(中国)有限公司 A kind of method and apparatus of online editing video ads
CN111915705A (en) * 2019-05-07 2020-11-10 百度在线网络技术(北京)有限公司 Picture visual editing method, device, equipment and medium
CN111857937A (en) * 2020-08-04 2020-10-30 杭州智会学科技有限公司 Full-platform compatible image-text question display method

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115329225A (en) * 2022-10-18 2022-11-11 中孚信息股份有限公司 Page prerendering method, system and equipment based on server browser

Similar Documents

Publication Publication Date Title
US8511575B2 (en) Digital image file including optical code
US8995032B2 (en) Producing an image and optical file from a visible first digital image and from a visible second digital image of a machine-readable optical code which encodes information associated with or derived from the first digital image
US9280952B2 (en) Selective display of OCR'ed text and corresponding images from publications on a client device
US8549395B2 (en) Method and system for transforming an integrated webpage
CN101441713B (en) Optical character recognition method and apparatus of PDF document
Zhang et al. Viscode: Embedding information in visualization images using encoder-decoder network
US20190361907A1 (en) Method for providing e-book service and computer program therefor
US8718374B2 (en) Method and apparatus for accessing an electronic resource based upon a hand-drawn indicator
CN108495174B (en) Method and system for generating video file by H5 page effect
CN108763350B (en) Text data processing method and device, storage medium and terminal
CN114610212A (en) Front-end visual video content editing method, device, equipment and storage medium
US7551312B1 (en) Annotable document printer
CN113364929A (en) Information processing apparatus, information processing method, and computer readable medium
US11763504B2 (en) Method for displaying electronic price tag, server and storage medium
CN114297544A (en) Remote browsing method, device, equipment and storage medium
CN110162301B (en) Form rendering method, form rendering device and storage medium
US11265594B2 (en) Data processing method and device, storage medium, electronic device
CN116578795A (en) Webpage generation method and device, storage medium and electronic equipment
CN110661880A (en) Remote assistance method, system and storage medium
CN110674825A (en) Character recognition method, device and system applied to intelligent voice mouse and storage medium
CN113591437A (en) Game text translation method, electronic device and storage medium
CN112668298A (en) Questionnaire recording method, system, equipment and storage medium based on mobile terminal
CN112863084B (en) Intelligent sales terminal, and testing method, device and system of intelligent sales terminal
JP2004072558A (en) Electronic whiteboard and method for outputting data of electronic whiteboard
CN115658838B (en) Map set data generation method and device, electronic equipment and storage medium

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination