ice-video

The web danmuku video player built from the ground up for an HTML5 world using React library.

website

ScreenShot

Installation

Install ice-video via NPM

npm install --save ice-video react react-dom isomorphic-fetch

import 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;

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: 3.014076
}

LICENSE

MIT @ CNO