Method and apparatus for displaying danmaku special effect, medium and program product

Abstract

The present application provides a method and apparatus for displaying a danmaku special effect, an electronic device, a computer readable medium, and a computer program product. The method of the present application comprises: acquiring danmaku special effect information corresponding to a played target video; acquiring target danmaku data, the target danmaku data comprising danmaku for which a special effect needs to be rendered; and on the basis of the danmaku special effect information, displaying a danmaku element special effect corresponding to the target danmaku data, wherein the danmaku element special effect achieves the effect that the danmaku forms reflow of a special effect element with a preset convergence center point in a target video picture as a center axis, and the position of the special effect element is dynamically adjusted as the reflow progress changes. In the present application, for a video played at a WEB end, a danmaku element special effect is displayed on the basis of a predetermined trigger display logic, achieving the effect that the danmaku is displayed in a specific scenario to form reflow of an element with a preset convergence center point in a video picture as the center axis, enriching the danmaku display effect, and improving the user experience.

Description

Methods, apparatus, media, and program products for displaying bullet screen effects.

[0001] This application claims priority to Chinese Patent Application No. 202411604166.4, filed on November 11, 2024, entitled “Method, Apparatus, Medium and Program Product for Displaying Bullet Screen Effects”, the entire contents of which are incorporated herein by reference.

[0002] Technical Field

[0003] This application relates to the field of computer technology, and in particular to a method, apparatus, electronic device, computer-readable medium, and computer program product for displaying bullet screen effects. Background Technology

[0004] Viewers often express their opinions or feelings about specific segments by sending bullet comments (danmu). However, existing bullet comment systems tend to use uniform fonts, colors, and animation effects when presenting these real-time responses, lacking interactivity and visual diversity with the video content. The inventors have discovered that while bullet comments provide viewers with a channel for real-time communication, the limited uniformity of their presentation restricts their deep integration with the video content, and the user experience needs improvement. Summary of the Invention

[0005] This application provides a method, apparatus, electronic device, computer-readable medium, and computer program product for displaying bullet screen effects.

[0006] One aspect of this application provides a method for displaying bullet screen effects, wherein the method includes:

[0007] Get the bullet screen effect information corresponding to the target video being played;

[0008] Obtain target bullet screen data, which includes bullet screens for which special effects need to be rendered;

[0009] Based on the bullet screen effect information, the bullet screen element effects corresponding to the target bullet screen data are displayed. The bullet screen element effects realize the effect of the bullet screen forming a reverse flow of effect elements based on the preset absorption center point in the target video screen as the central axis. The position of the effect elements is dynamically adjusted as the reflow progress changes.

[0010] In one aspect, this application provides an apparatus for displaying bullet screen effects, wherein the apparatus includes:

[0011] A device for acquiring information about bullet screen effects corresponding to the target video being played;

[0012] A device for acquiring target bullet screen data, wherein the target bullet screen data includes bullet screens that need to be rendered with particle effects;

[0013] An apparatus for displaying barrage element effects corresponding to target barrage data based on the barrage effect information, wherein the barrage element effects realize the effect of barrage forming a reverse flow of effect elements based on a preset absorption center point in the target video screen as the central axis, and the position of the effect elements is dynamically adjusted as the reflow progress changes.

[0014] In another aspect of this application, an electronic device is provided, the electronic device comprising:

[0015] At least one processor; and

[0016] A memory communicatively connected to the at least one processor; wherein,

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

[0018] In another aspect, this application provides a computer-readable storage medium having computer program instructions stored thereon, which can be executed by a processor to implement the methods of the embodiments of the application.

[0019] Another aspect of this application provides a computer program product including computer-readable instructions that, when executed by a processor, implement the methods of embodiments of this application.

[0020] In the solution provided in this application embodiment, for videos played on the web, bullet screen element effects are displayed based on predetermined trigger display logic. This achieves the effect of bullet screen elements flowing backwards according to a preset absorption center point in the video frame in specific scenarios, enriching the bullet screen display effect and improving the user experience. By using a multi-noise map mixed sampling method to generate bullet screen particle effects, compared with the traditional method of directly using calculated particles, randomness is improved and algorithm complexity is reduced. The generated bullet screen element effects are rendered onto the video frame by using native DOM to Canvas rendering, improving the smoothness and performance of the effect animation. The absorption center point of the bullet screen element effects supports linear movement and difference compensation between multiple points, making the generated bullet screen element effects more natural. Attached Figure Description

[0021] To more clearly illustrate the technical solutions in the embodiments of this application, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0022] Other features, objects, and advantages of this application will become more apparent from the following detailed description of non-limiting embodiments with reference to the accompanying drawings:

[0023] Figure 1 shows a flowchart illustrating a method for displaying bullet screen effects according to an embodiment of this application;

[0024] Figure 2 shows a schematic diagram of the effect of an exemplary bullet screen particle effect in an embodiment of this application;

[0025] Figure 3 shows a schematic diagram of a device for displaying bullet screen effects provided in an embodiment of this application;

[0026] Figure 4 shows a schematic diagram of the structure of a device suitable for implementing the scheme in the embodiments of this application.

[0027] The same or similar reference numerals in the accompanying drawings represent the same or similar parts. Embodiments of the present invention

[0028] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0029] In a typical configuration of this application, the terminal and the service network devices each include one or more processors (CPUs), input / output interfaces, network interfaces, and memory.

[0030] Memory may include non-persistent storage in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

[0031] Computer-readable media include permanent and non-permanent, removable and non-removable media, which can store information by any method or technology. Information can be computer program instructions, data structures, program modules, 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 technologies, read-only optical disc (CD-ROM), digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other non-transfer medium that can be used to store information accessible by a computing device.

[0032] Figure 1 shows a flowchart illustrating a method for displaying bullet screen effects according to an embodiment of this application. The method includes at least steps S101, S102, S103, and S104.

[0033] The execution subject of the method can be a client device or an application running on the client device. The client device includes, but is not limited to, various terminal devices such as computers, mobile phones, tablets, smartwatches, and wristbands.

[0034] Preferably, the method is implemented based on a web browser or an application based on a browser kernel.

[0035] The following description refers to Figure 1. In step S101, the bullet screen effect information corresponding to the target video being played is obtained.

[0036] The target video is a video that can display bullet comments and is played on the user's client device, including but not limited to TV series, clips, etc.

[0037] The target video's playback interface can display bullet comments, and when predetermined trigger conditions are met, bullet comments with rendered effects can be displayed.

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

[0039] 1) Special effect triggering conditions information; including various time or event conditions used to indicate when to trigger the display of bullet screen effects. For example, reaching one or more predetermined playback time points. Or, detecting an interactive action by the user that indicates they want to display bullet screen effects, etc.

[0040] 2) Special effects information; including information on the presentation of various special effects used for indication. For example, elemental effects such as inhalation, ash, fireworks, disappearance, and similar fragmentation effects.

[0041] 3) Special effects algorithms; including special effects algorithms used to indicate rendering special effects, etc.

[0042] In step S102, target bullet screen data is obtained, which includes bullet screens that need to be rendered with special effects.

[0043] Optionally, in step S102, in response to triggering the display of special effects bullet comments, target bullet comment data is obtained. For example, when a predetermined playback time point is reached, some or all of the bullet comments displayed in the current video frame are obtained as target bullet comment data.

[0044] Optionally, in step S102, in response to a video playback request, target bullet screen data is obtained.

[0045] For example, when a user starts playing a target video, the system determines one or more playback time points in the target video where bullet screen effects need to be displayed, and accordingly obtains some or all of the bullet screens in the video frames corresponding to each playback time point as target bullet screen data.

[0046] In step S103, based on the bullet screen effect information, the bullet screen element effects corresponding to the target bullet screen data are displayed.

[0047] The bullet screen element effect achieves the effect of the bullet screen forming a reverse flow of special effect elements based on the preset absorption center point in the target video screen as the central axis, and the position of the special effect elements is dynamically adjusted as the reflow progress changes.

[0048] Specifically, step S103 includes steps S1031 and S1032.

[0049] In step S1031, based on a predetermined element effect generation algorithm, the bullet screen element effects corresponding to the target bullet screen data are generated.

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

[0051] Among them, the bullet screen element effects include a variety of effects with element reversal effects, such as the vortex suction effect of bullet screens rotating around a preset suction center point, the reverse waterfall effect of bullet screens flowing from the bottom of the screen to the suction center point, or the reverse explosion effect of bullet screens spreading outward from the suction center point and then suddenly contracting in the reverse direction, etc.

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

[0053] Noise maps are a type of random texture used to generate natural and random visual effects, such as clouds, smoke, and fire. By mixing and sampling multiple noise maps and extracting pixel values ​​from various channels in the noise maps, more complex and random particle textures can be generated, improving the diversity and realism of the particles.

[0054] The particle effects mentioned here refer to a large number of dynamic particle effects in media content such as videos, which typically have changes in color and shape, creating a visual impact and aesthetic appeal. Traditional particle systems generally use algorithms to directly generate particle attributes such as position, velocity, and color. While this method is controllable, it may lack natural and random effects.

[0055] One method, which uses mixed sampling of multiple noise maps to generate particles, blends different noise maps to create particle properties. The noise maps provide a natural randomness, making the generated particles appear more realistic and unpredictable. This method is simpler than directly using computationally generated particles because it reduces algorithmic complexity and can quickly generate a large number of random particles.

[0056] According to one embodiment, in step S103, the method uses the particle effect generation algorithm to achieve the effect of the barrage forming an element backflow based on the preset absorption center point in the video screen as the central axis, and the position of the particles is dynamically adjusted as the backflow progress changes.

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

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

[0059] Here, `center` represents the screen percentage from the left side of the screen where the center point is located. `center` defines the horizontal position of the particle effect's center point on the screen. For example, if the value of `center` is 0.5, then the center point is located in the exact center of the screen. This `center` corresponds to the suction center point.

[0060] Here, `width` refers to the width of the container containing the particle effect. 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.

[0061] Here, devicePR represents the resolution ratio, a parameter used to adjust the display effect of particle effects on devices with different resolutions. Since different devices may have different screen resolutions, using the resolution ratio ensures that particle effects maintain a consistent look and layout across various devices.

[0062] Here, `reflowProgress` represents the percentage of reflow, indicating the progress of the particle effect during the reflow process. Reflow refers to the process of a particle moving from its initial position to its final position. The value of `reflowProgress` changes from 0 to 1, representing the entire reflow process from start to finish.

[0063] Here, x represents the width of the bullet screen; this parameter indicates the width of a single particle in the particle effect. When calculating particle position, the value of x is used to determine the initial position of the particle within the container.

[0064] Based on formula (1), firstly, the absolute position of the center point on the screen is obtained by multiplying by the ratio of the container width to the resolution. This position is the reference point for the particle effect layout. Next, the position of the particles relative to the center point is adjusted by subtracting the width x of each individual 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. This step simulates the process of the particles moving from their initial position to their final position. As the reflow progress increases, the particles gradually move from the center point to both sides. Finally, the position multiplied by the reflow progress is added to the particle width x to obtain the final position of the particles on the screen.

[0065] The special effects generation algorithm shown in formula (1) creates a barrage particle effect. The position of the particles will be dynamically adjusted as the reflow progress changes, thereby generating an animation effect of elements flowing backwards based on the preset absorption center point in the video screen as the central axis. The position of the particles will be dynamically adjusted as the reflow progress changes.

[0066] For example, referring to the video frame shown in FIG2, the particle effect generation algorithm of this application embodiment can realize the effect of the barrage in the video frame of a specific scene forming the element reverse flow according to the preset absorption center point (located in the center area of ​​the screen) as the central axis, and render the generated barrage particle effect onto the video screen and display it synchronously with the video content to form the barrage particle effect shown in FIG2.

[0067] According to one embodiment, the method performs linear shifts or difference compensation between multiple points on the inhalation center point.

[0068] Linear movement between multiple points refers to the smooth transition of the center point between multiple preset points. Linear movement between multiple points can be achieved using algorithms such as linear interpolation (Lerp), which is a method for smoothly transitioning between two values.

[0069] The interpolation compensation refers to the process where, during the movement of the center point from one point to another, if it needs to pass through intermediate positions not in the preset point list, the algorithm automatically calculates the values ​​of these intermediate positions to ensure the continuity and smoothness of the movement. Because interpolation compensation allows the center point to move smoothly between any two points, rather than being limited to preset points, the special effects animations processed by interpolation compensation look more natural.

[0070] Linear movement and interpolation provide greater flexibility and control, making it particularly suitable for creating complex animation paths or user interaction scenarios, allowing designers to create richer and more dynamic special effects.

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

[0072] The steps for generating bullet screen particle effects using Canvas in this embodiment include:

[0073] Create a Canvas element as a container for the bullet comments, and then draw the bullet comment particle effects on the created Canvas.

[0074] Next, each barrage contained in the target barrage data is mapped to a particle in the particle system.

[0075] Next, for each target barrage, a predefined particle effect generation algorithm is used to calculate its position on the created Canvas.

[0076] 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 the actual situation.

[0077] Next, based on the calculated position of each target barrage, corresponding barrage particle effects are generated.

[0078] Specifically, each particle, i.e., each bullet comment, is drawn on the Canvas. This is achieved using JavaScript and the Canvas API. Text can be drawn based on the particle's position, color, and other attributes.

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

[0080] The core of the native DOM to Canvas rendering technology lies in converting native DOM elements in a webpage into Canvas elements for rendering. These native DOM elements include, but are not limited to, elements constructed using HTML and CSS.

[0081] Traditionally, special effects animations are typically achieved by directly manipulating DOM elements using CSS3 or JavaScript. Since Canvas rendering occurs on a separate bitmap rather than directly on the DOM tree, converting DOM elements to Canvas rendering reduces browser repaints and reflows, improving the smoothness and performance of special effects animations, especially on mobile devices or devices with lower performance. Furthermore, Canvas provides more drawing APIs, enabling the creation of more complex graphics and animation effects.

[0082] According to the method of this application, for videos played on the web, bullet screen element effects are displayed based on a predetermined trigger display logic. This achieves the effect of bullet screen elements flowing backwards according to a preset absorption center point in the video frame in specific scenarios, enriching the bullet screen display effect and improving the user experience. By using a multi-noise map mixed sampling method to generate bullet screen particle effects, compared with the traditional method of directly using calculated particles, the randomness is improved and the algorithm complexity is reduced. The generated bullet screen element effects are rendered onto the video frame by using native DOM to Canvas rendering, which improves the smoothness and performance of the effect animation. The absorption center point of the bullet screen element effects supports linear movement and difference compensation between multiple points, making the generated bullet screen element effects more natural.

[0083] In addition, this application embodiment also provides a device for displaying bullet screen effects, the structure of which is shown in Figure 3.

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

[0085] The device is included in the client device.

[0086] Preferably, the device is implemented based on a web browser or an application based on a browser kernel.

[0087] Referring to Figure 3, the information acquisition device 101 acquires the bullet screen effect information corresponding to the target video being played.

[0088] The target video is a video that can display bullet comments and is played on the user's client device, including but not limited to TV series, clips, etc.

[0089] The target video's playback interface can display bullet comments, and when predetermined trigger conditions are met, bullet comments with rendered effects can be displayed.

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

[0091] 1) Special effect triggering conditions information; including various time or event conditions used to indicate when to trigger the display of bullet screen effects. For example, reaching one or more predetermined playback time points. Or, detecting an interactive action by the user that indicates they want to display bullet screen effects, etc.

[0092] 2) Special effects information; including information on the presentation of various special effects used for indication. For example, elemental effects such as inhalation, ash, fireworks, disappearance, and similar fragmentation effects.

[0093] 3) Special effects algorithms; including special effects algorithms used to indicate rendering special effects, etc.

[0094] The bullet screen acquisition device 102 acquires target bullet screen data, which includes bullet screens that need to be rendered with special effects.

[0095] Optionally, the bullet screen acquisition device 102 acquires target bullet screen data in response to triggering the display of special effects bullet screens. For example, when a predetermined playback time is reached, it acquires some or all of the bullet screens displayed in the current video frame as target bullet screen data.

[0096] Optionally, the bullet screen acquisition device 102 acquires target bullet screen data in response to a video playback request.

[0097] For example, when a user starts playing a target video, the system determines one or more playback time points in the target video where bullet screen effects need to be displayed, and accordingly obtains some or all of the bullet screens in the video frames corresponding to each playback time point as target bullet screen data.

[0098] Based on the bullet screen effect information, the special effects display device 103 displays the bullet screen element effects corresponding to the target bullet screen data.

[0099] The bullet screen element effect achieves the effect of the bullet screen forming a reverse flow of special effect elements based on the preset absorption center point in the target video screen as the central axis, and the position of the special effect elements is dynamically adjusted as the reflow progress changes.

[0100] Specifically, the special effects display device 103 includes a special effects generation device and a special effects rendering device.

[0101] The special effects generation device generates bullet screen element effects corresponding to the target bullet screen data based on a predetermined element effect generation algorithm.

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

[0103] Among them, the bullet screen element effects include a variety of effects with element reversal effects, such as the vortex suction effect of bullet screens rotating around a preset suction center point, the reverse waterfall effect of bullet screens flowing from the bottom of the screen to the suction center point, or the reverse explosion effect of bullet screens spreading outward from the suction center point and then suddenly contracting in the reverse direction, etc.

[0104] According to one embodiment, the bullet screen element effects include bullet screen particle effects. The effect generation device generates bullet screen particle effects corresponding to the target bullet screen data by using a method of mixed sampling of multiple noise maps based on a predetermined particle effect generation algorithm.

[0105] Noise maps are a type of random texture used to generate natural and random visual effects, such as clouds, smoke, and fire. By mixing and sampling multiple noise maps and extracting pixel values ​​from various channels in the noise maps, more complex and random particle textures can be generated, improving the diversity and realism of the particles.

[0106] The particle effects mentioned here refer to a large number of dynamic particle effects in media content such as videos, which typically have changes in color and shape, creating a visual impact and aesthetic appeal. Traditional particle systems generally use algorithms to directly generate particle attributes such as position, velocity, and color. While this method is controllable, it may lack natural and random effects.

[0107] The special effects display device 103 uses a method of generating particles by mixing multiple noise maps through sampling. This mixing of different noise maps creates particle properties. The noise maps provide a natural randomness, making the generated particles appear more realistic and unpredictable. This method is simpler than directly using computationally generated particles because it reduces algorithmic complexity and can quickly generate a large number of random particles.

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

[0109] Specifically, each barrage corresponds to a particle in the particle system, and the special effects display device 103 calculates the position of each particle based on formula (1).

[0110] Based on formula (1), firstly, the special effects display device 103 obtains the absolute position of the center point on the screen by multiplying by the ratio of the container width to the resolution. This position is the reference point for the particle effect layout. Next, the position of the particles 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. This step simulates the process of the particles moving from the initial position to the final position. As the reflow progress increases, the particles gradually move from the center point to both sides. Finally, the position multiplied by the reflow progress is added to the particle width x to obtain the final position of the particles on the screen.

[0111] Based on the special effects generation algorithm shown in formula (1), the bullet screen particle effect is created. The position of the particles will be dynamically adjusted as the reflow progress changes, thereby generating an animation effect of elements flowing backwards based on the preset absorption center point in the video screen as the central axis. The position of the particles will be dynamically adjusted as the reflow progress changes.

[0112] For example, referring to the video frame shown in FIG2, the particle effect generation algorithm of this application embodiment can realize the effect of the barrage in the video frame of a specific scene forming the element reverse flow according to the preset absorption center point (located in the center area of ​​the screen) as the central axis, and render the generated barrage particle effect onto the video screen and display it synchronously with the video content to form the barrage particle effect shown in FIG2.

[0113] According to one embodiment, the special effects display device 103 performs linear shifts or difference compensation between multiple points on the inhalation center point.

[0114] Linear movement between multiple points refers to the smooth transition of the center point between multiple preset points. Linear movement between multiple points can be achieved using algorithms such as linear interpolation (Lerp), which is a method for smoothly transitioning between two values.

[0115] The interpolation compensation refers to the process where, during the movement of the center point from one point to another, if it needs to pass through intermediate positions not in the preset point list, the algorithm automatically calculates the values ​​of these intermediate positions to ensure the continuity and smoothness of the movement. Because interpolation compensation allows the center point to move smoothly between any two points, rather than being limited to preset points, the special effects animations processed by interpolation compensation look more natural.

[0116] Linear movement and interpolation provide greater flexibility and control, making it particularly suitable for creating complex animation paths or user interaction scenarios, allowing designers to create richer and more dynamic special effects.

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

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

[0119] Create a Canvas element as a container for the bullet comments, and then draw the bullet comment particle effects on the created Canvas.

[0120] Next, each barrage contained in the target barrage data is mapped to a particle in the particle system.

[0121] Next, for each target barrage, a predefined particle effect generation algorithm is used to calculate its position on the created Canvas.

[0122] 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 the actual situation.

[0123] Next, based on the calculated position of each target barrage, corresponding barrage particle effects are generated.

[0124] Specifically, each particle, i.e., each bullet comment, is drawn on the Canvas. This is achieved using JavaScript and the Canvas API. Text can be drawn based on the particle's position, color, and other attributes.

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

[0126] The core of the native DOM to Canvas rendering technology lies in converting native DOM elements in a webpage into Canvas elements for rendering. These native DOM elements include, but are not limited to, elements constructed using HTML and CSS.

[0127] Traditionally, special effects animations are typically achieved by directly manipulating DOM elements using CSS3 or JavaScript. Since Canvas rendering occurs on a separate bitmap rather than directly on the DOM tree, converting DOM elements to Canvas rendering reduces browser repaints and reflows, improving the smoothness and performance of special effects animations, especially on mobile devices or devices with lower performance. Furthermore, Canvas provides more drawing APIs, enabling the creation of more complex graphics and animation effects.

[0128] According to the apparatus of this application, for videos played on a web platform, bullet screen element effects are displayed based on a predetermined trigger display logic. This achieves the effect of bullet screen elements flowing backwards according to a preset absorption center point in the video frame in specific scenarios, enriching the bullet screen display effect and improving the user experience. By using a multi-noise map mixed sampling method to generate bullet screen particle effects, compared with the traditional method of directly using calculated particles, the randomness is improved and the algorithm complexity is reduced. The generated bullet screen element effects are rendered onto the video frame by using native DOM to Canvas rendering, which improves the smoothness and performance of the effect animation. The absorption center point of the bullet screen element effects supports linear movement and difference compensation between multiple points, making the generated bullet screen particle effects more natural.

[0129] Based on the same inventive concept, this application also provides an electronic device. The method corresponding to the electronic device can be the method for displaying bullet screen effects in the foregoing embodiments, and its problem-solving principle is similar to that method. The electronic device provided in this 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 to enable the at least one processor to execute the methods and / or technical solutions of the foregoing embodiments of this application.

[0130] The electronic device can be a user device, or a device formed by integrating user devices and network devices through a network, or it can be an application running on the aforementioned devices. The user device includes, but is not limited to, various terminal devices such as computers, mobile phones, tablets, smartwatches, and wristbands. The network device includes, but is not limited to, network hosts, single network servers, multiple network server sets, or cloud computing-based computer sets, and can be used to implement some processing functions when setting an alarm clock. Here, the cloud consists of a large number of hosts or network servers based on cloud computing. Cloud computing is a type of distributed computing, consisting of a virtual computer composed of a group of loosely coupled computer sets.

[0131] Figure 4 illustrates the structure of an apparatus suitable for implementing the methods and / or technical solutions in the embodiments of this application. The apparatus 1200 includes a Central Processing Unit (CPU) 1201, which can perform various appropriate actions and processes based on programs stored in Read Only Memory (ROM) 1202 or programs loaded from storage portion 1208 into Random Access Memory (RAM) 1203. The RAM 1203 also stores various programs and data required for system operation. The CPU 1201, ROM 1202, and RAM 1203 are interconnected via a bus 1204. An Input / Output (I / O) interface 1205 is also connected to the bus 1204.

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

[0133] In particular, the methods and / or embodiments in this application can be implemented as computer software programs. For example, the embodiments disclosed in this application include a computer program product comprising computer-readable instructions carried on a computer-readable medium, the computer-readable instructions containing program code for performing the methods shown in the flowchart. When the computer program is executed by the central processing unit (CPU) 1201, it performs the functions defined in the methods of this application.

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

[0135] Specifically, this embodiment may employ any combination of one or more computer-readable media. A computer-readable medium may be a computer-readable signal medium or a computer-readable storage medium. A computer-readable storage medium may be, for example—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of computer-readable storage media (a non-exhaustive list) include: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, 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 can be used by or in connection with an instruction execution system, apparatus, or device.

[0136] Computer-readable signal media may include data signals propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals may take various forms, including—but not limited to—electromagnetic signals, optical signals, or any suitable combination thereof. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, capable of sending, propagating, or transmitting programs for use by or in connection with an instruction execution system, apparatus, or device.

[0137] The program code contained on a computer-readable medium may be transmitted using any suitable medium, including—but not limited to—wireless, wire, optical fiber, RF, etc., or any suitable combination thereof.

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

[0139] The flowcharts or block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of devices, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-specific system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

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

[0141] In the several embodiments provided in this application, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or page components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be an indirect coupling or communication connection between devices or units through some interfaces, and may be electrical, mechanical, or other forms.

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

[0143] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or in a combination of hardware and software functional units.

[0144] The integrated units implemented as software functional units described above can be stored in a computer-readable storage medium. These software functional units, stored in a storage medium, include several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) or processor to execute some steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0145] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit them. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this application.

[0146] Furthermore, 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 recited in a device claim may also be implemented by a single unit or device through software or hardware. The terms "first," "second," etc., are used to indicate names and do not indicate any specific order.

Claims

1. A method for displaying bullet screen effects, wherein, The method includes: Get the bullet screen effect information corresponding to the target video being played; Obtain target bullet screen data, which includes bullet screens for which special effects need to be rendered; Based on the bullet screen effect information, the bullet screen element effects corresponding to the target bullet screen data are displayed. The bullet screen element effects realize the effect of the bullet screen forming a reverse flow of effect elements based on the preset absorption center point in the target video screen as the central axis. The position of the effect elements is dynamically adjusted as the reflow progress changes.

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

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

4. The method according to claim 3, wherein, Each barrage 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 by the resolution ratio, the absolute position of the center point on the screen can be obtained; Next, the position of the particle relative to the center point is adjusted by subtracting the width of each individual particle; Multiply the adjusted particle position by the percentage of recirculation; Add the particle width to the position multiplied by the reflow percentage 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 generation of bullet screen particle effects corresponding to the target bullet screen data based on a predetermined particle effect generation algorithm includes: Create a Canvas element as a container for the bullet comments, and then draw the bullet comment particle effects on the created Canvas; Each bullet in the target bullet data corresponds to a particle in the particle system; For each target barrage, a predefined particle effect generation algorithm is used to calculate its position on the created Canvas; Based on the calculated position of each target barrage, corresponding barrage particle effects are generated.

6. The method according to claim 1 or 2, wherein, The method further includes: The inhalation center point is subjected to linear shifting or difference compensation between multiple points.

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

8. A device for displaying bullet screen effects, wherein, The device includes: A device for acquiring information about bullet screen effects 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 need to be rendered with particle effects; An apparatus for displaying barrage element effects corresponding to target barrage data based on the barrage effect information, wherein the barrage element effects realize the effect of barrage forming a reverse flow of effect elements based on a preset absorption center point in the target video screen as the central axis, and the position of the effect elements is dynamically adjusted as the reflow progress changes.

9. An electronic device, the 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, which, when executed by the at least one processor, enable the at least one processor to perform the following operations: Get the bullet screen effect information corresponding to the target video being played; Obtain target bullet screen data, which includes bullet screens for which special effects need to be rendered; Based on the bullet screen effect information, the bullet screen element effects corresponding to the target bullet screen data are displayed. The bullet screen element effects realize the effect of the bullet screen forming a reverse flow of effect elements based on the preset absorption center point in the target video screen as the central axis. The position of the effect elements is dynamically adjusted as the reflow progress changes.

10. The electronic device according to claim 9, wherein, The display of bullet screen element effects corresponding to the target bullet screen data based on the bullet screen effect information includes: Based on a predetermined element effect generation algorithm, generate bullet screen element effects corresponding to the target bullet screen data; The generated bullet screen effects are rendered onto the video screen for display.

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

12. The electronic device according to claim 11, wherein, Each barrage 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 by the resolution ratio, the absolute position of the center point on the screen can be obtained; Next, the position of the particle relative to the center point is adjusted by subtracting the width of each individual particle; Multiply the adjusted particle position by the percentage of recirculation; Add the particle width to the position multiplied by the reflow percentage to get the final position of the particle on the screen.

13. The electronic device according to claim 11 or 12, wherein, The method uses Canvas to generate bullet screen particle effects. The generation of bullet screen particle effects corresponding to the target bullet screen data based on a predetermined particle effect generation algorithm includes: Create a Canvas element as a container for the bullet comments, and then draw the bullet comment particle effects on the created Canvas; Each bullet in the target bullet data corresponds to a particle in the particle system; For each target barrage, a predefined particle effect generation algorithm is used to calculate its position on the created Canvas; Based on the calculated position of each target barrage, corresponding barrage particle effects are generated.

14. The electronic device according to claim 9 or 10, wherein, The at least one processor is also capable of performing the following operations: The inhalation center point is subjected to linear shifting or difference compensation between multiple points.

15. The electronic device according to claim 9 or 10, wherein, The display of bullet screen element effects corresponding to the target bullet screen data based on the bullet screen effect information includes: The native DOM to Canvas rendering technology is used to render the generated bullet screen element effects onto the video screen.

16. A computer-readable medium having stored thereon computer program instructions, said computer program instructions being executable by a processor to perform the following operations: Get the bullet screen effect information corresponding to the target video being played; Obtain target bullet screen data, which includes bullet screens for which special effects need to be rendered; Based on the aforementioned bullet screen effect information, the bullet screen element effects corresponding to the target bullet screen data are displayed, wherein... The bullet screen element effect achieves the effect of bullet screens flowing backwards based on a preset absorption center point in the target video screen as the central axis. The position of the effect element is dynamically adjusted as the reflow progress changes.

17. The computer-readable medium of claim 16, wherein, The display of bullet screen element effects corresponding to the target bullet screen data based on the bullet screen effect information includes: Based on a predetermined element effect generation algorithm, generate bullet screen element effects corresponding to the target bullet screen data; The generated bullet screen effects are rendered onto the video screen for display.

18. The computer-readable medium of claim 17, wherein, The bullet screen element effects include bullet screen particle effects, and the bullet screen element effects generated based on the predetermined element effect generation algorithm corresponding to the target bullet screen data include: Based on a predetermined particle effect generation algorithm, the bullet screen particle effects corresponding to the target bullet screen data are generated by using a method of mixed sampling of multiple noise maps.

19. The computer-readable medium of claim 18, wherein, Each barrage 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 by the resolution ratio, the absolute position of the center point on the screen can be obtained; Next, the position of the particle relative to the center point is adjusted by subtracting the width of each individual particle; Multiply the adjusted particle position by the percentage of recirculation; Add the particle width to the position multiplied by the reflow percentage to get the final position of the particle on the screen.

20. A computer program product comprising computer-readable instructions that, when executed by a processor, implement the method of any one of claims 1 to 7.

Images