https://github.com/IceEnd/ice-video

:clapper:Wonderful Html5 danmuku video player,using React library.
https://github.com/IceEnd/ice-video

danmuku danmuplayer react video-player

Last synced: 3 months ago
JSON representation

:clapper:Wonderful Html5 danmuku video player,using React library.

• Host: GitHub
• URL: https://github.com/IceEnd/ice-video
• Owner: IceEnd
• License: mit
• Created: 2017-02-07T03:29:43.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-11-03T09:17:33.000Z (about 7 years ago)
• Last Synced: 2024-06-28T13:20:51.381Z (4 months ago)
• Topics: danmuku, danmuplayer, react, video-player
• Language: JavaScript
• Homepage: http://ice-video.coolecho.net/
• Size: 1.2 MB
• Stars: 67
• Watchers: 5
• Forks: 12
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-github-star - ice-video

README

        
# ice-video

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

[![npm](https://img.shields.io/badge/npm-v0.1.6-brightgreen.svg)](https://www.npmjs.com/package/ice-video)

![build](https://img.shields.io/badge/build-passing-green.svg)

[![MIT License](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/IceEnd/icePlayer/blob/master/LICENSE)

[website](http://ice-video.coolecho.net)

# ScreenShot

![ScreenShot](./screenShot.jpeg)

# Installation

Install ice-video via NPM

```shell

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

```

import stylesheet

```javascript

import "http://ice-video.coolecho.net/static/video.min.css";

```

or import scss

```javascript

import "node_modules/ice-video/src/assets/sass/video.scss"

```

Import the components where you need, example:

```javascript

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 (

    

  );

}

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:

```javascript

{

  content: "233",

  date: "2017-06-03T05:40:26.616Z",

  fontColor: "white",

  fontSize: "middle",

  model: "roll",

  timePoint: 3.014076

}

```

# LICENSE

[MIT @ Alchemy](./LICENSE)