Method and device for displaying bullet screen special effect, medium and program product

Abstract

The invention provides a method and device for displaying a bullet screen special effect, electronic equipment, a computer readable medium and a computer program product. The method comprises the following steps: acquiring bullet screen special effect information corresponding to a played target video; obtaining target bullet screen data, wherein the target bullet screen data comprises a bullet screen which needs to render a special effect; based on the bullet screen special effect information, bullet screen element special effects corresponding to target bullet screen data are displayed, the bullet screen element special effects achieve the effect that a bullet screen forms special effect element backflow with a preset suction center point in a target video image as a center axis, and the positions of the special effect elements are dynamically adjusted along with the change of the backflow progress. According to the invention, for the video played at the WEB end, the bullet screen element special effect is displayed based on the predetermined trigger display logic, the effect that the bullet screen is displayed in a specific scene and element backflow is formed by taking the preset suction center point in the video picture as the center axis is realized, the bullet screen display effect is enriched, and the user experience is improved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method, device, electronic device, computer-readable medium and computer program product for displaying bullet screen special effects. Background Art

[0002] When watching video content, viewers often express their opinions or feelings about specific clips by sending bullet comments. However, existing bullet comment systems often use uniform fonts, colors, and animation effects to present these instant feedbacks, lacking interactivity and visual diversity with the video content. Although bullet comments provide viewers with a channel for real-time communication, the singleness of their expression limits their deep integration with video content, and the user experience needs to be improved. Summary of the invention

[0003] Multiple aspects of the present application provide a method, device, electronic device, computer-readable medium and computer program product for displaying barrage special effects.

[0004] In one aspect of the present application, a method for displaying a bullet screen special effect is provided, wherein the method comprises:

[0005] Get the bullet screen special effects information corresponding to the target video being played;

[0006] Obtaining target bullet chat data, wherein the target bullet chat data includes bullet chats that need to be rendered with special effects;

[0007] Based on the barrage special effect information, the barrage element special effect corresponding to the target barrage data is displayed, wherein the barrage element special effect realizes the effect of the barrage forming a special effect element backflow based on the preset suction center point in the target video screen as the central axis, and the position of the special effect element is dynamically adjusted as the reflux progress changes.

[0008] In one aspect of the present application, a device for displaying a bullet screen special effect is provided, wherein the device comprises:

[0009] A device for obtaining bullet screen special effect information corresponding to the target video being played;

[0010] A device for acquiring target bullet screen data, wherein the target bullet screen data includes bullet screens that require rendering of particle special effects;

[0011] A device for displaying a barrage element special effect corresponding to target barrage data based on the barrage special effect information, wherein the barrage element special effect realizes the effect of the barrage forming a special effect element backflow based on a preset suction center point in the target video screen as the central axis, and the position of the special effect element is dynamically adjusted as the reflux progress changes.

[0012] Another aspect of the present application provides an electronic device, the electronic device comprising:

[0013] at least one processor; and

[0014] a memory communicatively connected to the at least one processor; wherein,

[0015] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the method of the embodiment of the application.

[0016] In another aspect of the present application, a computer-readable storage medium is provided, on which computer program instructions are stored. The computer program instructions can be executed by a processor to implement the method of the embodiment of the application.

[0017] Another aspect of the present application provides a computer program product, including a computer program, which implements the method of the embodiment of the present application when executed by a processor.

[0018] In the solution provided in the embodiment of the present application, for the video played on the WEB side, the barrage element special effects are displayed based on the predetermined trigger display logic, so that the barrage is displayed in a specific scene according to the preset suction center point in the video screen as the central axis to form an effect of element backflow, enriching the barrage display effect and improving the user experience; the barrage particle special effects are generated by adopting a mixed sampling method of multiple noise maps, which improves the randomness and reduces the complexity of the algorithm compared with the traditional method of directly using calculated generated particles; the generated barrage element special effects are rendered to the video screen by converting native DOM to Canvas rendering, which improves the smoothness and performance of the special effects animation; the suction center point of the barrage element special effect supports linear movement and difference compensation between multiple points, making the generated barrage element special effects more natural. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the technical solutions in the embodiments of the present application, a brief introduction will be given below to the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0020] Other features, objects and advantages of the present application will become more apparent by reading the detailed description of non-limiting embodiments made with reference to the following drawings:

[0021] Figure 1 A schematic diagram of a process for displaying a bullet screen special effect provided by an embodiment of the present application is shown;

[0022] Figure 2 A schematic diagram showing an exemplary effect of a bullet screen particle special effect according to an embodiment of the present application is shown;

[0023] Figure 3 A schematic diagram of the structure of a device for displaying bullet screen special effects provided by an embodiment of the present application is shown;

[0024] Figure 4 A schematic diagram of the structure of a device suitable for implementing the solution in the embodiment of the present application is shown.

[0025] The same or similar reference numerals in the drawings represent the same or similar components. DETAILED DESCRIPTION

[0026] In order to make the purpose, technical solution and advantages of the embodiments of the present application clearer, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0027] In a typical configuration of the present application, the terminal and the equipment of the service network each include one or more processors (CPU), input / output interface, network interface and memory.

[0028] The memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0029] Computer readable media include permanent and non-permanent, removable and non-removable media, and can be implemented by any method or technology to store information. Information can be computer program instructions, data structures, modules of programs or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, read-only compact disk (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device.

[0030] Figure 1A flow chart of a method for displaying bullet screen special effects provided by an embodiment of the present application is shown. The method at least includes step S101, step S102, step S103 and step S104.

[0031] The execution subject of the method may be a client device or an application running on the client device. The client device includes but is not limited to computers, mobile phones, tablet computers, smart watches, bracelets and other terminal devices.

[0032] Preferably, the method is implemented based on a browser on the WEB side, or based on an application of a browser kernel.

[0033] Refer to the following Figure 1 To illustrate, in step S101, the bullet screen special effect information corresponding to the target video being played is obtained.

[0034] The target video is a video that can display bullet comments and is played on the client device where the user is located, including but not limited to film and television series, clips, etc.

[0035] Among them, the playback interface of the target video can display barrage, and can display barrage with rendering special effects when a predetermined trigger condition is met.

[0036] According to one embodiment, the bullet screen special effect information includes but is not limited to:

[0037] 1) Special effect triggering condition information: including various information indicating time conditions or event conditions for triggering the display of bullet screen special effects. For example, reaching one or more predetermined playback time points. For another example, detecting an interactive operation in which the user wishes to display bullet screen special effects.

[0038] 2) Special effect information: including various information used to indicate the special effect presentation effect displayed, such as elemental special effects of suction effect, ash, fireworks, disappearance and other similar broken elemental effects.

[0039] 3) Special effects algorithms; including special effects algorithms used to indicate the application of rendering special effects, etc.

[0040] In step S102, target barrage data is obtained, where the target barrage data includes barrages that require special effects to be rendered.

[0041] Optionally, in response to triggering the display of the special effect bullet screen in step S102, target bullet screen data is acquired. For example, when a predetermined playback time point is reached, part or all of the bullet screen displayed in the current video frame is acquired as the target bullet screen data.

[0042] Optionally, in step S102, in response to the video playback request, target barrage data is obtained.

[0043] For example, when the user starts playing the target video, one or more playback time points in the target video where the barrage special effects need to be displayed are determined, and part or all of the barrage of the video frames corresponding to each playback time point is obtained as the target barrage data.

[0044] In step S103, based on the barrage special effect information, the barrage element special effect corresponding to the target barrage data is displayed.

[0045] Among them, the barrage element special effect realizes the effect of the barrage forming a special effect element backflow based on the preset suction center point in the target video screen as the central axis, and the position of the special effect element is dynamically adjusted as the backflow progress changes.

[0046] Specifically, step S103 includes step S1031 and step S1032.

[0047] In step S1031, based on a predetermined element special effect generation algorithm, a bullet screen element special effect corresponding to the target bullet screen data is generated.

[0048] In step S1032, the generated bullet screen element special effects are rendered onto the video screen for display.

[0049] Among them, the barrage element special effects include a variety of special effects with element backflow effects, such as a vortex suction effect in which the barrage rotates around a preset suction center point, a reverse waterfall effect in which the barrage flows from the bottom of the screen to the suction center point above, or a reverse explosion effect in which the barrage spreads outward from the suction center point and then suddenly contracts in the opposite direction, etc.

[0050] According to one embodiment, the barrage element special effects include barrage particle special effects. In step S1031, based on a predetermined particle special effect generation algorithm, the barrage particle special effects corresponding to the target barrage data are generated by using a mixed sampling method of multiple noise maps.

[0051] Among them, the noise map is a random texture used to generate natural and random visual effects, such as clouds, smoke, fire, etc. By mixing and sampling multiple noise maps and extracting pixel values ​​from each channel in multiple noise maps, more complex and random particle textures can be generated, improving the diversity and realism of particles.

[0052] The particle effects refer to a large number of dynamic particles that usually change color and shape in media content such as videos, creating visual impact and beauty. Traditional particle systems generally use algorithms to directly generate particle properties such as position, speed and color. Although this method is controllable, it may lack natural and random effects.

[0053] Among them, the method of using multiple noise maps to mix and sample particles generates the properties of particles by mixing different noise maps. The noise map can provide a natural randomness, making the generated particles look more real and unpredictable. This method is simpler than the method of directly using calculated generated particles because it reduces the complexity of the algorithm and can quickly generate a large number of random particles.

[0054] According to one embodiment, the method in step S103 uses the particle special effects generation algorithm to achieve the effect of element backflow formed by the bullet screen based on the preset suction center point in the video screen as the central axis, and the position of the particles is dynamically adjusted as the backflow progress changes.

[0055] Specifically, each bullet message corresponds to a particle in the particle system, and the method calculates the position of each particle based on the following formula:

[0056] (center*width*devicePR-x)*reflowProgress+x(1)

[0057] Among them, center represents the screen ratio of the center point to the left side of the screen, and center defines the horizontal position of the center point of the particle effect on the screen. For example, if the value of Center is 0.5, the center point is located in the center of the screen. This center corresponds to the suction center point.

[0058] Among them, width represents the container width. This parameter refers to the width of the container where the particle effect is located. This width can be the width of the screen or the width of a specific element. It determines the layout range of the particle effect.

[0059] Among them, devicePR represents the resolution ratio, which is used to adjust the display effect of particle effects on devices with different resolutions. Since the screen resolutions of different devices may be different, using the resolution ratio can ensure that the particle effects can maintain a consistent appearance and layout on various devices.

[0060] Among them, reflowProgress indicates the percentage of reflow. This parameter indicates the progress of the particle effect in the reflow process. Reflow refers to the process of particles moving from the initial position to the final position. The value of reflowProgress changes from 0 to 1, indicating the entire reflow process from the beginning to the end.

[0061] Among them, x represents the width of the bullet screen. This parameter represents the width of a single particle in the particle effect. When calculating the particle position, the value of x is used to determine the starting position of the particle in the container.

[0062] Based on formula (1), first, the absolute position of the center point on the screen is obtained by multiplying the container width and the resolution ratio. This position is the reference point for the particle effect layout. Next, the position of the particle relative to the center point is adjusted by subtracting the width x of a single particle. This ensures that the particles are evenly distributed on both sides of the center point. Then, the adjusted particle position is multiplied by the reflow progress reflowProgress. This step simulates the process of the particle moving from the initial position to the final position. As reflowProgress increases, the particle will gradually move from the center point to both sides. Finally, the position after multiplying the reflow progress is added to the particle width x to get the final position of the particle on the screen.

[0063] Based on the special effects generation algorithm shown in formula (1), a bullet screen particle special effect is created. The position of the particles will be dynamically adjusted as the reflux progress changes, thereby producing an animation effect in which the bullet screen forms an element backflow based on the preset suction center point in the video screen as the central axis, and the position of the particles is dynamically adjusted as the reflux progress changes.

[0064] For example, refer to Figure 2 The video screen shown in the figure uses the particle special effect generation algorithm of the embodiment of the present application to achieve the effect of the bullet screen in the video frame of a specific scene forming an element backflow effect according to the preset suction center point (located in the center area of ​​the screen) in the video screen as the central axis, and the generated bullet screen particle special effect is rendered on the video screen and displayed synchronously with the video content, forming Figure 2 The barrage particle effects shown.

[0065] According to one embodiment, the method performs linear movement or difference supplementation between multiple points on the suction center point.

[0066] The linear movement between multiple points means that the center point can be smoothly moved between multiple preset points. The linear movement between multiple points can be achieved by algorithms such as linear interpolation (Lerp), which is a method for smooth transition between two values.

[0067] The difference complementation means that when the center point moves from one point to another, if it needs to pass through an intermediate position that is not in the preset point list, the algorithm difference complementation will automatically calculate the values ​​of these intermediate positions to ensure the continuity and smoothness of the movement. Since the difference complementation allows the center point to move smoothly between any two points, rather than just limited to the preset points, the special effects animation after the difference complementation processing looks more natural.

[0068] Through linear movement and difference compensation, it provides more flexibility and control, which is especially suitable for making complex animation paths or user interaction scenes, allowing designers to create richer and more dynamic special effects.

[0069] According to an embodiment, the method uses Canvas to generate bullet screen particle effects in step S103, wherein Canvas is an HTML5 element that can be used to draw graphics and animations through JavaScript.

[0070] The steps of using Canvas to generate bullet screen particle effects in this embodiment include:

[0071] Create a Canvas element as the container of the bullet screen to draw the bullet screen particle effects on the created Canvas.

[0072] Next, each bullet comment included in the target bullet comment data corresponds to a particle in the particle system.

[0073] Next, for each target bullet comment, a predetermined particle special effect generation algorithm is used to calculate its position on the created Canvas.

[0074] For example, when using the algorithm shown in formula (1), the parameters center, width, devicePR, reflowProgress and x in the formula need to be initialized according to actual conditions.

[0075] Next, based on the calculated position of each target bullet screen, a corresponding bullet screen particle effect is generated.

[0076] Specifically, draw each particle, that is, each bullet comment, on the Canvas. Use JavaScript and the Canvas API to achieve this. You can draw text based on the particle's position, color, and other properties.

[0077] According to one embodiment, the method uses native DOM to Canvas rendering technology in step S103 to render the generated bullet screen element special effects onto the video screen.

[0078] The core of the native DOM to Canvas rendering technology is to convert the native DOM elements in the web page into Canvas elements for rendering. The native DOM elements include but are not limited to elements constructed by HTML and CSS.

[0079] Traditionally, special effects animations are usually achieved by directly manipulating DOM elements through CSS3 or JavaScript. Since Canvas drawing is performed on a separate bitmap rather than directly on the DOM tree, converting DOM elements to Canvas rendering can reduce the number of browser redraws and reflows, and improve the smoothness and performance of special effects animations, especially on mobile devices or devices with lower performance. In addition, Canvas provides more drawing APIs, which can achieve more complex graphics and animation effects.

[0080] According to the method of the present application, for the video played on the WEB side, the barrage element special effects are displayed based on the predetermined trigger display logic, so that the barrage is displayed in a specific scene according to the preset suction center point in the video screen as the central axis to form an effect of element backflow, enriching the barrage display effect and improving the user experience; the barrage particle special effects are generated by adopting a mixed sampling method of multiple noise maps, which improves the randomness and reduces the complexity of the algorithm compared with the traditional method of directly using calculated generated particles; the generated barrage element special effects are rendered to the video screen by converting native DOM to Canvas rendering, which improves the smoothness and performance of the special effects animation; the suction center point of the barrage element special effect supports linear movement and difference compensation between multiple points, making the generated barrage element special effects more natural.

[0081] In addition, the present application also provides a device for displaying bullet screen special effects, the structure of which is as follows: Figure 3 shown.

[0082] The device includes: a device for obtaining barrage special effect information corresponding to a target video being played (hereinafter referred to as "information obtaining device 101"), a device for obtaining target barrage data (hereinafter referred to as "barrage obtaining device 102"), and based on the barrage special effect information, displaying barrage element special effects corresponding to the target barrage data (hereinafter referred to as "special effect display device 103").

[0083] Wherein, the device is included in the client equipment.

[0084] Preferably, the device is implemented based on a browser on the WEB side, or based on an application of a browser kernel.

[0085] Reference Figure 3 The information acquisition device 101 acquires the bullet screen special effect information corresponding to the target video being played.

[0086] The target video is a video that can display bullet comments and is played on the client device where the user is located, including but not limited to film and television series, clips, etc.

[0087] Among them, the playback interface of the target video can display barrage, and can display barrage with rendering special effects when a predetermined trigger condition is met.

[0088] According to one embodiment, the bullet screen special effect information includes but is not limited to:

[0089] 1) Special effect triggering condition information: including various information indicating time conditions or event conditions for triggering the display of bullet screen special effects. For example, reaching one or more predetermined playback time points. For another example, detecting an interactive operation in which the user wishes to display bullet screen special effects.

[0090] 2) Special effect information: including various information used to indicate the special effect presentation effect displayed, such as elemental special effects of suction effect, ash, fireworks, disappearance and other similar broken elemental effects.

[0091] 3) Special effects algorithms; including special effects algorithms used to indicate the application of rendering special effects, etc.

[0092] The barrage acquisition device 102 acquires target barrage data, and the target barrage data includes barrages that need to be rendered with special effects.

[0093] Optionally, the bullet screen acquisition device 102 acquires target bullet screen data in response to triggering the display of special effect bullet screens. For example, when a predetermined playback time point is reached, a part or all of the bullet screens displayed in the current video frame are acquired as target bullet screen data.

[0094] Optionally, the barrage acquisition device 102 acquires target barrage data in response to a video playback request.

[0095] For example, when the user starts playing the target video, one or more playback time points in the target video where the barrage special effects need to be displayed are determined, and part or all of the barrage of the video frames corresponding to each playback time point is obtained as the target barrage data.

[0096] The special effect display device 103 displays the barrage element special effects corresponding to the target barrage data based on the barrage special effect information.

[0097] Among them, the barrage element special effect realizes the effect of the barrage forming a special effect element backflow based on the preset suction center point in the target video screen as the central axis, and the position of the special effect element is dynamically adjusted as the backflow progress changes.

[0098] Specifically, the special effect display device 103 includes a special effect generating device and a special effect rendering device.

[0099] The special effect generating device generates the barrage element special effect corresponding to the target barrage data based on a predetermined element special effect generating algorithm.

[0100] The special effect rendering device renders the generated bullet screen element special effects onto the video screen for display.

[0101] Among them, the barrage element special effects include a variety of special effects with element backflow effects, such as a vortex suction effect in which the barrage rotates around a preset suction center point, a reverse waterfall effect in which the barrage flows from the bottom of the screen to the suction center point above, or a reverse explosion effect in which the barrage spreads outward from the suction center point and then suddenly contracts in the opposite direction, etc.

[0102] According to one embodiment, the barrage element special effects include barrage particle special effects. The special effects generating device generates the barrage particle special effects corresponding to the target barrage data by using a mixed sampling method of multiple noise maps based on a predetermined particle special effects generating algorithm.

[0103] Among them, the noise map is a random texture used to generate natural and random visual effects, such as clouds, smoke, fire, etc. By mixing and sampling multiple noise maps and extracting pixel values ​​from each channel in multiple noise maps, more complex and random particle textures can be generated, improving the diversity and realism of particles.

[0104] The particle effects refer to a large number of dynamic particles that usually change color and shape in media content such as videos, creating visual impact and beauty. Traditional particle systems generally use algorithms to directly generate particle properties such as position, speed and color. Although this method is controllable, it may lack natural and random effects.

[0105] Among them, the special effect display device 103 generates particles by mixing different noise maps using a mixed sampling method of multiple noise maps to generate particle properties. The noise map can provide a natural randomness, making the generated particles look more real and unpredictable. This method is simpler than the method of directly using the particles generated by calculation, because it reduces the complexity of the algorithm and can quickly generate a large number of particles with randomness.

[0106] According to one embodiment, the special effect display device 103 uses the particle special effect generation algorithm to achieve the effect of element backflow formed by the barrage based on the preset suction center point in the video screen as the central axis, and the position of the particles is dynamically adjusted as the backflow progress changes.

[0107] Specifically, each bullet message corresponds to a particle in the particle system, and the special effect display device 103 calculates the position of each particle based on formula (1).

[0108] Based on formula (1), first, the special effects display device 103 obtains the absolute position of the center point on the screen by multiplying the container width and the resolution ratio. This position is the reference point for the particle special effects layout. Next, the position of the particle relative to the center point is adjusted by subtracting the width x of a single particle. This ensures that the particles are evenly distributed on both sides of the center point. Then, the adjusted particle position is multiplied by the reflow progress reflowProgress. This step simulates the process of the particle moving from the initial position to the final position. As reflowProgress increases, the particle will gradually move from the center point to both sides. Finally, the position after multiplying the reflow progress is added to the particle width x to obtain the final position of the particle on the screen.

[0109] Based on the special effects generation algorithm shown in formula (1), a bullet screen particle special effect is created. The position of the particles will be dynamically adjusted as the reflux progress changes, thereby producing an animation effect in which the bullet screen forms an element backflow based on the preset suction center point in the video screen as the central axis. The position of the particles is dynamically adjusted as the reflux progress changes.

[0110] For example, refer to Figure 2 The video screen shown in the figure uses the particle special effect generation algorithm of the embodiment of the present application to achieve the effect of the bullet screen in the video frame of a specific scene forming an element backflow effect according to the preset suction center point (located in the center area of ​​the screen) in the video screen as the central axis, and the generated bullet screen particle special effect is rendered on the video screen and displayed synchronously with the video content, forming Figure 2 The barrage particle effects shown.

[0111] According to one embodiment, the special effect display device 103 performs linear movement or difference supplement between multiple points on the suction center point.

[0112] The linear movement between multiple points means that the center point can be smoothly moved between multiple preset points. The linear movement between multiple points can be achieved by algorithms such as linear interpolation (Lerp), which is a method for smooth transition between two values.

[0113] The difference complementation means that when the center point moves from one point to another, if it needs to pass through an intermediate position that is not in the preset point list, the algorithm difference complementation will automatically calculate the values ​​of these intermediate positions to ensure the continuity and smoothness of the movement. Since the difference complementation allows the center point to move smoothly between any two points, rather than just limited to the preset points, the special effects animation after the difference complementation processing looks more natural.

[0114] Through linear movement and difference compensation, it provides more flexibility and control, which is especially suitable for making complex animation paths or user interaction scenes, allowing designers to create richer and more dynamic special effects.

[0115] According to one embodiment, the special effect display device 103 uses Canvas to generate bullet screen particle special effects. Wherein Canvas is an HTML5 element that can be used to draw graphics and animations through JavaScript.

[0116] The operation of the special effect display device 103 of this embodiment using Canvas to generate bullet screen particle special effects includes:

[0117] Create a Canvas element as the container of the bullet screen to draw the bullet screen particle effects on the created Canvas.

[0118] Next, each bullet comment included in the target bullet comment data corresponds to a particle in the particle system.

[0119] Next, for each target bullet comment, a predetermined particle special effect generation algorithm is used to calculate its position on the created Canvas.

[0120] For example, when using the algorithm shown in formula (1), the parameters center, width, devicePR, reflowProgress and x in the formula need to be initialized according to actual conditions.

[0121] Next, based on the calculated position of each target bullet screen, a corresponding bullet screen particle effect is generated.

[0122] Specifically, draw each particle, that is, each bullet comment, on the Canvas. Use JavaScript and the Canvas API to achieve this. You can draw text based on the particle's position, color, and other properties.

[0123] According to one embodiment, the special effect display device 103 uses native DOM to Canvas rendering technology to render the generated bullet screen element special effects onto the video screen.

[0124] The core of the native DOM to Canvas rendering technology is to convert the native DOM elements in the web page into Canvas elements for rendering. The native DOM elements include but are not limited to elements constructed by HTML and CSS.

[0125] Traditionally, special effects animations are usually achieved by directly manipulating DOM elements through CSS3 or JavaScript. Since Canvas drawing is performed on a separate bitmap rather than directly on the DOM tree, converting DOM elements to Canvas rendering can reduce the number of browser redraws and reflows, and improve the smoothness and performance of special effects animations, especially on mobile devices or devices with lower performance. In addition, Canvas provides more drawing APIs, which can achieve more complex graphics and animation effects.

[0126] According to the device of the present application, for the video played on the WEB side, the barrage element special effects are displayed based on the predetermined trigger display logic, so that the barrage is displayed in a specific scene according to the preset suction center point in the video screen as the central axis to form an effect of element backflow, enriching the barrage display effect and improving the user experience; the barrage particle special effects are generated by adopting a mixed sampling method of multiple noise maps, which improves the randomness and reduces the complexity of the algorithm compared with the traditional method of directly using calculated generated particles; the generated barrage element special effects are rendered to the video screen by converting native DOM to Canvas rendering, which improves the smoothness and performance of the special effects animation; the suction center point of the barrage element special effect supports linear movement and difference compensation between multiple points, making the generated barrage particle special effects more natural.

[0127] Based on the same inventive concept, an electronic device is also provided in an embodiment of the present application, and the method corresponding to the electronic device may be the method for displaying bullet screen special effects in the aforementioned embodiment, and its principle of solving the problem is similar to that of the method. The electronic device provided in an embodiment of the present application includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the methods and / or technical solutions of the aforementioned multiple embodiments of the present application.

[0128] The electronic device may be a user device, or a device formed by integrating a user device and a network device through a network, or may be an application running on the above device. The user device includes but is not limited to various terminal devices such as computers, mobile phones, tablet computers, smart watches, and bracelets. The network device includes but is not limited to network hosts, single network servers, multiple network server sets, or cloud computing-based computer sets, which can be used to implement some processing functions when setting an alarm. Here, the cloud is composed of a large number of hosts or network servers based on cloud computing, where cloud computing is a type of distributed computing, a virtual computer composed of a group of loosely coupled computer sets.

[0129] Figure 4 The structure of a device suitable for implementing the method and / or technical solution in the embodiment of the present application is shown, and the device 1200 includes a central processing unit (CPU, Central Processing Unit) 1201, which can perform various appropriate actions and processes according to the program stored in the read-only memory (ROM, Read Only Memory) 1202 or the program loaded from the storage part 1208 to the random access memory (RAM, Random Access Memory) 1203. In RAM1203, various programs and data required for system operation are also stored. CPU 1201, ROM 1202 and RAM 1203 are connected to each other through bus 1204. Input / output (I / O, Input / Output) interface 1205 is also connected to bus 1204.

[0130] The following components are connected to the I / O interface 1205: an input section 1206 including a keyboard, a mouse, a touch screen, a microphone, an infrared sensor, etc.; an output section 1207 including a cathode ray tube (CRT), a liquid crystal display (LCD), an LED display, an OLED display, etc., and a speaker, etc.; a storage section 1208 including one or more computer-readable media such as a hard disk, an optical disk, a magnetic disk, a semiconductor memory, etc.; and a communication section 1209 including a network interface card such as a LAN (Local Area Network) card, a modem, etc. The communication section 1209 performs communication processing via a network such as the Internet.

[0131] In particular, the methods and / or embodiments in the embodiments of the present application may be implemented as computer software programs. For example, the embodiments disclosed in the present application include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes program code for executing the method shown in the flowchart. When the computer program is executed by the central processing unit (CPU) 1201, the above functions defined in the method of the present application are executed.

[0132] Another embodiment of the present application further provides a computer-readable storage medium having computer program instructions stored thereon, wherein the computer program instructions can be executed by a processor to implement the methods and / or technical solutions of any one or more embodiments of the present application described above.

[0133] Specifically, the present embodiment may adopt any combination of one or more computer-readable media. The computer-readable medium may be a computer-readable signal medium or a computer-readable storage medium. The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination thereof. More specific examples (non-exhaustive list) of computer-readable storage media include: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In this document, a computer-readable storage medium may be any tangible medium containing or storing a program that may be used by or in combination with an instruction execution system, device, or device.

[0134] Computer readable signal media may include a data signal propagated in baseband or as part of a carrier wave, which carries a computer readable program code. Such propagated data signals may take a variety of forms, including, but not limited to, electromagnetic signals, optical signals, or any suitable combination of the above. Computer readable signal media may also be any computer readable medium other than a computer readable storage medium, which may send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device.

[0135] Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.

[0136] Computer program code for performing the operations of the present application may be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages, such as Java, Smalltalk, C++, and conventional procedural programming languages, such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0137] The flow chart or block diagram in the accompanying drawings shows the possible architecture, function and operation of the equipment, method and computer program product according to various embodiments of the present application. In this regard, each square box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some implementations as replacements, the functions marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two square boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be implemented with a dedicated system for hardware that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0138] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0139] In the several embodiments provided in the present application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation. For example, multiple units or page components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interfaces, devices or units, which can be electrical, mechanical or other forms.

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

[0141] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of hardware plus software functional units.

[0142] The above-mentioned integrated unit implemented in the form of a software functional unit can be stored in a computer-readable storage medium. The above-mentioned software functional unit is stored in a storage medium, including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) or a processor to perform some steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (Read-Only Memory, ROM), random access memory (Random Access Memory, RAM), disk or optical disk and other media that can store program codes.

[0143] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit it. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application.

[0144] In addition, it is clear that the word "comprising" does not exclude other units or steps, and the singular does not exclude the plural. Multiple units or devices stated in a device claim can also be implemented by one unit or device through software or hardware. The words first, second, etc. are used to indicate names, and do not indicate any particular order.

Claims

1. A method for displaying bullet screen special effects, wherein: The method comprises: Get the bullet screen special effects information corresponding to the target video being played; Obtaining target bullet chat data, wherein the target bullet chat data includes bullet chats that need to be rendered with special effects; Based on the barrage special effect information, the barrage element special effect corresponding to the target barrage data is displayed, wherein the barrage element special effect realizes the effect of the barrage forming a special effect element backflow based on the preset suction center point in the target video screen as the central axis, and the position of the special effect element is dynamically adjusted as the reflux progress changes.

2. The method according to claim 1, wherein: The displaying of the barrage element special effects corresponding to the target barrage data based on the barrage special effect information includes: Generate barrage element effects corresponding to target barrage data based on a predetermined element effect generation algorithm; The generated bullet screen element special effects are rendered onto the video screen for display.

3. The method according to claim 2, wherein: The barrage element special effects include barrage particle special effects. The barrage element special effects corresponding to the target barrage data are generated based on a predetermined element special effect generation algorithm and include: Based on a predetermined particle special effect generation algorithm, a bullet screen particle special effect corresponding to the target bullet screen data is generated by using a mixed sampling method of multiple noise maps.

4. The method according to claim 3, wherein: Each bullet message corresponds to a particle in the particle system, and the method calculates the position of each particle based on the following steps: By multiplying the container width and the resolution ratio, the absolute position of the center point on the screen is obtained; Next, adjust the position of the particles relative to the center point by subtracting the width of a single particle; Multiply the adjusted particle position by the percentage of reflow; Add the position multiplied by the reflow percentage to the particle width to get the final position of the particle on the screen.

5. The method according to claim 3 or 4, wherein: The method uses Canvas to generate bullet screen particle effects. The method generates bullet screen particle effects corresponding to target bullet screen data based on a predetermined particle effect generation algorithm, including: Create a Canvas element as a container for the bullet screen to draw bullet screen particle effects on the created Canvas; Each bullet message included in the target bullet message data corresponds to a particle in the particle system; For each target bullet, use the predetermined particle effect generation algorithm to calculate its position on the created Canvas; Based on the calculated position of each target bullet screen, the corresponding bullet screen particle effects are generated.

6. The method according to claim 1 or 2, wherein: The method further comprises: The suction center point is linearly moved or supplemented between multiple points.

7. The method according to claim 1 or 2, wherein: The displaying of the barrage element special effects corresponding to the target barrage data based on the barrage special effect information includes: Use native DOM to Canvas rendering technology to render the generated bullet screen element effects onto the video screen.

8. A device for displaying bullet screen special effects, wherein: The device comprises: A device for obtaining bullet screen special effect information corresponding to the target video being played; A device for acquiring target bullet screen data, wherein the target bullet screen data includes bullet screens that require rendering of particle special effects; A device for displaying a barrage element special effect corresponding to target barrage data based on the barrage special effect information, wherein the barrage element special effect realizes the effect of the barrage forming a special effect element backflow based on a preset suction center point in the target video screen as the central axis, and the position of the special effect element is dynamically adjusted as the reflux progress changes.

9. An electronic device, comprising: at least one processor; as well as a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the method according to any one of claims 1 to 7.

10. A computer readable medium having computer program instructions stored thereon, wherein the computer program instructions can be executed by a processor to implement the method according to any one of claims 1 to 7.

11. A computer program product, comprising a computer program, wherein when the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

Images