ice-video
The web danmuku video player built from the ground up for an HTML5 world using React library.
ScreenShot
Installation
Install ice-video via NPM
npm install --save ice-video react react-dom isomorphic-fetch
import stylesheet
;
or import scss
Import the components where you need, example:
;;; const Player = { const settings = loop: true autoPlay: false preload: 'auto' poster: '' volume: 05 getDanmukuUrl: 'http://127.0.0.1:3001/danmuku' sendDanmukuUrl: 'http://127.0.0.1:3001/senddanmu' controls: true scale: '16:9' src: './video.mp4' ; return <IceVideo ...settings /> ;} ;
Config
Options
field | type | default | note |
---|---|---|---|
autoPlay | boolean | false | whether to automatically play |
preload | string | 'auto' | |
poster | string | '' | |
loop | boolean | false | loop for video |
volume | number | 0.8 | palyer's volume |
controls | boolean | true | control player |
scale | string | '16:9' | scale of player |
duration | number | 6000 | danmuku display duration,unit ms |
opacity | number | 1 | the transparency of danmuku |
Danmuku
Server danmuku format conventions
field | type | note |
---|---|---|
content | string | the content of a danmuku |
date | Date | the time when send a danmuku |
fontColor | string | color of danmuku |
fontSize | string | fontSize of danmuku: 'middle' , 'small' , 'large' |
model | string | model of danmuku: 'roll' , 'top' , 'buttom' |
timepoint | number | video playback position |
for example:
content: "233" date: "2017-06-03T05:40:26.616Z" fontColor: "white" fontSize: "middle" model: "roll" timePoint: 3014076