Video subtitle editing method and device based on browser

Abstract

The invention relates to the technical field of subtitle processing, in particular to a browser-based video subtitle editing method and device.Local video resources are directly called through the cross-platform characteristics of a browser, real-time visual adjustment of subtitle parameters is achieved in combination with a front-end editing interface, and the subtitle processing efficiency is improved. Meanwhile, a dynamic matching mechanism of a video time axis and subtitle entry parameters is established, and dynamic subtitle rendering is performed by using an SVG stroking algorithm, so that the technical bottleneck of single traditional subtitle rendering effect is broken through on the basis of ensuring accurate synchronization of the subtitles and the video, the technical problem of poor real-time subtitle rendering effect in the prior art is effectively solved, and the subtitle rendering efficiency is improved. And finally, a full-process solution integrating subtitle editing, real-time preview and high-quality rendering is constructed.

Description

Technical Field

[0001] This application relates to the technical field of subtitle processing, and specifically relates to a method and device for editing video subtitles based on a browser. Background Art

[0002] With the rapid development of the Internet and multimedia platforms, video content has become one of the main forms of information dissemination. In this context, video subtitles, as an important element to enhance the viewing experience, have become increasingly prominent. Subtitles can not only help viewers overcome language barriers and understand video content, but also greatly facilitate the viewing needs of the hearing-impaired and in specific environments (such as noisy environments). Therefore, the accuracy and synchronization of video subtitles are crucial for improving the overall quality of video content.

[0003] Although existing video subtitle processing solutions meet the basic needs of users to a certain extent, there are still many defects and deficiencies. First of all, the real-time performance of offline subtitle editing tools is poor. Users need to frequently switch between video playback and subtitle editing and cannot view the editing effect in real time, which greatly reduces work efficiency. Secondly, the operation complexity is relatively high. For non-professional users, the operation interfaces of these tools are often not user-friendly, with a high learning cost, which limits their wide application. In addition, the cross-platform compatibility issue is also a major shortcoming of existing solutions. Some tools may only support specific operating systems, restricting the flexibility of users. More critically, some embedded subtitles and hard subtitles cannot be modified once generated, with extremely poor flexibility, bringing great inconvenience to the secondary editing and modification of video content.

[0004] It can be seen that there are problems in the prior art such as poor real-time performance of subtitle editing, complex operation, insufficient cross-platform compatibility, and poor subtitle rendering effect, which cannot meet the immediate editing and high-quality display requirements of browser-based video subtitles. Summary of the Invention

[0005] The purpose of this application is to provide a method and device for editing video subtitles based on a browser to solve the problem of poor real-time rendering effect of subtitles in the prior art.

[0006] To achieve the above purpose, the technical solution adopted in this application is as follows: According to one aspect of the embodiments of the present application, a browser-based video subtitle editing method is provided, including: obtaining a target video and a first subtitle file, where the target video is a video that needs to be edited for subtitles and is currently being played in the current browser, and the first subtitle file is the currently valid subtitle file configured for the target video; splitting the first subtitle file into multiple original subtitle entries by blank lines, and parsing the original subtitle entry parameters in each original subtitle entry, where the original subtitle entry parameters define the start and end times of the subtitle entry and the subtitle text content; obtaining, from the front-end editing interface of the current browser, the target subtitle entry parameters obtained after editing the original subtitle entry parameters of the target subtitle entry, where the target subtitle entry is at least one of the original subtitle entries; aligning and matching the target video with all subtitle entries including the target subtitle entry according to time, and when the target video matches successfully with the subtitle entry, the subtitle corresponding to the target video is displayed as the rendered subtitle, where the rendered subtitle is obtained by rendering the subtitle text in the subtitle entry parameters corresponding to the subtitle entry that matches successfully using the SVG stroke algorithm.

[0007] According to the above technical means, by integrating the browser native environment and the front-end interaction technology, directly calling the local video resources by using the cross-platform characteristics of the browser and combining with the front-end editing interface, the real-time visual adjustment of subtitle parameters is realized, thus avoiding the compatibility problems of cross-platform adaptation of traditional desktop software. At the same time, the real-time feedback efficiency of subtitle editing is significantly improved through the instant rendering mechanism; moreover, the SVG stroke algorithm is used for subtitle rendering, breaking through the technical bottleneck of the single traditional subtitle rendering effect; by establishing a dynamic matching mechanism between the video timeline and the subtitle entry parameters, on the basis of ensuring the accurate synchronization of the subtitle and the video, it supports the user to perform lossless editing on any subtitle entry, effectively solving the technical pain points of the too long subtitle editing operation chain and too high modification cost in the prior art, and finally constructing a full-process solution integrating subtitle editing, real-time preview, and high-quality rendering.

[0008] Further, split the first subtitle file into multiple original subtitle entries by blank lines, and parse the original subtitle entry parameters in each original subtitle entry, including: using the string splitting method to split the first subtitle file into multiple consecutive string sequences by blank lines, and storing them in the subtitle entry array in order. Each string sequence is an original subtitle entry, and each string sequence includes the following content: subtitle entry number, timestamp, subtitle text, and blank line; traverse the subtitle entry array, and determine the line type of the current line through the modulo operation value of the current line index in the subtitle entry array; when it is determined that the line type is a subtitle text line, extract the text content stored in the current line to obtain the original subtitle text in the original subtitle entry parameters, and store the original subtitle text in the text array. The original subtitle text is the subtitle text content of the original subtitle entry, and the first index of the original subtitle text in the text array is the same as the subtitle entry number of the original subtitle entry corresponding to the current line; when it is determined that the line type is a timestamp line, parse the timestamp string of the original subtitle entry stored in the current line to obtain the original timestamp in the original subtitle entry parameters, and convert the original timestamp into a floating point number in seconds and store it in the time array. The original timestamp is used to represent the start time and end time of the original subtitle entry, and the second index of the original timestamp in the time array is the same as the subtitle entry number of the original subtitle entry corresponding to the current line.

[0009] According to the above technical means, the subtitle file is converted into a structured array through blank line splitting and string splitting, which is compatible with multiple formats and retains the original information, ensuring cross-platform editing compatibility; the text and timestamp are separated through modulo operation, and combined with index mapping to achieve fast positioning and modification, reducing the consumption of computing resources; the timestamp is converted into a floating point number to establish a millisecond-level benchmark, supporting the decoupled management of content and time, providing efficient support for operations such as batch adjustment and clip synchronization, and finally constructing a subtitle management system that takes into account both efficiency and flexibility.

[0010] Further, traverse the subtitle entry array, and determine the line type of the current line through the modulo operation value of the current line index in the subtitle entry array, including: obtaining the third index corresponding to the current line; substituting the third index into the formula of the modulo operation, and calculating the modulo operation value. The formula of the modulo operation is: V = index3%4, where V represents the modulo operation value of the third index corresponding to the current line, and index3 represents the third index corresponding to the current line; if the modulo operation value is the first preset value, it is determined that the line type is a timestamp line; if the modulo operation value is the second preset value, it is determined that the line type is a subtitle text line.

[0011] According to the above technical means, by adopting the modulo-4 operation to quickly map the periodic structure of four consecutive lines, the timestamp line and the subtitle text line are directly distinguished according to the remainder, realizing the line type judgment with an O(1) time complexity, significantly reducing the CPU resource consumption for large-scale subtitle parsing; at the same time, through the construction of a three-dimensional indexing system of subtitle serial numbers, timestamps, and texts, it provides efficient data support for operations such as batch time offset adjustment and multi-entry synchronous modification.

[0012] Further, from the front-end editing interface of the current browser, after obtaining and editing the original subtitle entry parameters corresponding to the target subtitle entry, the obtained target subtitle entry parameters include: the target subtitle text in the target subtitle entry parameter information obtained after performing a text editing operation on the original subtitle text in the original subtitle entry parameters corresponding to the target subtitle entry from the front-end editing interface of the current browser; and / or, the target timestamp in the target subtitle entry parameter information obtained after editing the original timestamp in the original subtitle entry parameters corresponding to the target subtitle entry from the front-end editing interface of the current browser, where the target timestamp of the edited target subtitle entry conforms to the preset time constraint rules.

[0013] According to the above technical means, by providing a parallel editing entry for subtitle text and timestamp through the browser front-end interface, users can preview the modification effect in real time and directly correct the content, reducing the loop operation cost of traditional editing; at the same time, for the timestamp parameter setting constraint rules, the adjustment range is restricted through the timeline control to avoid the timeline misalignment caused by manual input errors and maintain precise synchronization with the video; by decoupling text and time editing into independent parts, it supports both the time code fine-tuning of professional users and the content correction needs of ordinary users, and finally constructs a dual-mode subtitle correction system that takes into account operation flexibility and output accuracy.

[0014] Further, the preset time constraint rules include: if the target subtitle entry is not the first original subtitle entry, the start time of the target subtitle entry is not less than the end time of the previous original subtitle entry, otherwise the minimum value of the start time of the target subtitle entry is the third preset value; if the target subtitle entry is not the first original subtitle entry, the end time of the target subtitle entry is not greater than the start time of the subsequent original subtitle entry, otherwise the maximum value of the end time of the target subtitle entry is the fourth preset value.

[0015] According to the above technical means, by setting the logical constraint rules for the subtitle timeline, the start time of the target subtitle entry is forced to be not less than the end time of the previous subtitle, and its end time is restricted to be not greater than the start time of the next subtitle. At the same time, time thresholds are set for the first and last subtitles, thus effectively avoiding problems such as subtitle overlap, early display, excessive blank space, or delayed disappearance. This two-way time constraint mechanism forms a dynamic verification barrier during the user editing process, which not only ensures the independence of the modification of a single subtitle entry but also maintains the temporal coherence of the global subtitle sequence. Especially in the batch editing scenario, it significantly reduces the risk of timeline disorder caused by human misoperation.

[0016] Furthermore, the target video is aligned and matched with the target subtitle entries including the target subtitle entry according to time, including: obtaining the current playback time of the target video; traversing the time intervals corresponding to all subtitle entries. If the current playback time is within the time interval of any one of all subtitle entries, the target video and the subtitle entry are successfully matched; if the current playback time is not within the time intervals of all subtitle entries, the target video and the subtitle entry are not successfully matched, where the time interval is composed of a start time and an end time.

[0017] According to the above technical means, by real-time detecting the matching relationship between the video playback time and the subtitle time interval, it is ensured that the subtitle is triggered to be displayed only within the valid time period, avoiding subtitle advance, retention, or misalignment. At the same time, a full traversal mechanism is adopted to establish a timeline coverage network, which can still ensure the strict correspondence between video frames and subtitles even in the face of complex choreography scenarios, especially maintaining temporal synchronization during operations such as fast forward and rewind. And by setting the automatic processing logic when there is no matching subtitle, the display residue problem of the traditional engine is eliminated, and finally a high-fault-tolerant subtitle synchronization system adapted to complex scenarios is constructed.

[0018] Furthermore, the subtitle text in the subtitle entry parameters corresponding to the successfully matched subtitle entry is rendered by using the SVG stroke algorithm to obtain the rendered subtitle, including: defining the container style of the SVG container, and defining the text style of the text element in the SVG container through CSS styles. Among them, the container style is used to limit the display position and size of the subtitle, and the container style includes position and size. The text style is used to limit the rendering effect of the subtitle, and the text style includes: the width of the stroke, the color of the stroke, the font color, and the font style; dynamically binding the container style to the SVG container and dynamically binding the text style to the text element; rendering the subtitle text in the subtitle entry parameters corresponding to the successfully matched subtitle entry into the target subtitle text according to the text style of the text element; and displaying the target subtitle text according to the position and size in the container style to obtain the rendered subtitle.

[0019] According to the above technical means, the vectorized rendering of subtitles is achieved through the SVG stroke algorithm combined with the dynamic style binding mechanism. By decoupling the control of the container style and the text style, the subtitle display area can be accurately positioned through layout constraints, and visual parameters such as strokes and fonts can be flexibly adjusted to adapt to different scenarios. At the same time, based on the SVG vector characteristics, the clarity of subtitle scaling is maintained, and the readability in complex backgrounds is improved through contour enhancement. Finally, a subtitle presentation solution with both rendering accuracy, visual adaptability, and style extensibility is constructed.

[0020] Further, after aligning and matching the target video with all subtitle entries including the target subtitle entry according to time, all subtitle entries are converted into a target subtitle file in a preset format. Among them, the subtitle content corresponding to each subtitle entry in the target subtitle file is arranged in ascending order of the subtitle entry number, and the subtitle content corresponding to each subtitle entry is generated in the following manner, including: obtaining the subtitle entry number, timestamp, subtitle text, and blank line corresponding to the current subtitle entry from the subtitle entry array; converting the timestamp of the current subtitle entry into a timestamp string in a preset format, where the timestamp string in the preset format refers to a string composed of a start timestamp, an end timestamp, and a preset delimiter; arranging and combining the subtitle entry number, timestamp string, and subtitle text corresponding to the current subtitle entry in the order of subtitle entry number, timestamp string, subtitle text, and blank line to generate the subtitle content corresponding to the current subtitle entry.

[0021] According to the above technical means, by arranging subtitle entries in sequence and unifying the timestamp format, a linear timeline structure that meets industry standards is generated, ensuring that subtitle files can be seamlessly parsed in different tools. At the same time, the subtitle content is encapsulated into a standardized module, retaining the integrity of metadata and supporting segmented rendering, significantly improving the maintainability of multilingual subtitles or special effect subtitles. Finally, the target format subtitle file is batch-generated through an automated script, avoiding format chaos and manual writing errors, and forming a subtitle output solution that takes into account compatibility, extensibility, and production efficiency.

[0022] According to another aspect of the embodiments of the present application, there is also provided a browser-based video subtitle editing device, including: a subtitle file acquisition module, configured to acquire a target video and a first subtitle file, where the target video is a video that needs to be edited and is being played in the current browser, and the first subtitle file is the currently valid subtitle file configured for the target video; a subtitle file parsing module, configured to split the first subtitle file into at least one original subtitle entry by blank lines, and parse the original subtitle entry parameters in each original subtitle entry, where the original subtitle entry parameters define the start and end times of the subtitle entry and the subtitle text content; a subtitle content editing module, configured to obtain, from the front-end editing interface of the current browser, the target subtitle entry parameters obtained after editing the original subtitle entry parameters corresponding to the target subtitle entry, where the target subtitle entry is at least one entry in the original subtitle entries; a subtitle content display module, configured to align and match the target video with all subtitle entries including the target subtitle entry according to time. When the target video matches successfully with the subtitle entry, the subtitle corresponding to the target video is displayed as the rendered subtitle information, where the rendered subtitle information is obtained by rendering the subtitle text in the subtitle entry parameters corresponding to the successfully matched subtitle entry using the SVG stroke algorithm.

[0023] According to another aspect of the embodiments of the present application, there is also provided an electronic device, including a processor, a communication interface, a memory, and a communication bus. The processor, the communication interface, and the memory complete communication with each other through the communication bus. The memory is used to store a computer program. The processor is configured to execute the method steps in any of the above embodiments by running the computer program stored on the memory.

[0024] According to another aspect of the embodiments of the present application, there is also provided a computer-readable storage medium, in which a computer program is stored. The computer program is configured to execute the method steps in any of the above embodiments when running.

[0025] Advantages of the present application: The present application utilizes the cross-platform feature of the browser to directly call local video resources, combines with the front-end editing interface to realize real-time visual adjustment of subtitle parameters, establishes a dynamic matching mechanism between the video timeline and subtitle entry parameters, and uses the SVG stroke algorithm for subtitle dynamic rendering. On the basis of ensuring accurate synchronization between the subtitle and the video, it breaks through the technical bottleneck of the single traditional subtitle rendering effect, effectively solves the technical pain point of poor real-time rendering effect of subtitles in the prior art, and finally constructs a full-process solution integrating subtitle editing, real-time preview, and high-quality rendering. Description of the Drawings

[0026] The accompanying drawings here are incorporated into the specification and form a part of this specification, showing embodiments consistent with the present application, and are used together with the specification to explain the principles of the present application.

[0027] To more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the following will briefly introduce the accompanying drawings required for use in the description of the embodiments or the prior art. Obviously, for those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0028] Figure 1 It is a schematic diagram of the hardware environment of an optional browser-based video subtitle editing method provided by an embodiment of the present application; Figure 2 It is a schematic flowchart of an optional browser-based video subtitle editing method provided by an embodiment of the present application; Figure 3 It is a structural block diagram of an optional browser-based video subtitle editing device provided by an embodiment of the present application; Figure 4 It is a structural block diagram of an optional electronic device provided by an embodiment of the present application. Detailed implementation manners

[0029] In order to enable those skilled in the art of the present technology to better understand the solutions of the present application, the following will clearly and completely describe the technical solutions in the embodiments of the present application with reference to the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the scope of protection of the present application.

[0030] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above accompanying drawings are used to distinguish similar objects, and do not necessarily need to describe a specific order or sequence. It should be understood that such data can be interchanged under appropriate circumstances so that the embodiments of the present application described here can be implemented in an order other than those illustrated or described here. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusion. For example, a process, method, system, product, or device that includes a series of steps or units does not necessarily have to be limited to those steps or units clearly listed, but may include other steps or units not clearly listed or inherent to these processes, methods, products, or devices.

[0031] According to one aspect of the embodiments of the present application, a browser-based video subtitle editing method is provided. Optionally, in this embodiment, the above browser-based video subtitle editing method can be applied to a hardware environment composed of a terminal and a server. The server is connected to the terminal through a network and can be used to provide services for the terminal or the client installed on the terminal. A database can be set on the server or independently of the server to provide data storage services.

[0032] The above network can include, but is not limited to, at least one of the following: wired network, wireless network. The above wired network can include, but is not limited to, at least one of the following: wide area network, metropolitan area network, local area network. The above wireless network can include, but is not limited to, at least one of the following: WIFI (Wireless Fidelity), Bluetooth. The terminal is not limited to being a PC, mobile phone, tablet computer, etc.

[0033] The browser-based video subtitle editing method of the embodiments of the present application can be executed by the server, or can be executed by the terminal, or can be jointly executed by the server and the terminal. Among them, when the terminal executes the browser-based video subtitle editing method of the embodiments of the present application, it can also be executed by the client installed on it.

[0034] Taking the execution of the browser-based video subtitle editing method in this embodiment by the server as an example, please refer to Figure 1 , Figure 1 is a schematic diagram of a hardware environment of an optional browser-based video subtitle editing method provided by the embodiments of the present application. As shown in Figure 1 , the hardware environment of the browser-based video subtitle editing method includes: a terminal 102, and a server 104 connected to the terminal 102 through a network. The server 104 is used to store the acquired target video and the first subtitle file, the original subtitle entries obtained by splitting the first subtitle file, the original subtitle entry parameters obtained by parsing each original subtitle entry, and the target video with reconfigured subtitles; the terminal 102 is used to display the acquired target video and the first subtitle file and the target video with reconfigured subtitles.

[0035] The browser-based video subtitle editing method in this embodiment can be applied to the scenario of real-time subtitle editing. In the embodiments of the present application, the above browser-based video subtitle editing method is illustrated by taking real-time subtitle modification as an example.

[0036] In the prior art, there is a problem that the real-time rendering effect of subtitles is not good, and it cannot meet the requirements of instant editing and high-quality display of video subtitles on the browser side. To solve the above problems, a browser-based video subtitle editing method running on the above terminal is provided in this embodiment. Please refer to Figure 2 , Figure 2It is a schematic flowchart of an optional browser-based video subtitle editing method provided by an embodiment of the present application. As Figure 2 shown, the browser-based video subtitle editing method of the embodiment of the present application specifically includes the following steps: Step S201, obtain a target video and a first subtitle file, where the target video is the video that needs to be edited with subtitles and is being played in the current browser, and the first subtitle file is the currently valid subtitle file configured for the target video; Step S202, split the first subtitle file into multiple original subtitle entries by blank lines, and parse the original subtitle entry parameters in each original subtitle entry, where the original subtitle entry parameters define the start and end times of the subtitle entry and the subtitle text content; Step S203, obtain, from the front-end editing interface of the current browser, the target subtitle entry parameters obtained after editing the original subtitle entry parameters of the target subtitle entry, where the target subtitle entry is at least one entry in the original subtitle entries; Step S204, align and match the target video and all subtitle entries including the target subtitle entry according to time. When the target video matches the subtitle entry successfully, the subtitle corresponding to the target video is displayed as the rendered subtitle, where the rendered subtitle is obtained by rendering the subtitle text in the subtitle entry parameters corresponding to the successfully matched subtitle entry using the SVG stroke algorithm.

[0037] Through the above steps S201 to S204, by directly calling the local video resources using the cross-platform characteristics of the browser, combining with the front-end editing interface to realize the real-time visual adjustment of subtitle parameters, establishing a dynamic matching mechanism between the video timeline and subtitle entry parameters, and using the SVG stroke algorithm for subtitle dynamic rendering. On the basis of ensuring the accurate synchronization of subtitles and videos, it breaks through the technical bottleneck of the single traditional subtitle rendering effect, effectively solves the technical pain point of the poor real-time rendering effect of subtitles in the prior art, and finally constructs a full-process solution integrating subtitle editing, real-time preview, and high-quality rendering, solving the problem of the poor real-time rendering effect of subtitles in subtitle editing in the related technology.

[0038] The following combines Figure 2 to explain the browser-based video subtitle editing method in the embodiment of the present application.

[0039] In the present application, an integrated, highly real-time, easy-to-operate and feature-rich video subtitle editor is developed on the browser side to meet the continuously improving video production requirements. This tool is a video subtitle editor implemented using the Vue.js front-end framework and the JavaScript development language.

[0040] In the technical solution of step S201, a target video and a first subtitle file are obtained.

[0041] In this embodiment, the target video is the video being played in the current browser that needs subtitle editing, and the first subtitle file is the currently valid subtitle file configured for the target video.

[0042] In practical applications, when a video whose subtitle needs to be modified is loaded in the browser, the video subtitle editor will obtain the target video and the first subtitle file respectively. The format of the first subtitle file can be.srt,.ass,.vtt, etc.

[0043] For the specific steps of obtaining the target video and the subtitle file, no specific limitation is made in this application. Please refer to the relevant content in the prior art.

[0044] In the technical solution of step S202, the first subtitle file is split into multiple original subtitle entries by blank lines, and the original subtitle entry parameters in each original subtitle entry are parsed.

[0045] In this embodiment, the first subtitle file includes multiple subtitle entries, which are arranged in sequence. Since the first subtitle file is a file in a specific format, and the subtitle entries in each format file are specific structured data, therefore, the first subtitle file can be split and parsed to obtain the original subtitle entries and the original subtitle entry parameters. The original subtitle entry parameters define the start and end times of the subtitle entry and the subtitle text content, and specifically include: the original subtitle text and the original timestamp. The original subtitle text is the subtitle text content of the original subtitle entry, and the original timestamp is used to represent the start time and end time of the original subtitle entry. The original timestamp includes the start timestamp and the end timestamp. In this application, a preset subtitle analysis and splitting algorithm is used to split and parse the first subtitle file in.srt format to obtain multiple original subtitle entries and the original subtitle entry parameters in each original subtitle entry. The original subtitle entry parameters define the start and end times of the subtitle entry and the subtitle text content.

[0046] For subtitle files in other formats, they need to be converted into subtitle files in.srt format first, and then the subtitle analysis and splitting algorithm in this application is used for splitting and parsing. For the specific steps of converting subtitle files in other formats into subtitle files in.srt format, no specific limitation is made in this application. Please refer to the relevant content in the prior art. In this embodiment, the first subtitle file in.srt format is called the SRT subtitle file.

[0047] As an alternative embodiment, the first subtitle file is split into multiple original subtitle entries by blank lines, and the original subtitle entry parameters in each original subtitle entry are parsed, including: using the string splitting method to split the first subtitle file into multiple consecutive string sequences by blank lines, and storing them into the subtitle entry array in order. Each string sequence is an original subtitle entry, and each string sequence includes the following: subtitle entry number, timestamp, subtitle text, and blank line; traversing the subtitle entry array, determining the line type of the current line through the modulo operation value of the current line index in the subtitle entry array; when it is determined that the line type is a subtitle text line, extracting the text content stored in the current line to obtain the original subtitle text in the original subtitle entry parameters, and storing the original subtitle text into the text array. The original subtitle text is the subtitle text content of the original subtitle entry, and the first index of the original subtitle text in the text array is the same as the subtitle entry number of the original subtitle entry corresponding to the current line; when it is determined that the line type is a timestamp line, parsing the timestamp string of the original subtitle entry stored in the current line to obtain the original timestamp in the original subtitle entry parameters, and converting the original timestamp into a floating point number in seconds and storing it into the time array. The original timestamp is used to represent the start time and end time of the original subtitle entry, and the second index of the original timestamp in the time array is the same as the subtitle entry number of the original subtitle entry corresponding to the current line.

[0048] In this embodiment, the split('\n') method is specifically used in the video subtitle editor to split the content of the SRT subtitle file into string sequences by blank lines. In JavaScript, split('') is a method of the string object, which is used to split a string into an array, and the splitting is based on the specified delimiter. Since the SRT subtitle file uses blank lines as entry delimiters, '\n' here is used as the delimiter for a physical blank line.

[0049] Using the string splitting method split('\n') to split the SRT subtitle file to obtain multiple original subtitle entries. The original subtitle entry is a subtitle entry whose subtitle text content has not been modified, and it is a string sequence of a specific data structure. After splitting to obtain a string sequence, it is stored into the subtitle entry array srtContent in order. Each string sequence in the subtitle entry array srtContent includes the following: subtitle entry number, timestamp, subtitle text, and blank line, and the content included in each string sequence is stored in the order of subtitle entry number, timestamp, subtitle text, and blank line.

[0050] If a subtitle entry is obtained by splitting an SRT subtitle file using a string splitting method in a video subtitle editor, and its content is: subtitle entry number 1, timestamp string 00:00:01,000 --> 00:00:03,000, subtitle text Hello, then the corresponding string array in the subtitle entry array srtContent for the parsed subtitle entry content is: ["1", "00:00:01 -->00:00:03", "Hello", ""], including an empty line.

[0051] To facilitate subsequent editing of the time and content of subtitle entries, in this embodiment, the subtitle entry array is traversed, and the line type of the current line is determined by the modulo operation value of the current line index in the subtitle entry array. The line type is used to characterize what content is stored in each line of the subtitle entry array srtContent. In the solution of this embodiment, since only the timestamps and subtitle texts stored in the subtitle entry array srtContent are concerned, therefore, in this embodiment, the line type is specifically a timestamp line or a subtitle text line.

[0052] When it is determined that the line type is a subtitle text line, the text content stored in the current line of the subtitle entry array srtContent is extracted to obtain the original subtitle text in the original subtitle entry parameter, and the original subtitle text is stored in the text array srtList. Among them, the first index index1 of the original subtitle text in the text array srtList is the same as the subtitle entry number of the original subtitle entry corresponding to the current line; when it is determined that the line type is a timestamp line, the timestamp string of the original subtitle entry stored in the current line of the subtitle entry array srtContent is parsed to obtain the original timestamp in the original subtitle entry parameter, and the original timestamp is converted into a floating point number in seconds and stored in the time array curTimeArr. Among them, the second index index2 of the original timestamp in the time array curTimeArr is the same as the subtitle entry number of the original subtitle entry corresponding to the current line. Each element in the time array curTimeArr is an array of length 2, and each element represents the timestamp of a subtitle entry, representing the start time and end time of the subtitle entry respectively.

[0053] The specific steps of timestamp conversion in this embodiment are: extract the timestamp strings corresponding to the start time and end time respectively; use the string splitting method split(':') to split each timestamp string by hours, minutes, and seconds; calculate the number of seconds corresponding to each timestamp, and this number of seconds is a floating point number.

[0054] If the string array corresponding to a subtitle entry in the subtitle entry array srtContent described above is ["1", "00:00:01 --> 00:00:03", "Hello", ""], then the subtitle text stored in the text array srtList is ["Hello"], and the start time and end time stored in the time array curTimeArr are ["1.000", "3.000"].

[0055] Further, in the above steps, traverse the subtitle entry array, and determine the line type of the current line through the modulo operation value of the current line index in the subtitle entry array, including: obtaining the third index corresponding to the current line; substituting the third index into the formula of the modulo operation, and calculating to obtain the modulo operation value, where the formula of the modulo operation is: V = index3 % 4, where V represents the modulo operation value of the third index corresponding to the current line, and index3 represents the third index corresponding to the current line; if the modulo operation value is the first preset value, determine that the line type is the timestamp line; if the modulo operation value is the second preset value, determine that the line type is the subtitle text line.

[0056] The third index is the current line index in the subtitle entry array srtContent, and the formula of the modulo operation is used to calculate the modulo operation value of the current line index. The formula of the modulo operation is: V = index3 % 4, where V represents the modulo operation value of the third index corresponding to the current line, and index3 represents the third index corresponding to the current line. In this embodiment, the first preset value is 1, and the second preset value is 2.

[0057] According to the above technical means, by adopting the modulo 4 operation to quickly map the periodic structure of four consecutive lines, directly distinguishing the timestamp line and the subtitle text line according to the remainder, the line type judgment with O(1) time complexity is realized, significantly reducing the CPU resource consumption of large-scale subtitle parsing; at the same time, through the construction of a three-dimensional index system of subtitle serial numbers, timestamps, and texts, efficient data support is provided for operations such as batch time offset adjustment and multi-entry synchronous modification.

[0058] In a specific application, a video subtitle editor adopts a subtitle analysis and splitting algorithm to process the timestamps and corresponding subtitle texts in the SRT subtitle file into a specific data structure and store them to facilitate the subsequent program to display subtitles. The specific steps of the algorithm are as follows: 1. Obtain and split the content of the SRT subtitle file: Use the string splitting method split('\n') to split the content of the SRT subtitle file into multiple consecutive string sequences by line, and store the split string sequences in the subtitle entry array srtContent in order. Among them, each string sequence is an original subtitle entry, and each string sequence includes the following content: subtitle entry number, timestamp, subtitle text, and an empty line.

[0059] 2. Parse the timestamp and subtitle text of each subtitle entry: Traverse the subtitle entry array srtContent. Each subtitle entry has 4 lines in the subtitle entry array srtContent: the first line is the subtitle entry number, the second line is the timestamp, the third line is the subtitle text, and the fourth line is an empty line.

[0060] Determine the line type based on the modulo operation value of the current line index in the subtitle entry array srtContent. Specifically: obtain the third index index3 corresponding to the current line in the subtitle entry array srtContent, and use the formula of the modulo operation to determine the line type. The formula of the modulo operation is: V = index3 % 4, where V represents the modulo operation value of the third index corresponding to the current line, and index3 represents the third index corresponding to the current line.

[0061] If V = 2, determine that the line type is the subtitle text line, and store the subtitle text of this line in the text array srtList; if V = 1, determine that the line type is the timestamp line, parse the timestamp string of the original subtitle entry stored in the current line to obtain the original timestamp in the original subtitle entry parameters, convert the original timestamp into a floating point number in seconds and store it in the time array curTimeArr. Each subtitle entry's timestamp in the time array curTimeArr corresponds to two times, namely the start time and the end time.

[0062] The specific steps of timestamp conversion in this step are: extract the timestamp strings corresponding to the start time and the end time respectively; use the string splitting method split(':') to split each timestamp string by hours, minutes, and seconds; calculate the number of seconds corresponding to each timestamp, and this number of seconds is a floating point number.

[0063] It is understandable that the subtitle analysis and splitting algorithm in this embodiment converts the subtitle file into a structured array through blank line splitting and string splitting, is compatible with multiple formats and retains the original information, ensuring cross-platform editing compatibility; separates the text and timestamp through modulo operation, and cooperates with index mapping to achieve fast positioning and modification, reducing the consumption of computing resources; converts the timestamp into a floating-point number to establish a millisecond-level benchmark, supports decoupled management of content and time, provides efficient support for operations such as batch adjustment and clip synchronization, and finally constructs a subtitle management system that takes into account both efficiency and flexibility.

[0064] In the technical solution of step S203, after editing the original subtitle entry parameters of the target subtitle entry from the front-end editing interface of the current browser, the obtained target subtitle entry parameters are obtained. The target subtitle entry is at least one entry in the original subtitle entries.

[0065] In this embodiment, the original subtitle entry parameters include the original subtitle text and the original timestamp, and the target subtitle entry parameters are the subtitle entry parameters obtained after editing the original subtitle entry parameters, which include the target subtitle text and the target timestamp. The front-end editing interface is a subtitle editing component implemented by JavaScript in the video subtitle editor. This subtitle editing component provides a user-friendly interface to edit the SRT subtitle file, including modifying the timestamp and subtitle text of the subtitle, and provides functions such as adding and deleting subtitle entries, merging line subtitle entries, and splitting and wrapping subtitle entries. The subtitle editing component includes: an el-input-number component and an el-input component. Among them, the el-input-number component is used to edit the timestamp of the subtitle entry, and the el-input component is used to edit the subtitle text of the subtitle entry.

[0066] As an alternative embodiment, obtaining the target subtitle entry parameters obtained after editing the original subtitle entry parameters corresponding to the target subtitle entry from the front-end editing interface of the current browser includes: obtaining the target subtitle text in the target subtitle entry parameter information obtained after performing a text editing operation on the original subtitle text in the original subtitle entry parameters corresponding to the target subtitle entry from the front-end editing interface of the current browser; and / or obtaining the target timestamp in the target subtitle entry parameter information obtained after editing the original timestamp in the original subtitle entry parameters corresponding to the target subtitle entry from the front-end editing interface of the current browser, where the target timestamp of the edited target subtitle entry conforms to the preset time constraint rule.

[0067] In practical applications, the video subtitle editor uses the el-input-number component to edit the timestamps of subtitle entries. The time constraint rules are used to limit the time logic. The time constraint rules in the above steps include: if the target subtitle entry is not the first original subtitle entry, the start time of the target subtitle entry is not less than the end time of the previous original subtitle entry; otherwise, the minimum value of the start time of the target subtitle entry is the third preset value. If the target subtitle entry is not the first original subtitle entry, the end time of the target subtitle entry is not greater than the start time of the next original subtitle entry; otherwise, the maximum value of the end time of the target subtitle entry is the fourth preset value.

[0068] The third preset value is 0, and the fourth preset value can be adjusted according to your own needs. For example, the fourth preset value is 500 seconds.

[0069] In this embodiment, if the target subtitle entry is not the first original subtitle entry, the start time of the target subtitle entry is not less than the end time of the previous original subtitle entry; otherwise, the minimum value of the start time of the target subtitle entry is the third preset value. Specifically, if the target subtitle entry is not the first original subtitle entry, the minimum value of the start time of the target subtitle entry is the end time of the previous original subtitle entry, and the maximum value is the end time of the target subtitle entry. If the target subtitle entry is the first original subtitle entry, the minimum value of the start time of the target subtitle entry is 0.

[0070] In this embodiment, if the target subtitle entry is not the first original subtitle entry, the end time of the target subtitle entry is not greater than the start time of the next original subtitle entry; otherwise, the maximum value of the end time of the target subtitle entry is the fourth preset value. Specifically, if the target subtitle entry is not the first original subtitle entry, the minimum value of the end time of the target subtitle entry is the start time of the target subtitle entry, and the maximum value is the start time of the next original subtitle entry. If the target subtitle entry is the last original subtitle entry, the maximum value of the end time of the target subtitle entry is the fourth preset value.

[0071] According to the above technical means, by setting the logical constraint rules for the subtitle timeline, it is forced that the start time of the target subtitle entry is not less than the end time of the previous subtitle, and the end time is limited not to be greater than the start time of the next subtitle. At the same time, time thresholds are set for the first and last subtitles, thus effectively avoiding problems such as subtitle overlap, early display, too long blank space, or delayed disappearance. This two-way time constraint mechanism forms a dynamic verification barrier during the user editing process, which not only ensures the independence of the modification of a single subtitle entry but also maintains the temporal coherence of the global subtitle sequence. Especially in the batch editing scenario, it significantly reduces the risk of timeline disorder caused by human misoperation.

[0072] In this embodiment, the text editing operation specifically refers to operations such as content correction and format adjustment of the original subtitle text. The text editing operation in the above steps includes: correcting the content of the original subtitle text of the target subtitle entry; splitting the original subtitle text of the target subtitle entry; merging the original subtitle text of the target subtitle entry; deleting the target subtitle entry; and adding a subtitle entry before or after the target subtitle entry.

[0073] In practical applications, the video subtitle editor uses the el-input component to correct the content of the original subtitle text of the target subtitle entry, and realizes functions such as splitting, merging, and obtaining focus through binding event handling functions. Specifically: the processing logic for splitting the subtitle line content is realized by binding the event handling function @keyup.enter when the Enter key is pressed; the processing logic for merging the number of subtitle content lines is realized by binding the event handling function @keydown.delete when the Delete key is pressed; the input box obtains focus by binding the event handling function @focus. In practical applications, an "Add" button is also provided to add a new subtitle entry; a "Delete" button is provided to delete the current subtitle entry.

[0074] In this embodiment, the specific steps for modifying the timestamp and subtitle text of the subtitle using the subtitle editing component are as follows: 1. Input the time array curTimeArr and the text array srtList.

[0075] 2. Use the v-for directive to traverse the text array srtList and the time array curTimeArr to generate corresponding edit boxes. The edit boxes include a timestamp edit box and a text edit box. The text edit box corresponds to the first index index1 of the text array srtList, and the time edit box corresponds to the second index index2 of the time array curTimeArr.

[0076] 3. Editing of the subtitle timestamp: Use the el-input-number component to edit the start time and end time of the subtitle entry.

[0077] 4. Editing of the subtitle text: Use the el-input component to edit the subtitle text. The processing logic for splitting the subtitle line content is realized by binding the event handling function @keyup.entershixian when the Enter key is pressed. The processing logic for merging the number of subtitle content lines is realized by binding the event handling function @keydown.delete when the Delete key is pressed. The input box obtains focus by binding the event handling function @focus; an "Add" button is provided to add a new subtitle entry; a "Delete" button is provided to delete the current subtitle entry.

[0078] According to the above technical means, a parallel editing entry for subtitle text and timestamps is provided through the browser front-end interface. Users can preview the modification effect in real time and directly correct the content, reducing the loop operation cost of traditional editing. At the same time, constraint rules are set for the timestamp parameters, and the adjustment range is restricted through the timeline control to avoid timeline misalignment caused by manual input errors and maintain precise synchronization with the video. By decoupling text and time editing into independent parts, it supports both the timecode fine-tuning of professional users and the content correction needs of ordinary users, and finally constructs a dual-mode subtitle correction system that takes into account operation flexibility and output accuracy.

[0079] In the technical solution of step S204, the target video and all subtitle entries including the target subtitle entry are aligned and matched according to time. When the target video and the subtitle entry match successfully, the subtitle corresponding to the target video is displayed as the rendered subtitle.

[0080] Since the time of the original subtitle entry corresponding to the target video and / or the subtitle text has been modified, in order to make the target video correspond to the modified subtitle entry, in this embodiment, the target video and all subtitle entries including the target subtitle entry are aligned and matched according to time. When the target video and the subtitle entry match successfully, the subtitle corresponding to the target video is displayed as the rendered subtitle; when the target video and the subtitle entry do not match successfully, the target video does not display the subtitle.

[0081] In this embodiment, aligning and matching the target video and all subtitle entries including the target subtitle entry according to time specifically means: the time of the subtitle entry is precisely aligned with the timeline of the video to ensure that the subtitle is displayed at the correct time point. The rendered subtitle is obtained by rendering the subtitle text in the subtitle entry parameters corresponding to the successfully matched subtitle entry using the SVG stroke algorithm.

[0082] As an optional embodiment, aligning and matching the target video and the target subtitle entry including the target subtitle entry according to time includes: obtaining the current playback time of the target video; traversing the time intervals corresponding to all subtitle entries. If the current playback time is within the time interval of any one of all subtitle entries, the target video and the subtitle entry match successfully; if the current playback time is not within the time intervals of all subtitle entries, the target video and the subtitle entry do not match successfully, where the time interval is composed of a start time and an end time.

[0083] The current playback time refers to the time corresponding to the target video being currently played. In this embodiment, the video subtitle editor obtains the current playback time curTime of the target video through the event object e. The time interval is composed of a start time and an end time. Specifically, the time interval is composed of the start time and the end time in each element of the time array curTimeArr.

[0084] The video subtitle editor traverses the time intervals corresponding to all subtitle entries to check whether the current time curTime is within a certain subtitle time interval, thereby determining that the target video does not match the subtitle entry. If the current playback time is within the time interval of any one of all subtitle entries, the target video matches the subtitle entry successfully; if the current playback time is not within the time intervals of all subtitle entries, the target video does not match the subtitle entry successfully.

[0085] In practical applications, the video subtitle editor uses a time update event processing algorithm to handle the real-time update of the video playback progress, ensuring that the subtitles can be displayed synchronously with the video content. The specific steps of this algorithm are as follows: 1. Obtain the current playback time curTime of the target video through the event object e.

[0086] 2. Traverse the time array curTimeArr to determine whether the current playback time curTime is within the time interval of a certain subtitle. Specifically: If the current playback time curTime is greater than or equal to the start time item[0] and less than or equal to the end time item[1] of the current element in the time array curTimeArr (i.e., item[0] <= curTime <= item[1]), it means that the current playback time curTime is within the subtitle time interval. Assign the corresponding second index index2 of the current element in the time array curTimeArr to the index curTimeIndex corresponding to the current playback time curTime, and call the scrollToTop() method to scroll the subtitle view to the correct position; return true to indicate that the target video matches the subtitle entry successfully and end the traversal. In this embodiment, the index curTimeIndex corresponding to the current playback time curTime is used to obtain the subtitle text that should be displayed from the text array srtList storing the subtitles.

[0087] 3. If no matching subtitle time period is found after traversing the time array curTimeArr, set the index curTimeIndex corresponding to the current playback time curTime to -1, and no subtitle is displayed; return false to indicate that the target video does not match the subtitle entry successfully and end the traversal.

[0088] According to the above technical means, by real-time detecting the matching relationship between the video playback time and the subtitle time interval, it is ensured that the subtitle is triggered and displayed only within the effective time period, avoiding early appearance, retention or misalignment of the subtitle; at the same time, a full traversal mechanism is adopted to establish a timeline coverage network, so that even in the face of complex choreography scenarios, the strict correspondence between video frames and subtitles can still be guaranteed, especially maintaining temporal synchronization during operations such as fast forward and rewind; and by setting the automatic processing logic when there is no matching subtitle, the display residue problem of the traditional engine is eliminated, and finally a high-fault-tolerant subtitle synchronization system adapted to complex scenarios is constructed.

[0089] As an optional embodiment, in the above steps, the subtitle text in the subtitle entry parameters corresponding to the successfully matched subtitle entry is rendered by using the SVG stroke algorithm to obtain the rendered subtitle, including: defining the container style of the SVG container, and defining the text style of the text element in the SVG container through the CSS style, wherein the container style is used to define the display position and size of the subtitle, and the container style includes position and size, and the text style is used to define the rendering effect of the subtitle, and the text style includes: the width of the stroke, the color of the stroke, the font color and the font style; dynamically binding the container style to the SVG container and dynamically binding the text style to the text element; rendering the subtitle text in the subtitle entry parameters corresponding to the successfully matched subtitle entry into the target subtitle text according to the text style of the text element; and displaying the target subtitle text according to the position and size in the container style to obtain the rendered subtitle.

[0090] SVG (Scalable Vector Graphics) is an XML-based vector graphics format used to describe two-dimensional graphics. <svg>The tag is the core container of SVG graphics. It defines the viewport (display area) of the graphics and the user coordinate system. All other SVG elements (such as shapes, paths, text, etc.) need to be placed within this container. The SVG container focuses on the drawing and interaction of vector graphics.

[0091] CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of HTML or XML documents, achieving the separation of content and presentation. It is commonly used to set styles such as fonts, colors, backgrounds, borders, etc., and to adjust layouts and element sizes. CSS styles are responsible for the visual presentation and layout of web pages, enabling beautiful and responsive designs through flexible rules. In practical applications, video subtitle editors use the SVG stroke algorithm to achieve dynamic rendering of subtitle text. The purpose of the SVG stroke algorithm is to achieve the SVG text stroke effect and dynamically display high-quality scalable subtitle text on the web page. The specific steps of this algorithm are as follows: 1. The container style srtStyle, the text style txtStyleCss, and the subtitle text to be displayed getShowSrtText. These data are passed to the text element in the SVG container through dynamic binding of attributes and styles.

[0092] 2. Set the container style of the main SVG container, including relevant attributes such as position and size. Use the dynamically bound container style srtStyle to adjust the style of the SVG main container, enabling the subtitle display effect to be flexibly adjusted according to external states.

[0093] 3. Use the text element <text>To display subtitle text, set the layout style of the text including alignment and anchor point, etc.

[0094] 4. Use the CSS style class text-stroke to implement the text style txtStyleCss, and dynamically bind the text style txtStyleCss, including: the width of the stroke, the color of the stroke, the font color, and the font style.

[0095] 5. Display the subtitle text getShowSrtText in the text element through dynamic data binding <text>In

[0096] It can be understood that in this embodiment, the SVG stroke algorithm takes SVG as the main body, realizes high-quality and scalable subtitle text display through dynamic data binding, and at the same time adopts CSS styles to achieve the text stroke effect, providing a dynamic subtitle rendering function for the web page. The stroke effect makes the subtitles clearly visible in different backgrounds and improves the readability of the subtitles.

[0097] According to the above technical means, the subtitle vectorization rendering is realized through the SVG stroke algorithm combined with the dynamic style binding mechanism. By decoupling and controlling the container style and the text style, the subtitle display area can be accurately positioned through layout constraints, and the visual parameters such as stroke and font can be flexibly adjusted to adapt to different scenarios; at the same time, based on the SVG vector characteristics, the subtitle scaling clarity is maintained, and the readability in complex backgrounds is improved through contour enhancement. Finally, a subtitle presentation scheme with both rendering accuracy, visual adaptability and style extensibility is constructed.

[0098] As an optional embodiment, after aligning and matching the target video with all subtitle entries including the target subtitle entry according to time, all subtitle entries are converted into a target subtitle file in a preset format. Among them, the subtitle content corresponding to each subtitle entry in the target subtitle file is arranged in ascending order of the subtitle entry number, and the subtitle content corresponding to each subtitle entry is generated in the following manner, including: obtaining the subtitle entry number, timestamp, subtitle text and blank line corresponding to the current subtitle entry from the subtitle entry array; converting the timestamp of the current subtitle entry into a timestamp string in a preset format, where the timestamp string in the preset format is a string composed of a start timestamp, an end timestamp and a preset delimiter; arranging and combining the subtitle entry number, timestamp string and subtitle text corresponding to the current subtitle entry in the order of subtitle entry number, timestamp string, subtitle text and blank line to generate the subtitle content corresponding to the current subtitle entry.

[0099] In this embodiment, the preset format of the target subtitle file is all in.srt format. The formats of the start timestamp and the end timestamp in the timestamp string are in the format of HH:mm:ss,SSS, the preset delimiter is "-->", and the timestamp string in the preset format is HH:mm:ss,SSS -->HH:mm:ss,SSS.

[0100] In practical applications, the video subtitle editor uses the subtitle saving and format conversion algorithm to convert the timestamp and text content of the subtitle into a standard.srt format subtitle file. The specific steps of this algorithm are as follows: 1. Initialize a time string array timeStrArr to store the formatted period description.

[0101] 2. Traverse the time array curTimeArr, convert the start time and end time of each time period into timestamp strings in.srt format, and add them to the string array timeStrArr. The start time and end time of each time period are converted into timestamp strings in.srt format according to the following steps: Calculate the hours, minutes, seconds, and milliseconds in the start time and end time respectively; Use the padStart method to format the hours, minutes, seconds, and milliseconds into two digits, where the milliseconds are three digits; Combine them into a time string in the format of HH:mm:ss,SSS.

[0102] 3. Initialize a string srt to store the content of the converted complete target subtitle file.

[0103] 4. DeepCopy the text array srtList to get the subtitle text array list.

[0104] 5. Traverse the copied subtitle text array list, generate the content of each subtitle entry in the following format and append it to the string srt. Each subtitle entry is separated by a blank line: ```plaintext Subtitle entry number (starting from 0) Timestamp string in the preset format (start timestamp --> end timestamp) Subtitle text ```.

[0105] 6. After the traversal is completed, return the generated string srt, which is the target subtitle file.

[0106] It can be understood that this subtitle saving and format conversion algorithm can dynamically generate a string that conforms to the.srt format from the timestamps and text content of video subtitles, which is suitable for generating subtitle files or displaying synchronized subtitles on web pages.

[0107] According to the above technical means, by arranging subtitle entries in sequence and unifying the timestamp format, a linear timeline structure that conforms to industry standards is generated, ensuring that subtitle files can be seamlessly parsed in different tools; at the same time, the subtitle content is encapsulated into a standardized module, retaining the integrity of metadata and supporting segmented rendering, significantly improving the maintainability of multilingual subtitles or special effect subtitles; finally, the target format subtitle file is batch-generated through an automated script, avoiding format chaos and manual writing errors, and forming a subtitle output solution that takes into account compatibility, scalability, and production efficiency.

[0108] It should be noted that, for the foregoing method embodiments, for the sake of simple description, they are all expressed as a series of action combinations. However, those skilled in the art should know that this application is not limited by the described action sequence, because according to this application, some steps can be performed in other sequences or simultaneously. Secondly, those skilled in the art should also know that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily essential to this application.

[0109] Through the description of the above embodiments, those skilled in the art can clearly understand that the method according to the above embodiments can be implemented by means of software plus a necessary general hardware platform. Of course, it can also be implemented by hardware, but in many cases the former is a better implementation manner. Based on such an understanding, the technical solution of this application, in essence, or the part that makes a contribution to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM (Read-Only Memory), RAM (Random Access Memory), magnetic disk, optical disk), and includes several instructions to enable a terminal device (which can be a mobile phone, computer, server, or network device, etc.) to execute the methods of various embodiments of this application.

[0110] According to another aspect of the embodiments of this application, there is also provided a browser-based video subtitle editing device for implementing the above browser-based video subtitle editing method. Please refer to Figure 3 , Figure 3 FIG. is a structural block diagram of an optional browser-based video subtitle editing device provided by the embodiments of this application. As shown in Figure 3 FIG., the browser-based video subtitle editing device 300 may include: A subtitle file acquisition module 301, configured to acquire a target video and a first subtitle file, where the target video is a video that needs to be edited for subtitles and is currently being played in the current browser, and the first subtitle file is the currently valid subtitle file configured for the target video; A subtitle file parsing module 302, configured to split the first subtitle file into at least one original subtitle entry by blank lines, and parse the original subtitle entry parameters in each original subtitle entry, where the original subtitle entry parameters define the start and end times of the subtitle entry and the subtitle text content; A subtitle content editing module 303, configured to acquire, from the front-end editing interface of the current browser, the target subtitle entry parameters obtained after editing the original subtitle entry parameters corresponding to the target subtitle entry, where the target subtitle entry is at least one entry in the original subtitle entries; The subtitle content display module 304 is configured to align and match the target video with all subtitle entries including the target subtitle entry according to time. When the target video successfully matches the subtitle entry, the subtitle corresponding to the target video is displayed as the rendered subtitle information, where the rendered subtitle information is obtained by rendering the subtitle text in the subtitle entry parameters corresponding to the successfully matched subtitle entry using the SVG stroke algorithm.

[0111] It should be noted that the subtitle file acquisition module 301 in this embodiment can be used to execute the above-mentioned step S201, the subtitle file parsing module 302 in this embodiment can be used to execute the above-mentioned step S202, the subtitle content editing module 303 in this embodiment can be used to execute the above-mentioned step S203, and the subtitle content display module 304 in this embodiment can be used to execute the above-mentioned step S204.

[0112] Regarding the browser-based video subtitle editing device in this embodiment, the specific manners in which the subtitle file acquisition module 301, the subtitle file parsing module 302, the subtitle content editing module 303, and the subtitle content display module 304 execute the above-mentioned browser-based video subtitle editing method have been described in detail in the embodiments related to the browser-based video subtitle editing method, and will not be elaborated here.

[0113] It can be understood that for the technical solution provided in this embodiment, each module in the browser-based video subtitle editing device directly calls local video resources by utilizing the cross-platform characteristics of the browser, combines with the front-end editing interface to realize real-time visual adjustment of subtitle parameters, simultaneously establishes a dynamic matching mechanism between the video timeline and subtitle entry parameters, and uses the SVG stroke algorithm for subtitle dynamic rendering. On the basis of ensuring accurate synchronization between the subtitle and the video, it breaks through the technical bottleneck of the single traditional subtitle rendering effect, effectively solves the technical pain point of poor real-time rendering effect of subtitles in the prior art, and finally constructs a full-process solution integrating subtitle editing, real-time preview, and high-quality rendering.

[0114] The device in this embodiment, in addition to including the above-mentioned modules, may also include modules for executing any method in any of the foregoing embodiments of the browser-based video subtitle editing method.

[0115] It should be noted here that the examples and application scenarios implemented by the above-mentioned modules and the corresponding steps are the same, but are not limited to the content disclosed in the above-mentioned embodiments. It should be noted that the above-mentioned modules, as part of the device, can run in the hardware environment for implementing the method as shown in Figure 1 and can be implemented by software or by hardware, where the hardware environment includes a network environment.

[0116] According to another aspect of the embodiments of the present application, there is also provided an electronic device for implementing the above-mentioned browser-based video subtitle editing method. The electronic device can be a server, a terminal, or a combination thereof.

[0117] According to another embodiment of the present application, there is also provided an electronic device. Please refer to Figure 4 , Figure 4 which is a structural block diagram of an optional electronic device provided by the embodiments of the present application. As Figure 4 shown, the electronic device may include: a processor 1501, a communication interface 1502, a memory 1503, and a communication bus 1504. Among them, the processor 1501, the communication interface 1502, and the memory 1503 communicate with each other through the communication bus 1504.

[0118] The memory 1503 is used to store computer programs; When the processor 1501 executes the programs stored on the memory 1503, the following steps are implemented: Step S201: Obtain a target video and a first subtitle file. Among them, the target video is a video that needs to be edited for subtitles and is being played in the current browser, and the first subtitle file is the currently valid subtitle file configured for the target video; Step S202: Split the first subtitle file into multiple original subtitle entries by blank lines, and parse the original subtitle entry parameters in each original subtitle entry. The original subtitle entry parameters define the start and end times of the subtitle entry and the subtitle text content; Step S203: Obtain, from the front-end editing interface of the current browser, the target subtitle entry parameters obtained after editing the original subtitle entry parameters of the target subtitle entry. The target subtitle entry is at least one entry in the original subtitle entries; Step S204: Align and match the target video with all subtitle entries including the target subtitle entry according to time. When the target video matches successfully with the subtitle entry, the subtitle corresponding to the target video is displayed as the rendered subtitle. The rendered subtitle is obtained by rendering the subtitle text in the subtitle entry parameters corresponding to the successfully matched subtitle entry using the SVG stroke algorithm.

[0119] It can be understood that for the technical solution provided in this embodiment, the processor of the electronic device directly calls local video resources by utilizing the cross-platform characteristics of the browser, combines with the front-end editing interface to realize real-time visual adjustment of subtitle parameters, simultaneously establishes a dynamic matching mechanism between the video timeline and subtitle entry parameters, and uses the SVG stroke algorithm for subtitle dynamic rendering. On the basis of ensuring accurate synchronization between the subtitles and the video, it breaks through the technical bottleneck of the single traditional subtitle rendering effect, effectively solves the technical pain point of poor real-time rendering effect of subtitles in the prior art, and finally constructs a full-process solution integrating subtitle editing, real-time preview, and high-quality rendering.

[0120] Optionally, in this embodiment, the above communication bus may be a PCI (Peripheral Component Interconnect) bus, or an EISA (Extended Industry Standard Architecture) bus, etc. The communication bus can be divided into an address bus, a data bus, a control bus, etc. For the sake of representation, only a thick line is used in the figure, but it does not mean that there is only one bus or one type of bus. The communication interface is used for communication between the above electronic device and other devices.

[0121] The memory may include a Random Access Memory (RAM), and may also include a Non-Volatile Memory (NVM), such as at least one disk memory. Optionally, the memory may also be at least one storage device located far from the aforementioned processor.

[0122] The above processor may be a general-purpose processor, which may include but is not limited to: a CPU (Central Processing Unit), an NP (Network Processor), etc.; it may also be a DSP (Digital Signal Processor), an ASIC (Application Specific Integrated Circuit), an FPGA (Field-Programmable Gate Array), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components.

[0123] The embodiment of the present application also provides a computer-readable storage medium, where the storage medium includes a stored program, and when the program runs, it executes the method steps of the above method embodiment.

[0124] Optionally, in this embodiment, the above storage medium may include, but is not limited to: various media that can store program codes such as USB flash drives, ROMs, RAMs, mobile hard disks, magnetic disks, or optical discs.

[0125] The serial numbers of the embodiments of the present application are only for description and do not represent the superiority or inferiority of the embodiments.

[0126] If the integrated units in the above embodiments are implemented in the form of software function units and sold or used as independent products, they can be stored in the above computer-readable storage medium. Based on such an understanding, the technical solution of the present application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for causing one or more computer devices (which may be personal computers, servers, or network devices, etc.) to execute all or part of the steps of the methods of the various embodiments of the present application.

[0127] In the above embodiments of the present application, the descriptions of the various embodiments have their own emphases. For the parts not detailed in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0128] In the several embodiments provided by the present application, it should be understood that the disclosed client can be implemented in other ways. Among them, the device embodiments described above are only illustrative. For example, the division of units is only a logical function division. In actual implementation, there may be other division methods. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the displayed or discussed couplings or direct couplings or communication connections to each other can be through some interfaces. The indirect couplings or communication connections of units or modules can be in electrical or other forms.

[0129] The units described as separate components may or may not be physically separated. The components shown as units may or may not be physical units, that is, they can be located in one place or distributed to multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution provided in this embodiment.

[0130] In addition, the functional units in the various embodiments of the present application can be integrated into one processing unit, or each unit can exist physically alone, or two or more units can be integrated into one unit. The above integrated units can be implemented in the form of hardware or in the form of software function units.

[0131] The above are only the preferred embodiments of the present application. It should be noted that for those of ordinary skill in the art, without departing from the principle of the present application, several improvements and refinements can be made, and these improvements and refinements should also be regarded as the protection scope of the present application.< / text> < / text> < / svg>

Claims

1. A browser-based video subtitle editing method, characterized in that, Including: Obtain a target video and a first subtitle file, where the target video is a video being played in the current browser and requiring subtitle editing, and the first subtitle file is the currently valid subtitle file configured for the target video; Split the first subtitle file into multiple original subtitle entries by blank lines, and parse the original subtitle entry parameters in each original subtitle entry, where the original subtitle entry parameters define the start and end times of the subtitle entry and the subtitle text content; Obtain, from the front-end editing interface of the current browser, the target subtitle entry parameters obtained after editing the original subtitle entry parameters of the target subtitle entry, where the target subtitle entry is at least one entry in the original subtitle entries; Align and match the target video with all subtitle entries including the target subtitle entry according to time. When the target video successfully matches the subtitle entry, the subtitle corresponding to the target video is displayed as the rendered subtitle, where the rendered subtitle is obtained by rendering the subtitle text in the subtitle entry parameters corresponding to the successfully matched subtitle entry using the SVG stroke algorithm.

2. The browser-based video subtitle editing method according to claim 1, wherein Split the first subtitle file into multiple original subtitle entries by blank lines, and parse the original subtitle entry parameters in each original subtitle entry, including: Use the string splitting method to split the first subtitle file into multiple consecutive string sequences by blank lines, and store them in the subtitle entry array in order. Each string sequence is an original subtitle entry, and each string sequence includes the following: subtitle entry number, timestamp, subtitle text, and blank line; Traverse the subtitle entry array, and determine the line type of the current line through the modulo operation value of the current line index in the subtitle entry array; When it is determined that the line type is a subtitle text line, extract the text content stored in the current line to obtain the original subtitle text in the original subtitle entry parameters, and store the original subtitle text in the text array. The original subtitle text is the subtitle text content of the original subtitle entry, and the first index of the original subtitle text in the text array is the same as the subtitle entry number of the original subtitle entry corresponding to the current line; When it is determined that the line type is a timestamp line, parse the timestamp string of the original subtitle entry stored in the current line to obtain the original timestamp in the original subtitle entry parameters, and convert the original timestamp into a floating point number in seconds and store it in the time array. The original timestamp is used to represent the start time and end time of the original subtitle entry, and the second index of the original timestamp in the time array is the same as the subtitle entry number of the original subtitle entry corresponding to the current line.

3. The browser-based video subtitle editing method according to claim 2, wherein Traverse the subtitle entry array, and determine the line type of the current line through the modulo operation value of the current line index in the subtitle entry array, including: Obtain the third index corresponding to the current line; Substitute the third index into the formula for the index modulo operation to calculate the modulo operation value. Here, the formula for the index modulo operation is: V = index3 % 4, where V represents the modulo operation value of the third index corresponding to the current row, and index3 represents the third index corresponding to the current row. If the modulo operation value is the first preset value, determine that the row type is a timestamp row; if the modulo operation value is the second preset value, determine that the row type is a subtitle text row.

4. The browser-based video subtitle editing method according to claim 1, characterized in that, Obtain, from the front-end editing interface of the current browser, the target subtitle entry parameters obtained after editing the original subtitle entry parameters of the target subtitle entry, including: Obtain, from the front-end editing interface of the current browser, the target subtitle text in the target subtitle entry parameter information obtained after performing a text editing operation on the original subtitle text in the original subtitle entry parameters corresponding to the target subtitle entry; and / or, Obtain, from the front-end editing interface of the current browser, the target timestamp in the target subtitle entry parameter information obtained after editing the original timestamp in the original subtitle entry parameters corresponding to the target subtitle entry, where the target timestamp of the edited target subtitle entry conforms to the preset time constraint rules.

5. The browser-based video subtitle editing method according to claim 4, wherein The preset time constraint rules include: If the target subtitle entry is not the first original subtitle entry, the start time of the target subtitle entry is not less than the end time of the previous original subtitle entry; otherwise, the minimum value of the start time of the target subtitle entry is the third preset value. If the target subtitle entry is not the first original subtitle entry, the end time of the target subtitle entry is not greater than the start time of the next original subtitle entry; otherwise, the maximum value of the end time of the target subtitle entry is the fourth preset value.

6. The browser-based video subtitle editing method according to claim 1, wherein Align and match the target video with the target subtitle entry including the target subtitle entry in time, including: Obtain the current playback time of the target video; Traverse the time intervals corresponding to all subtitle entries. If the current playback time is within the time interval of any one of all subtitle entries, the target video and the subtitle entry match successfully; If the current playback time is not within the time intervals of all subtitle entries, the target video and the subtitle entry do not match successfully, where the time interval is composed of a start time and an end time.

7. The browser-based video subtitle editing method according to claim 1, wherein Render the subtitle text in the subtitle entry parameters corresponding to the subtitle entry that matches successfully by using the SVG stroke algorithm to obtain the rendered subtitle, including: Define the container style of the SVG container, and define the text style of the text element in the SVG container through CSS styles. Here, the container style is used to define the display position and size of the subtitle. The container style includes position and size. The text style is used to define the rendering effect of the subtitle. The text style includes: the width of the stroke, the color of the stroke, the font color, and the font style; Dynamically bind the container style to the SVG container and dynamically bind the text style to the text element. Render the subtitle text in the subtitle entry parameters corresponding to the successfully matched subtitle entry into the target subtitle text according to the text style of the text element; And display the target subtitle text according to the position and size in the container style to obtain the rendered subtitle.

8. The browser-based video subtitle editing method according to claim 1, wherein After aligning and matching the target video with all subtitle entries including the target subtitle entry according to time, convert all subtitle entries into a target subtitle file in a preset format, where the subtitle content corresponding to each subtitle entry in the target subtitle file is arranged in ascending order of subtitle entry numbers, and the subtitle content corresponding to each subtitle entry is generated according to the following method, including: Obtain the subtitle entry number, timestamp, subtitle text, and blank line corresponding to the current subtitle entry from the subtitle entry array; Convert the timestamp of the current subtitle entry into a timestamp string in a preset format, where the timestamp string in the preset format is a string composed of a start timestamp, an end timestamp, and a preset delimiter; Arrange and combine the subtitle entry number, timestamp string, and subtitle text corresponding to the current subtitle entry in the order of subtitle entry number, timestamp string, subtitle text, and blank line to generate the subtitle content corresponding to the current subtitle entry.

9. A browser-based video subtitle editing device, characterized in that, Including: A subtitle file acquisition module, configured to acquire a target video and a first subtitle file, where the target video is a video that needs to be edited with subtitles being played in the current browser, and the first subtitle file is the currently valid subtitle file configured for the target video; A subtitle file parsing module, configured to split the first subtitle file into at least one original subtitle entry by blank lines, and parse the original subtitle entry parameters in each original subtitle entry, where the original subtitle entry parameters define the start and end times and the subtitle text content of the subtitle entry; A subtitle content editing module, configured to obtain, from the front-end editing interface of the current browser, the target subtitle entry parameters obtained after editing the original subtitle entry parameters corresponding to the target subtitle entry, where the target subtitle entry is at least one entry in the original subtitle entries; A subtitle content display module, configured to align and match the target video with all subtitle entries including the target subtitle entry according to time. When the target video matches successfully with the subtitle entry, display the subtitle corresponding to the target video as the rendered subtitle information, where the rendered subtitle information is obtained by rendering the subtitle text in the subtitle entry parameters corresponding to the successfully matched subtitle entry using the SVG stroke algorithm.

10. An electronic device, comprising a processor, a communication interface, a memory, and a communication bus, wherein, The processor, the communication interface, and the memory complete communication with each other through the communication bus, characterized in that The memory is used to store computer programs; The processor is configured to execute the steps of the browser-based video subtitle editing method according to any one of claims 1 to 8 by running the computer programs stored on the memory.

11. A computer-readable storage medium, characterized in that, A computer program is stored in the storage medium, wherein the computer program is configured to execute the steps of the browser-based video subtitle editing method described in any one of claims 1 to 8 when running.

Images