实现B站弹幕很难么?这个开源项目了解一下

开发 前端
说起B站,最有特色的功能就是弹幕,现在弹幕已成为各大视频网站的标配,其实,弹幕最早是诞生于日本的一个二次元网站Niconico。后来A站和B站将其引入,开启了国内弹幕文化的先河。

说起B站,最有特色的功能就是弹幕,现在弹幕已成为各大视频网站的标配,其实,弹幕最早是诞生于日本的一个二次元网站Niconico。后来A站和B站将其引入,开启了国内弹幕文化的先河。

相比点赞、转发、评论,弹幕的形式让用户的互动性更强,因此也更受大家喜爱,很多人已经养成了看视频必开弹幕的习惯。

假如程序员自己要实现一个弹幕功能会难么?已经有人在Github上造了一个——rc-bullets。rc-bullets是一个基于 CSS3 Animation,使用 React 构建,可扩展,高性能的弹幕组件。

rc-bullets已经在Github上标星 331,累计分支 33。(详情:https://github.com/zerosoul/rc-bullets)

rc-bullets具有以下特性:

  • 支持传入 React 组件,灵活控制弹幕内容和 UI,并提供一个默认样式组件:
  • 弹幕屏幕管理:清屏,暂停,隐藏(后续可能会加入针对单个弹幕的控制)
  • 弹幕动画参数化:运动函数(匀速/ease/步进/cubic-bezier)、时长(秒)、循环次数、延迟等
  • 鼠标悬浮弹幕暂停

接下来看一下弹幕效果:

 

安装方式

npm:

  1. npm install --save rc-bullets 

yarn:

  1. yarn add rc-bullets 

初始化一个简单的弹幕场景:

  1. import React, { useEffect, useState } from 'react'
  2. import BulletScreen, { StyledBullet } from 'rc-bullets'
  3.  
  4. const headUrl='https://zerosoul.github.io/rc-bullets/assets/img/heads/girl.jpg'
  5. export default function Demo() { 
  6.   // 弹幕屏幕 
  7.   const [screen, setScreen] = useState(null); 
  8.   // 弹幕内容 
  9.   const [bullet, setBullet] = useState(''); 
  10.   useEffect(() => { 
  11.     // 给页面中某个元素初始化弹幕屏幕,一般为一个大区块。此处的配置项全局生效 
  12.     let s = new BulletScreen('.screen',{duration:20}); 
  13.     // or 
  14.     // let s=new BulletScreen(document.querySelector('.screen)); 
  15.     setScreen(s); 
  16.   }, []); 
  17.   // 弹幕内容输入事件处理 
  18.   const handleChange = ({ target: { value } }) => { 
  19.     setBullet(value); 
  20.   }; 
  21.   // 发送弹幕 
  22.   const handleSend = () => { 
  23.     if (bullet) { 
  24.       // push 纯文本 
  25.       screen.push(bullet); 
  26.       // or 使用 StyledBullet 
  27.  
  28.       screen.push( 
  29.         <StyledBullet 
  30.           head={headUrl} 
  31.           msg={bullet} 
  32.           backgroundColor={'#fff'
  33.           size='large' 
  34.         /> 
  35.       ); 
  36.       // or 还可以这样使用,效果等同使用 StyledBullet 组件 
  37.       screen.push({msg:bullet,head:headUrl,color:"#eee" size="large" backgroundColor:"rgba(2,2,2,.3)"}) 
  38.     } 
  39.   }; 
  40.   return ( 
  41.     <main> 
  42.       <div className="screen" style={{ width: '100vw', height: '80vh' }}></div> 
  43.       <input value={bullet} onChange={handleChange} /> 
  44.       <button onClick={handleSend}>发送</button> 
  45.     </main> 
  46.   ); 

);}

责任编辑:未丽燕 来源: 开源最前线
相关推荐

2023-11-18 09:09:08

GNUBSD协议

2020-12-10 08:44:35

WebSocket轮询Comet

2018-01-04 09:20:55

python爬虫视频弹幕

2022-03-24 13:36:18

Java悲观锁乐观锁

2021-09-09 06:18:04

交互功能弹幕

2024-09-19 09:30:39

缓存框架抽象

2019-02-20 14:16:43

2020-02-10 14:26:10

GitHub代码仓库

2024-04-11 12:19:01

Rust数据类型

2018-06-05 17:40:36

人工智能语音识别

2021-10-09 18:26:59

二叉树多叉树搜索

2019-07-02 08:40:43

Windows 功能系统

2021-03-05 09:58:50

鸿蒙HarmonyOS开源

2015-05-07 09:32:55

APP开源

2022-03-07 06:34:22

CQRS数据库数据模型

2021-02-07 10:34:21

可视化编程Numpy

2020-03-01 17:53:38

Excel大数据微软

2018-07-17 14:42:50

2024-02-28 18:22:13

AI处理器

2021-10-29 07:49:23

Python弹幕播放
点赞
收藏

51CTO技术栈公众号