zl-php / VideoBarrage

以Nodejs为服务端并基于HTML5 canvas和mp4视频实现的真实交互弹幕

VideoBarrage

以Nodejs为服务端并基于HTML5 canvas和mp4视频实现的真实交互弹幕，支持多客户端同时连接，支持用户访问统计。

启动服务端（websocket）

# clone 项目
git clone [e-mail]:zl-php/VideoBarrage.git

# 项目根目录运行
npm install

# 配置服务端的 conf 配置
{
    "localHost": "", #服务启动的ip，默认不填写
    "localPort": 3000 #服务启动的端口，默认3000
}

# 启动服务端
node server\server.js

打开客户端

浏览器访问 client 内的 index.html

是否支持绑定用户信息？

是的，本项目已预留并实现了绑定用户功能逻辑，只需稍加改造就可以绑定自身的用户数据，整合到自己的项目了。

其他说明

本项目是基于张鑫旭的使用canvas实现和HTML5 video交互的弹幕效果源码改造

项目所使用的 canvas 插件 options 一览，详细参数可前往作者博客查看。

API名称	默认值	简单释义
opacity	100	弹幕透明度。数值。0表示完全透明，100表示完全不透明。
fontSize	24	弹幕文字大小。数值。单位px。
speed	2	弹幕移动速度。数值。单位px。如果设置为0，则表示弹幕不移动，直接视频中间区域显示。
range	[0,1]	弹幕显示的垂直范围。数组。支持两个值。[0,1]表示弹幕整个随机分布，[0,0.5]表示只在上半区域随机分布，[0.5,1]表示只在下半区域随机分布。
color	white	文字颜色。字符串。颜色值，可以是关键字，也可以是16进制颜色表示，例如#ff9000等。
data	[]	弹幕数据。数组。数组中的值只能是一个一个的弹幕数据对象，例如：[{ value: '弹幕1', time: 1 }, { value: '弹幕2', time: 2 }]``value和time是必须的，分布表示弹幕内容，和弹幕在视频播放到什么时候显示（单位是秒）。其他可选参数包括options参数中除data以外的所有参数，用来覆盖全局设置，例如：[{ value: '弹幕', time: 1, color: 'red' }]此时“弹幕”这个文字的颜色就不是默认的白色，而是这里设置的红色。

实现效果图