React component, a danmuku video player package.
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
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:
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ -------- ---- ------------
----- ------ - -- -- -
----- -------- - -
----- -----
--------- ------
-------- -------
------- ---
------- ----
-------------- --------------------------------
--------------- ----------------------------------
--------- -----
------ -------
---- --------------
--
------ -
--------- ------------- --
--
-
------ ------- -------
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
HomePage
https://github.com/IceEnd/ice-video#readme
Repository
git+https://github.com/IceEnd/ice-video.git
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606a81e8991b448de8dd