🍭「DPlayer」- 炒鸡好看的 HTML5 弹幕播放器

阅读 4028
收藏 112
2016-05-20
原文链接:github.com

DPlayer

npm
npm
devDependency Status
npm
Travis
%e2%9d%a4

Wow, such a lovely HTML5 danmaku video player

Introduction

Notice: This player is still under development.

Demo

Screenshot
image

Install

$ npm install dplayer --save

Usage

HTML



JS

var dp = new DPlayer(option);
dp.init();

Options

var option = {
    element: document.getElementById('player1'),                       // Optional, player element
    autoplay: false,                                                   // Optional, autoplay video, not supported by mobile browsers
    theme: '#FADFA3',                                                  // Optional, theme color, default: #b7daff
    loop: true,                                                        // Optional, loop play music, default: true
    video: {                                                           // Required, video info
        url: '若能绽放光芒.mp4',                                         // Required, video url
        pic: '若能绽放光芒.png'                                          // Optional, music picture
    },
    danmaku: {                                                         // Optional, showing danmaku
        id: '9E2E3368B56CDBB4',                                        // Required, danmaku id, MUST BE UNIQUE, CAN NOT USE THESE IN YOUR NEW PLAYER: `https://dplayer.daoapp.io/list`
        api: 'https://dplayer.daoapp.io/',                             // Required, danmaku api
        token: 'tokendemo'                                             // Optional, danmaku token for api
    }
}

API

  • dp.init()
  • dp.play()
  • dp.pause()

Event binding

dp.on(event, handler)

event:
+ play: Triggered when DPlayer start play
+ pause: Triggered when DPlayer paused
+ canplay: Triggered when enough data is available that DPlayer can be played
+ playing: Triggered periodically when DPlayer is playing
+ ended: Triggered when DPlayer ended
+ error: Triggered when an error occurs

Work with module bundler

var DPlayer = require('DPlayer');
var dp = new DPlayer({
    // ...
});

Danmaku back-end

Ready-made API:

https://dplayer.daoapp.io/

Build yourself:

Required environment

  • Node.js
  • Mongodb

Run in development

$ npm install
$ npm run dev

Make a release

$ npm install
$ npm run build

Related Projects

Todo

  • 中英文切换

  • 微博登录

  • 锁定IP规则

  • icon 动画

LICENSE

MIT © DIYgod

评论