CN115086764A - Method and terminal for web side to preview short video effect - Google Patents
Method and terminal for web side to preview short video effect Download PDFInfo
- Publication number
- CN115086764A CN115086764A CN202210496164.2A CN202210496164A CN115086764A CN 115086764 A CN115086764 A CN 115086764A CN 202210496164 A CN202210496164 A CN 202210496164A CN 115086764 A CN115086764 A CN 115086764A
- Authority
- CN
- China
- Prior art keywords
- video
- web
- file
- component
- previewing
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 33
- 230000000694 effects Effects 0.000 title claims abstract description 26
- 238000004590 computer program Methods 0.000 claims description 6
- 238000010586 diagram Methods 0.000 description 5
- 230000006870 function Effects 0.000 description 4
- 238000006243 chemical reaction Methods 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 2
- 230000004075 alteration Effects 0.000 description 1
- 230000000712 assembly Effects 0.000 description 1
- 238000000429 assembly Methods 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000009191 jumping Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000002194 synthesizing effect Effects 0.000 description 1
Images
Classifications
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs
- H04N21/4402—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/443—OS processes, e.g. booting an STB, implementing a Java virtual machine in an STB or power management in an STB
Landscapes
- Engineering & Computer Science (AREA)
- Multimedia (AREA)
- Signal Processing (AREA)
- Software Systems (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses a method for previewing short video effect by a web terminal, which can enable a video to be previewed quickly in real time and improve user experience, and the technical scheme is as follows: relating to a web end, comprising the following steps: s1: acquiring a video file; s2: converting the video file into a blob type file; s3: generating bace64 content based on the blob type file; s4: the method comprises the steps of assigning the back 64 content to a video component, and enabling the video component to be matched with a user-defined UI component to display a video file, and belongs to the technical field of video processing.
Description
Technical Field
The invention belongs to the technical field of video processing, and particularly relates to a method and a terminal for previewing a short video effect by a web side.
Background
Many apps in the internet integrate a short video function, the function of uploading short videos is also many, and the user requirements are very wide; in the prior art, many short video uploading modules upload short video files to a background through an interface request, then take a video link returned from the background and put the video link into a user-defined UI component to display the application effect of each terminal, and during the period, the short video uploading module waits for the uploading time, if the video is too large, the short video uploading module can take the returned link from the background through long waiting, so that real-time preview cannot be achieved, and user experience is influenced.
However, the video previewing method in the prior art is complicated and is not beneficial for the user to quickly preview the short video effect, such as patent publication No. CN108024083A, a method and apparatus for processing video, an electronic device, and a computer-readable storage medium. The method comprises the following steps: acquiring a plurality of segmented videos; when a user selects a preview control, jumping to a preview page, and displaying corresponding screenshots of all segmented videos at the specified position of the preview page in sequence; circularly playing each segmented video on a preview page, and displaying a progress effect graph on screenshots corresponding to the arranged and displayed segmented videos respectively so as to prompt a user of the currently played segmented video and the playing progress; sequentially synthesizing the segmented videos into a video segment;
a video preview method and apparatus as disclosed in patent publication No. CN104967865A, the video preview method comprising: sequentially acquiring each frame of video frame in a target video; performing special effect processing on at least one frame of video frame in the target video to obtain each frame of video frame corresponding to the processed target video; caching each frame of video frame corresponding to the processed target video into a cache preview queue; and previewing the video through each frame of video frame cached in the cache preview queue.
The video previewing methods in the above patents are complex, and cannot implement real-time and fast previewing of videos, so that a user cannot quickly confirm whether the shot videos meet the needs of the user.
Disclosure of Invention
The invention mainly aims to provide a method for previewing the short video effect by a web end, so that a video can be previewed quickly in real time, and the user experience is improved.
According to a first aspect of the present invention, there is provided a method for a web-side to preview a short video effect, which is characterized in that, relating to the web-side, the method includes the following steps:
s1: acquiring a video file;
s2: converting the video file into a blob type file;
s3: generating bace64 content based on the blob type file;
s4: the back 64 content is assigned to the video component, and the video component cooperates with the custom UI component to display the video file.
In a specific embodiment of the invention, the web side obtains the video file uploaded by the user through the input component.
In a specific embodiment of the invention, the web end is integrated with a custom UI component, and the video component is matched with the custom UI component to display the video file.
In a specific embodiment of the invention, the number of the user-defined UI components is multiple, and the web terminal switches the user-defined UI components by acquiring a user instruction.
The invention further provides a terminal, which comprises a memory, a processor and a computer program stored on the memory and capable of running on the processor, wherein the processor executes the computer program to implement the method for previewing the short video effect by the web end.
One of the above technical solutions of the present invention has at least one of the following advantages or beneficial effects:
compared with the prior art, the method and the device for previewing the video file through the web end have the advantages that the video file is previewed through the web end, the video effect can be rapidly previewed without waiting for a link returned by the uploaded video file, the waiting time of a user is shortened, and the user experience is improved.
Drawings
The invention is further described below with reference to the accompanying drawings and examples;
fig. 1 is a flowchart illustrating a method for a web-side to preview a short video effect according to embodiment 1 of the present invention;
fig. 2 is a schematic diagram of codes of an upload method of a video file according to embodiment 1 of the present invention;
fig. 3 is a schematic diagram of codes of a method of acquiring a video file according to embodiment 1 of the present invention;
FIG. 4 is a diagram of code for assigning the contents of back 64 to a video component according to embodiment 1 of the present invention;
fig. 5 is a schematic diagram of a video component of embodiment 1 of the present invention showing the code of a video file;
fig. 6 is a schematic structural view of embodiment 2 of the present invention.
Detailed Description
Reference will now be made in detail to embodiments of the present invention, examples of which are illustrated in the accompanying drawings, wherein like reference numerals refer to the same or similar elements or elements having the same or similar functions throughout. The embodiments described below with reference to the accompanying drawings are illustrative only for the purpose of explaining the present invention, and are not to be construed as limiting the present invention.
The following disclosure provides many different embodiments, or examples, for implementing different aspects of the invention.
Example 1
The short video is a video in short film, which is an internet content transmission mode, and is generally a video transmitted on a new internet medium within 5 minutes.
In the prior art, many short video uploading modules upload short video files to a background through an interface request, and then put video links returned by the background into a user-defined UI component to display the application effect of each terminal; during the period, uploading time is waited, if the video is too large, the return link of the background can be taken only through long waiting, and real-time preview cannot be achieved;
in order to solve the problem that the video cannot be previewed in real time, the invention provides a method for previewing the effect of the short video by a web end, which has the core idea that: reading the video file, converting the video file into a blob type, generating the back 64 content based on the blob type video file, assigning the back 64 content to the video component for displaying, and accordingly realizing real-time preview of the video file.
The method mainly aims at the quick preview of the application of the short video function module uploaded by the web end; in the invention, an input component and a video component are integrated on a web end.
Fig. 1 discloses a flow diagram of a method for previewing short video effects on a web side.
Referring to fig. 1, a method for previewing a short video effect at a web side includes the following steps:
s1: acquiring a video file;
the video file is acquired in a user uploading mode; the web end defines an uploading method through an input component for the user to upload the video file, and codes of the uploading method of the video file are shown in FIG. 2; the code of the method of acquiring a video file is shown in fig. 3.
The web end supports video files with the maximum 10GB within 5 minutes;
s2: converting the video file into a blob type file;
converting the video file into a blob type file by using a blob () constructor; the conversion type of the video file is defined by codes when conversion is needed, and the codes for defining the conversion type comprise:
const aBlob＝new Blob([resultFile[0]],{type:'video/mp4'})。
s3: generating bace64 content based on the blob type file;
specifically, the blob type file is operated through the fileReader object, and the generation of the back 64 content is realized through a mode of a reader.
The fileReader object is newly built through a code 'const reader ═ new fileReader ()';
s4: the back 64 content is assigned to the video component, and the video component cooperates with the custom UI component to display the video file.
Wherein the code that the back 64 content assigns to the video component is shown in FIG. 4; the video component exposes the code of the video file as shown in fig. 5.
Compared with the prior art, the method and the device have the advantages that the video file is previewed through the web end, the video effect can be rapidly previewed without waiting for the link returned by the uploaded video file, the waiting time of a user is shortened, the user can rapidly confirm whether the video meets the requirement of the user, and the user experience is improved.
Specifically, the number of the user-defined UI components is multiple, and the multiple user-defined UI components are formulated according to styles of different terminals; the video assembly and the single user-defined UI assembly are matched to display the effect of the video file on the corresponding terminal, the terminal is a platform capable of playing videos, and the web end switches the user-defined UI assembly by acquiring a user instruction, so that different user-defined UI assemblies are matched with the video assembly, the user can preview the display effect of the video file on different terminals, and the user experience is improved.
Example 2
Referring to fig. 6, a terminal includes a memory 1, a processor 2 and a computer program stored on the memory 1 and executable on the processor 2, and the processor 2 executes the computer program to implement the method for web-side previewing short video effect according to embodiment 1.
While embodiments of the present invention have been shown and described, it will be understood by those of ordinary skill in the art that: various changes, modifications, substitutions and alterations can be made to the embodiments without departing from the principles and spirit of the invention, the scope of which is defined by the claims and their equivalents.
Claims (5)
1. A method for previewing short video effect by a web end relates to the web end, and comprises the following steps:
s1: acquiring a video file;
s2: converting the video file into a blob type file;
s3: generating bace64 content based on the blob type file;
s4: the back 64 content is assigned to the video component, and the video component cooperates with the custom UI component to display the video file.
2. The method for previewing the short video effect by the web side according to claim 1, wherein the web side obtains the video file uploaded by the user through an input component.
3. The method for previewing the short video effect by the web side according to claim 1, wherein the blob type file is operated by a fileReader object to generate the back 64 content.
4. The method for web-side previewing short video effect according to claim 1, wherein the number of the custom UI components is plural, and the web-side switches the custom UI components by obtaining the user instruction.
5. A terminal, characterized by comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor executes the computer program to implement the method for web-side previewing short video effects according to any one of claims 1-4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210496164.2A CN115086764A (en) | 2022-05-08 | 2022-05-08 | Method and terminal for web side to preview short video effect |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210496164.2A CN115086764A (en) | 2022-05-08 | 2022-05-08 | Method and terminal for web side to preview short video effect |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115086764A true CN115086764A (en) | 2022-09-20 |
Family
ID=83246851
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210496164.2A Pending CN115086764A (en) | 2022-05-08 | 2022-05-08 | Method and terminal for web side to preview short video effect |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115086764A (en) |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140189516A1 (en) * | 2012-12-27 | 2014-07-03 | Huawei Technologies Co., Ltd. | Video preview display method and terminal device |
| CN113050940A (en) * | 2021-03-24 | 2021-06-29 | 百度在线网络技术（北京）有限公司 | Method for previewing small program, related device and computer program product |
| CN114143490A (en) * | 2021-11-29 | 2022-03-04 | 云门(深圳)技术有限公司 | Method for previewing SDI video signal in webpage |
-
2022
- 2022-05-08 CN CN202210496164.2A patent/CN115086764A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140189516A1 (en) * | 2012-12-27 | 2014-07-03 | Huawei Technologies Co., Ltd. | Video preview display method and terminal device |
| CN113050940A (en) * | 2021-03-24 | 2021-06-29 | 百度在线网络技术（北京）有限公司 | Method for previewing small program, related device and computer program product |
| CN114143490A (en) * | 2021-11-29 | 2022-03-04 | 云门(深圳)技术有限公司 | Method for previewing SDI video signal in webpage |
Non-Patent Citations (1)
| Title |
|---|
| 黑马程序员: "《微信小程序开发案例教程慕课版》", 中国铁道出版社, pages: 116 - 58 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108989609A (en) | Video cover generation method, device, terminal device and computer storage medium | |
| US10360694B2 (en) | Methods and devices for image loading and methods and devices for video playback | |
| US8208762B1 (en) | Optimizing the performance of an image editing system in a client-server environment | |
| CN109672902A (en) | A kind of video takes out frame method, device, electronic equipment and storage medium | |
| CN109618225A (en) | Video takes out frame method, device, equipment and medium | |
| Wang et al. | Vigc: Visual instruction generation and correction | |
| JP2022036319A (en) | Image rendering method, device, electronic device, computer readable storage medium, and computer program | |
| US20230186452A1 (en) | Method and system for generating video cover based on browser | |
| US8463847B2 (en) | System for image rendering in a computer network | |
| CN102624910B (en) | Method, the Apparatus and system of the web page contents that process user chooses | |
| CN108595211B (en) | Method and apparatus for outputting data | |
| CN109413434A (en) | Image processing method, device, system, storage medium and computer equipment | |
| CN111857695A (en) | Software project processing method, device, equipment and storage medium | |
| CN115086764A (en) | Method and terminal for web side to preview short video effect | |
| CN113535541A (en) | Test method, test device, storage medium and computer equipment | |
| CN110300118B (en) | Streaming media processing method, device and storage medium | |
| CN108509396A (en) | Pdf document turns method, electronic device and the computer readable storage medium of picture | |
| CN115086752B (en) | Recording method, system and storage medium for browser page content | |
| US20120001935A1 (en) | Method for image rendering in a computer network | |
| US20230186631A1 (en) | Browser-based frame extraction method and system | |
| CN113852756B (en) | Image acquisition method, device, equipment and storage medium | |
| CN114338954A (en) | Video generation circuit, method and electronic equipment | |
| CN113641853A (en) | Dynamic cover generation method, device, electronic equipment, medium and program product | |
| CN111522546B (en) | Page generation method, related device and front-end page | |
| CN113850891A (en) | Animation playing processing method, device, equipment and system |
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 |