Background: Now danmu has become the standard of all major video websites. Actually, danmu was originally born in Niconico, a two-dimension website in Japan. Later, station A and STATION B introduced it, opening the precedent of bullet screen culture in China.

Open source: github.com/zerosoul/rc…

Compared with “like”, “forward” and “comment”, “bullet screen” is more interactive and popular among users. Many people have formed the habit of “bullet screen” when watching videos.

Would it be difficult for programmers to implement a barrage feature themselves? Someone made one on Github — RC-Bullets. Rc-bullets is an extensible, high performance bullets component based on a CSS3 Animation that uses React.

The RC-Bullets have the following features:

  • Support for passing in the React component, flexible control of bullet content and UI, and a default style component:
  • Danmarek screen management: Clear screen, pause, hide (control for individual danmarek may be added later)
  • Parameterization of bullet screen animation: motion function (constant speed /ease/ step /cubic- Bezier), duration (seconds), cycle times, delay, etc
  • Mouse suspension bullet screen pause

Front End engineer installation mode:

npm:

npm install --save rc-bullets
Copy the code

 yarn:

yarn add rc-bullets
Copy the code

Initialize a barrage scene:

import React, { useEffect, useState } from 'react';
import BulletScreen, { StyledBullet } from 'rc-bullets';

const headUrl='https://zerosoul.github.io/rc-bullets/assets/img/heads/girl.jpg';
export default function Demo() {
  // Bullet screen
  const [screen, setScreen] = useState(null);
  // The content of the barrage
  const [bullet, setBullet] = useState(' ');
  useEffect(() = > {
    // Initializes the barrage screen for an element on the page, usually as a large block. The configuration item takes effect globally
    let s = new BulletScreen('.screen', {duration:20});
    // or
    // let s=new BulletScreen(document.querySelector('.screen));setScreen(s); } []);// Event processing of ammunition content input
  const handleChange = ({ target: { value } }) = > {
    setBullet(value);
  };
  // Send a barrage
  const handleSend = () = > {
    if (bullet) {
      // push plain text
      screen.push(bullet);
      // or use StyledBullet

      screen.push(
        <StyledBullet
          head={headUrl}
          msg={bullet}
          backgroundColor={'#fff'}
          size='large'
        />
      );
      // Or can also be used in the same way as StyledBullet
      screen.push({msg:bullet,head:headUrl,color:"#eee" size="large" backgroundColor:"Rgba (2,2,2,. 3)"})}};return (
    <main>
      <div className="screen" style={{ width: '100vw', height: '80vh' }}></div>
      <input value={bullet} onChange={handleChange} />
      <button onClick={handleSend}>send</button>
    </main>
  );
}
Copy the code

If you are also interested in bullet screen, you can try it!!