The web danmuku video player built from the ground up for an HTML5 world using React library.
Install ice-video via NPM
npm install --save ice-video react react-dom isomorphic-fetchimport stylesheet
import "http://ice-video.coolecho.net/static/video.min.css";or import scss
import "node_modules/ice-video/src/assets/sass/video.scss"Import the components where you need, example:
import React from 'react';
import ReactDOM from 'react-dom';
import IceVideo from 'ice-video';
const Player = () => {
const settings = {
loop: true,
autoPlay: false,
preload: 'auto',
poster: '',
volume: 0.5,
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} />
);
}
export default Player;| 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 |
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: 3.014076
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent