init page

CNAME

@@ -0,0 +1 @@
+dplayer.js.org

README.md

@@ -1,142 +0,0 @@
-# DPlayer
-
-[![npm](https://img.shields.io/npm/v/dplayer.svg?style=flat-square)](https://www.npmjs.com/package/dplayer)
-[![npm](https://img.shields.io/npm/l/dplayer.svg?style=flat-square)](https://www.npmjs.com/package/dplayer)
-[![devDependency Status](https://img.shields.io/david/dev/DIYgod/dplayer.svg?style=flat-square)](https://david-dm.org/DIYgod/DPlayer#info=devDependencies)
-[![npm](https://img.shields.io/npm/dt/dplayer.svg?style=flat-square)](https://www.npmjs.com/package/dplayer)
-[![Travis](https://img.shields.io/travis/DIYgod/DPlayer.svg?style=flat-square)](https://travis-ci.org/DIYgod/DPlayer)
-[![%e2%9d%a4](https://img.shields.io/badge/made%20with-%e2%9d%a4-ff69b4.svg?style=flat-square)](https://www.anotherhome.net/)
-
-> Wow, such a lovely HTML5 danmaku video player
-
-## Introduction
-
-[Demo](http://diygod.github.io/DPlayer/demo/)
-
-Screenshot
-![image](http://i.imgur.com/207ch36.jpg)
-
-## Install
-
-```
-$ npm install dplayer --save
-```
-
-## Usage
-
-### HTML
-
-```HTML
-<link rel="stylesheet" href="DPlayer.min.css">
-<!-- ... -->
-<div id="player1" class="dplayer"></div>
-<!-- ... -->
-<script src="DPlayer.min.js"></script>
-```
-
-### JS
-
-```JS
-var dp = new DPlayer(option);
-dp.init();
-```
-
-**Options**
-
-```JS
-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
-        maximum: 1000                                                  // Optional, maximum quantity of danmaku
-    }
-}
-```
-
-**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**
-
-```js
-var DPlayer = require('DPlayer');
-var dp = new DPlayer(option);
-dp.init();
-```
-
-### 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
-
-- [DPlayer-for-typecho](https://github.com/volio/DPlayer-for-typecho)
-- [Hexo-tag-dplayer](https://github.com/NextMoe/hexo-tag-dplayer)
-- [DPlayer_for_Z-BlogPHP](https://github.com/fghrsh/DPlayer_for_Z-BlogPHP)
-
-## Todo
-
-- [ ] 截图
-
-- [ ] 记录播放位置 记录透明度
-
-- [ ] 国际化
-
-- [ ] 微博登录
-
-- [ ] 锁定IP规则
-
-- [ ] icon 动画
-
-- [ ] 字体
-
-## LICENSE
-
-MIT © [DIYgod](http://github.com/DIYgod)

demo/danmaku.json

@@ -1,109 +0,0 @@
-{
-    "code": 1,
-    "danmaku": [
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 2.8,
-            "text": "此生无悔入",
-            "color": "#f00",
-            "type": "right"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 1.6,
-            "text": "此生无悔入四月来世愿做友人A",
-            "color": "#ff0",
-            "type": "right"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 0.4,
-            "text": "此生无悔入四月来世",
-            "color": "#f00",
-            "type": "right"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 0.8,
-            "text": "此生无悔入四月来世愿做友人A此生无悔入四月来世愿做",
-            "color": "#0f0",
-            "type": "right"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 1.2,
-            "text": "此生无悔入四月来世愿做友人",
-            "color": "#00f",
-            "type": "right"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 2.0,
-            "text": "此生无悔入四月来世愿做友人A",
-            "color": "#f0f",
-            "type": "right"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 2.4,
-            "text": "此生无悔入四月来世愿做友人A",
-            "color": "#0ff",
-            "type": "right"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 2.4,
-            "text": "此生无悔入四月来世",
-            "color": "#f00",
-            "type": "top"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 2.8,
-            "text": "此生无悔入四月",
-            "color": "#0f0",
-            "type": "top"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 4.0,
-            "text": "此生无悔入四月来世愿做友人A",
-            "color": "#ff0",
-            "type": "top"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 4.0,
-            "text": "此生无悔入四做友人A",
-            "color": "#f0f",
-            "type": "top"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 6,
-            "text": "此生无悔入",
-            "color": "#f00",
-            "type": "bottom"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 6.4,
-            "text": "此生无悔入四月来世愿做友人A",
-            "color": "#f0f",
-            "type": "bottom"
-        }
-    ]
-}

gulpfile.js

@@ -1,72 +0,0 @@
-var gulp        = require('gulp');
-var sass        = require('gulp-sass');
-var prefix      = require('gulp-autoprefixer');
-var uglify      = require('gulp-uglify');
-var concat      = require('gulp-concat');
-var cssNano     = require('gulp-cssnano');
-var rename      = require('gulp-rename');
-var babel       = require("gulp-babel");
-var sourcemaps  = require("gulp-sourcemaps");
-var browserSync = require('browser-sync').create();
-
-// Launch the server
-gulp.task('browser-sync', function() {
-    browserSync.init({
-        server: {
-            baseDir: './'
-        },
-        startPath: '/demo'
-    });
-});
-
-// Move files
-gulp.task('copy', function () {
-    gulp.src('src/font/*')
-        .pipe(gulp.dest('dist/font'));
-    gulp.src(['src/*.jpg', 'src/*.png'])
-        .pipe(gulp.dest('dist'));
-});
-
-// Build js files
-gulp.task('compressJS', function() {
-    gulp.src(['src/*.js'])
-        .pipe(sourcemaps.init())
-        .pipe(babel({
-            presets: ['es2015']
-        }))
-        .pipe(uglify())
-        .pipe(rename({
-            suffix: ".min"
-        }))
-        .pipe(sourcemaps.write("."))
-        .pipe(gulp.dest('dist'))
-        .pipe(browserSync.stream());
-});
-
-// Build css files
-gulp.task('compressCSS', function() {
-    gulp.src('src/*.scss')
-        .pipe(sass().on('error', sass.logError))
-        .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
-        .pipe(cssNano())
-        .pipe(rename({
-            suffix: ".min"
-        }))
-        .pipe(gulp.dest('dist'))
-        .pipe(browserSync.stream());
-});
-
-// Watch files for changes & recompile
-gulp.task('watch', function () {
-    gulp.watch(['src/*.js'], ['compressJS']);
-    gulp.watch(['src/*.scss'], ['compressCSS']);
-    gulp.watch('demo/*.html').on('change', browserSync.reload);
-    gulp.watch('demo2/*.html').on('change', browserSync.reload);
-    gulp.watch('demo/font/*', ['copy']);
-});
-
-// compile the project, including move font, compress js and scss, also be used to test
-gulp.task('release', ['copy', 'compressJS', 'compressCSS']);
-
-// Default task, running just `gulp` will move font, compress js and scss, launch server, watch files.
-gulp.task('default', ['release', 'browser-sync', 'watch']);

demo/index.html → index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <title>DPlayer Demo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="../dist/DPlayer.min.css">
+    <link rel="stylesheet" href="DPlayer.min.css">
     <style>
         body {
             font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -55,7 +55,7 @@
     <div class="dplayer"></div>
 </div>
 <script src="https://rawgit.com/mrdoob/stats.js/master/build/stats.min.js"></script>
-<script src="../dist/DPlayer.min.js"></script>
+<script src="DPlayer.min.js"></script>
 <script>
     var dp = new DPlayer({
         element: document.getElementsByClassName('dplayer')[0],

nodejs/Dockerfile

@@ -1,3 +0,0 @@
-FROM node:4.4-onbuild
-EXPOSE 1207
-ENTRYPOINT node index.js

nodejs/blacklist

@@ -1,3 +0,0 @@
-Can be username and IP
-username
-0.0.0.0

nodejs/index.js

@@ -1,268 +0,0 @@
-var url = require('url');
-var fs = require('fs');
-var mongoose = require('mongoose');
-var express = require('express');
-var app = express();
-
-var log4js = require('log4js');
-log4js.configure({
-    appenders: [
-        {
-            type: "file",
-            filename: 'DPlayer.log',
-            maxLogSize: 20480,
-            backups: 3,
-            category: [ 'DPlayer','console' ]
-        },
-        {
-            type: "console"
-        }
-    ],
-    replaceConsole: true
-});
-var logger = log4js.getLogger('DPlayer');
-logger.setLevel('INFO');
-logger.info(`🍻 DPlayer start! Cheers!`);
-
-function htmlEncode(str) {
-    return str.replace(/&/g, "&")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;")
-        .replace(/"/g, "&quot;")
-        .replace(/'/g, "&#x27;")
-        .replace(/\//g, "&#x2f;");
-}
-
-var postIP = [];
-
-var mongodbUrl;
-if (process.env.MONGODB_USERNAME && process.env.MONGODB_PASSWORD && process.env.MONGODB_PORT_27017_TCP_ADDR && process.env.MONGODB_PORT_27017_TCP_PORT && process.env.MONGODB_INSTANCE_NAME) {
-    mongodbUrl = 'mongodb://' + process.env.MONGODB_USERNAME + ':' + process.env.MONGODB_PASSWORD + '@' + process.env.MONGODB_PORT_27017_TCP_ADDR + ':' + process.env.MONGODB_PORT_27017_TCP_PORT + '/' + process.env.MONGODB_INSTANCE_NAME;
-}
-else {
-    mongodbUrl = 'mongodb://localhost:27017/danmaku';
-}
-
-var danmakuSchema = new mongoose.Schema({
-    player: {
-        type: [String], index: true
-    },
-    author: String,
-    time: Number,
-    text: String,
-    color: String,
-    type: String
-});
-var danmaku = mongoose.model('dan', danmakuSchema);
-
-app.all('*', function(req, res, next) {
-    res.header('Access-Control-Allow-Origin', '*');
-    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
-    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
-
-    if (req.method == 'OPTIONS') {
-        res.send(200);
-    }
-    else {
-        next();
-    }
-});
-
-app.get('/', function (req, res) {
-    var ip = req.headers['x-forwarded-for'] ||
-             req.connection.remoteAddress ||
-             req.socket.remoteAddress ||
-             req.connection.socket.remoteAddress;
-    logger.info(`GET form IP: ${ip}`);
-
-    mongoose.connect(mongodbUrl);
-    var db = mongoose.connection;
-    db.on('error', errorListener);
-
-    var query = url.parse(req.url,true).query;
-    var id = query.id;
-    var max = query.max;
-    var length;
-    db.once('open', function() {
-        cleanListener();
-        danmaku.find({player: id}, function (err, data) {
-            if (err) {
-                logger.error(err);
-            }
-
-            var json = `{"code": 1,"danmaku":[`;
-            length = max ? Math.min(data.length, max) : data.length;
-            for (var i = 0; i < length; i++) {
-                json += JSON.stringify(data[i]);
-                if (i !== length - 1) {
-                    json += `,`;
-                }
-            }
-            json += `]}`;
-            res.send(json);
-            db.close();
-        })
-    });
-
-    function errorListener (err) {
-        cleanListener();
-        logger.error(err);
-        res.send(`{"code": 0, "msg": "Error happens, please contact system administrator."}`);
-    }
-
-    function cleanListener () {
-        db.removeListener('error', errorListener);
-    }
-});
-
-app.post('/', function (req, res) {
-    var body = '';
-    var jsonStr;
-    var db;
-    var ip = req.headers['x-forwarded-for'] ||
-             req.connection.remoteAddress ||
-             req.socket.remoteAddress ||
-             req.connection.socket.remoteAddress;
-
-    // check black ip
-    var blanklist = fs.readFileSync('blacklist').toString().split('\n');
-    if (blanklist.indexOf(ip.split(',')[0]) !== -1) {
-        logger.info(`Reject POST form ${ip} for black ip.`);
-        res.send(`{"code": -1, "msg": "Rejected for black ip."}`);
-        return;
-    }
-
-    // frequency limitation
-    if (postIP.indexOf(ip) !== -1) {
-        logger.info(`Reject POST form ${ip} for frequent operation.`);
-        res.send(`{"code": -2, "msg": "Rejected for frequent operation."}`);
-        return;
-    }
-    else {
-        postIP.push(ip);
-        setTimeout(function () {
-            postIP.splice(0, 1);
-        }, 1000);
-    }
-
-    req.on('data', dataListener);
-    req.on('end', endListener);
-
-    function dataListener (chunk) {
-        body += chunk;
-    }
-    function endListener () {
-        cleanListener();
-        try {
-            jsonStr = JSON.parse(body);
-        } catch (err) {
-            jsonStr = null;
-        }
-
-        // check data
-        if (jsonStr.player === undefined
-            || jsonStr.author === undefined
-            || jsonStr.time === undefined
-            || jsonStr.text === undefined
-            || jsonStr.color === undefined
-            || jsonStr.type === undefined
-            || jsonStr.text.length >= 30) {
-            logger.info(`Reject POST form ${ip} for illegal data: ${JSON.stringify(jsonStr)}`);
-            res.send(`{"code": -3, "msg": "Rejected for illegal data"}`);
-            return;
-        }
-        
-        // check token: set it yourself
-        function checkToken (token) {
-            return true;
-        }
-        if (!checkToken(jsonStr.token)) {
-            logger.info(`Rejected POST form ${ip} for illegal token: ${jsonStr.token}`);
-            res.send(`{"code": -4, "msg": "Rejected for illegal token: ${jsonStr.token}"}`);
-            return;
-        }
-
-        // check black username
-        if (blanklist.indexOf(jsonStr.author) !== -1) {
-            logger.info(`Reject POST form ${jsonStr.author} for black user.`);
-            res.send(`{"code": -5, "msg": "Rejected for black user."}`);
-            return;
-        }
-
-        logger.info(`POST form ${ip}, data: ${JSON.stringify(jsonStr)}`);
-
-        mongoose.connect(mongodbUrl);
-        db = mongoose.connection;
-        db.on('error', errorListener);
-        db.once('open', function() {
-            cleandbListener();
-
-            var dan = new danmaku({
-                player: htmlEncode(jsonStr.player),
-                author: htmlEncode(jsonStr.author),
-                time: jsonStr.time,
-                text: htmlEncode(jsonStr.text),
-                color: htmlEncode(jsonStr.color),
-                type: htmlEncode(jsonStr.type)
-            });
-            dan.save(function (err, d) {
-                if (err) {
-                    logger.error(err);
-                    res.send(`{"code": 0, "msg": "Error happens, please contact system administrator."}`);
-                }
-                else {
-                    res.send(`{"code": 1, "data": ${JSON.stringify(d)}}`);
-                }
-                db.close();
-            });
-        });
-    }
-
-    function errorListener (err) {
-        cleandbListener();
-        logger.error(err);
-        res.send(`{"code": 0, "msg": "Error happens, please contact system administrator."}`);
-    }
-
-    function cleandbListener () {
-        db.removeListener('error', errorListener);
-    }
-    function cleanListener () {
-        req.removeListener('data', dataListener);
-        req.removeListener('end', endListener);
-    }
-});
-
-app.get('/list', function (req, res) {
-    mongoose.connect(mongodbUrl);
-    var db = mongoose.connection;
-    db.on('error', errorListener);
-
-    db.once('open', function() {
-        cleanListener();
-        danmaku.distinct('player', function (err, data) {
-            if (err) {
-                logger.error(err);
-            }
-
-            var json = ``;
-            for (var i = 0; i < data.length; i++) {
-                json += data[i] + `<br>`;
-            }
-            res.send(json);
-            db.close();
-        })
-    });
-
-    function errorListener (err) {
-        cleanListener();
-        logger.error(err);
-        res.send(`{"code": 0, "msg": "Error happens, please contact system administrator."}`);
-    }
-
-    function cleanListener () {
-        db.removeListener('error', errorListener);
-    }
-});
-
-app.listen(1207);

nodejs/package.json

@@ -1,14 +0,0 @@
-{
-  "name": "DPlayer_nodejs",
-  "version": "0.0.1",
-  "description": "",
-  "main": "index.js",
-  "author": "DIYgod",
-  "license": "MIT",
-  "devDependencies": {},
-  "dependencies": {
-    "express": "^4.13.4",
-    "log4js": "^0.6.36",
-    "mongoose": "^4.1.9"
-  }
-}

package.json

@@ -1,40 +0,0 @@
-{
-  "name": "dplayer",
-  "version": "1.0.0",
-  "description": "Wow, such a lovely HTML5 danmaku video player",
-  "main": "dist/DPlayer.min.js",
-  "scripts": {
-    "test": "gulp release",
-    "dev": "gulp",
-    "build": "gulp release"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/DIYgod/DPlayer.git"
-  },
-  "keywords": [
-    "player",
-    "danmaku",
-    "video",
-    "html5"
-  ],
-  "author": "DIYgod",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/DIYgod/DPlayer/issues"
-  },
-  "homepage": "https://github.com/DIYgod/DPlayer#readme",
-  "devDependencies": {
-    "babel-preset-es2015": "^6.6.0",
-    "browser-sync": "^2.12.4",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.0",
-    "gulp-babel": "^6.1.2",
-    "gulp-concat": "^2.6.0",
-    "gulp-cssnano": "^2.1.2",
-    "gulp-rename": "^1.2.2",
-    "gulp-sass": "^2.3.1",
-    "gulp-sourcemaps": "^1.6.0",
-    "gulp-uglify": "^1.5.3"
-  }
-}

src/DPlayer.scss

@@ -1,1000 +0,0 @@
-.dplayer {
-    position: relative;
-    overflow: hidden;
-    user-select: none;
-    line-height: 1;
-
-    &:-webkit-full-screen {
-        width: 100%;
-        height: 100%;
-        background: #000;
-
-        .dplayer-danmaku {
-            .dplayer-danmaku-top,
-            .dplayer-danmaku-bottom {
-                &.dplayer-danmaku-move {
-                    animation: danmaku-center 6s linear;
-                    animation-play-state: paused;
-                }
-            }
-
-            .dplayer-danmaku-right {
-                &.dplayer-danmaku-move {
-                    animation: danmaku 8s linear;
-                    animation-play-state: paused;
-                }
-            }
-        }
-    }
-
-    &.dplayer-no-danmaku {
-        .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box {
-            height: 60px;
-        }
-
-        .dplayer-controller .dplayer-icons .dplayer-comment {
-            display: none;
-        }
-
-        .dplayer-danmaku {
-            display: none;
-        }
-    }
-
-    &.dplayer-playing {
-        .dplayer-controller-mask {
-            opacity: 0;
-        }
-        .dplayer-controller {
-            opacity: 0;
-        }
-
-        .dplayer-danmaku .dplayer-danmaku-move {
-            animation-play-state: running !important;
-        }
-
-        &:hover {
-            .dplayer-controller-mask {
-                opacity: 1;
-            }
-            .dplayer-controller {
-                opacity: 1;
-            }
-        }
-    }
-
-    &.dplayer-loading {
-        .dplayer-bezel .diplayer-loading-icon {
-            display: block;
-        }
-
-        .dplayer-danmaku .dplayer-danmaku-move {
-            animation-play-state: paused !important;
-        }
-    }
-
-    &.dplayer-hide-controller {
-        .dplayer-controller-mask {
-            opacity: 0;
-            transform: translateY(100%);
-        }
-        .dplayer-controller {
-            opacity: 0;
-            transform: translateY(100%);
-        }
-    }
-    &.dplayer-show-controller {
-        .dplayer-controller-mask {
-            opacity: 1;
-        }
-        .dplayer-controller {
-            opacity: 1;
-        }
-    }
-
-    .dplayer-mask {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        z-index: 1;
-        display: none;
-
-        &.dplayer-mask-show {
-            display: block;
-        }
-    }
-
-    .dplayer-video-wrap {
-        position: relative;
-        background: #000;
-        font-size: 0;
-        width: 100%;
-        height: 100%;
-
-        .dplayer-video {
-            width: 100%;
-            height: 100%;
-        }
-    }
-
-    .dplayer-danmaku {
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        font-size: 22px;
-        color: #fff;
-
-        .dplayer-danmaku-item {
-            display: inline-block;
-            pointer-events: none;
-            user-select: none;
-            cursor: default;
-            white-space: nowrap;
-            font-weight: bolder;
-            text-shadow: .5px .5px .5px rgba(0,0,0,.5);
-        }
-
-        .dplayer-danmaku-right {
-            position: absolute;
-            right: 0;
-            transform: translateX(100%);
-
-            &.dplayer-danmaku-move {
-                will-change: transform;
-                animation: danmaku 5s linear;
-                animation-play-state: paused;
-            }
-        }
-
-        @keyframes danmaku {
-            from {
-                transform: translateX(100%);
-            }
-        }
-
-        .dplayer-danmaku-top,
-        .dplayer-danmaku-bottom {
-            position: absolute;
-            width: 100%;
-            text-align: center;
-            visibility: hidden;
-
-            &.dplayer-danmaku-move {
-                will-change: visibility;
-                animation: danmaku-center 4s linear;
-                animation-play-state: paused;
-            }
-        }
-
-        @keyframes danmaku-center {
-            from {
-                visibility: visible;
-            }
-            to {
-                visibility: visible;
-            }
-        }
-    }
-
-    .dplayer-bezel {
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        font-size: 22px;
-        color: #fff;
-        pointer-events: none;
-
-        .dplayer-fill {
-            fill: rgba(255, 255, 255, .8);
-        }
-
-        .dplayer-bezel-icon {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            margin: -26px 0 0 -26px;
-            height: 52px;
-            width: 52px;
-            padding: 12px;
-            box-sizing: border-box;
-            background: rgba(0, 0, 0, .5);
-            border-radius: 50%;
-            opacity: 0;
-            pointer-events: none;
-
-            &.dplayer-bezel-transition {
-                animation: bezel-hide .5s linear;
-            }
-
-            @keyframes bezel-hide {
-                from {
-                    opacity: 1;
-                    transform: scale(1);
-                }
-                to {
-                    opacity: 0;
-                    transform: scale(2);
-                }
-            }
-        }
-
-        .diplayer-loading-icon {
-            display: none;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            margin: -18px 0 0 -18px;
-            height: 36px;
-            width: 36px;
-            pointer-events: none;
-
-            .diplayer-loading-hide {
-                display: none;
-            }
-
-            .diplayer-loading-dot {
-                animation: diplayer-loading-dot-fade .8s ease infinite;
-                opacity: 0;
-                fill: #fff;
-                transform-origin: 4px 4px;
-
-                @for $i from 7 through 1 {
-                    &.diplayer-loading-dot-#{$i} {
-                        animation-delay: .1s * $i;
-                    }
-                }
-            }
-
-            @keyframes diplayer-loading-dot-fade {
-                0% {
-                    opacity:.7;
-                    transform:scale(1.2,1.2)
-                }
-                50% {
-                    opacity:.25;
-                    transform:scale(.9,.9)
-                }
-                to {
-                    opacity:.25;
-                    transform:scale(.85,.85)
-                }
-            }
-        }
-    }
-
-    .dplayer-controller-mask {
-        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
-        height: 98px;
-        width: 100%;
-        position: absolute;
-        bottom: 0;
-        transition: all 0.3s ease;
-    }
-
-    .dplayer-controller {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 41px;
-        padding: 0 20px;
-        user-select: none;
-        transition: all 0.3s ease;
-
-        .dplayer-bar-wrap {
-            padding: 5px 0;
-            cursor: pointer;
-            position: absolute;
-            bottom: 33px;
-            width: calc(100% - 40px);
-            height: 3px;
-
-            &:hover {
-                .dplayer-thumb {
-                    transform: scale(1) !important;
-                }
-            }
-
-            .dplayer-bar {
-                position: relative;
-                height: 3px;
-                width: 100%;
-                background: rgba(255, 255, 255, .2);
-                cursor: pointer !important;
-
-                .dplayer-loaded {
-                    position: absolute;
-                    left: 0;
-                    top: 0;
-                    bottom: 0;
-                    background: rgba(255, 255, 255, .4);
-                    height: 3px;
-                    transition: all 0.5s ease;
-                    will-change: width;
-                }
-
-                .dplayer-played {
-                    position: absolute;
-                    left: 0;
-                    top: 0;
-                    bottom: 0;
-                    height: 3px;
-                    will-change: width;
-
-                    .dplayer-thumb {
-                        position: absolute;
-                        top: 0;
-                        right: 5px;
-                        margin-top: -4px;
-                        margin-right: -10px;
-                        height: 11px;
-                        width: 11px;
-                        border-radius: 50%;
-                        cursor: pointer !important;
-                        transition: all .3s ease-in-out;
-                        transform: scale(0);
-                    }
-                }
-            }
-        }
-
-        .dplayer-icons {
-            height: 38px;
-            position: absolute;
-            bottom: 0;
-
-            &.dplayer-icons-left {
-                .dplayer-icon {
-                    padding: 7px;
-                }
-            }
-            &.dplayer-icons-right {
-                right: 20px;
-
-                .dplayer-icon {
-                    padding: 8px;
-                }
-            }
-
-            .dplayer-time {
-                line-height: 38px;
-                color: #eee;
-                text-shadow: 0 0 2px rgba(0,0,0,.5);
-                vertical-align: middle;
-                font-size: 13px;
-                cursor: default;
-            }
-
-            .dplayer-icon {
-                width: 46px;
-                height: 100%;
-                border: none;
-                background-color: transparent;
-                outline: none;
-                cursor: pointer;
-                opacity: .8;
-                transition: all .2s ease-in-out;
-                vertical-align: middle;
-
-                &:hover {
-                    opacity: 1;
-                }
-
-                &.dplayer-comment-icon {
-                    padding: 10px 9px 9px;
-                }
-
-                &.dplayer-setting-icon {
-                    padding-top: 8.5px;
-                }
-            }
-
-            .dplayer-fill {
-                fill: #fff;
-            }
-
-            .dplayer-volume {
-                position: relative;
-                display: inline-block;
-                cursor: pointer !important;
-                height: 100%;
-
-                &:hover {
-                    .dplayer-volume-bar {
-                        width: 45px !important;
-                    }
-
-                    .dplayer-thumb {
-                        transform: scale(1) !important;
-                    }
-                }
-
-                &.dplayer-volume-active {
-                    .dplayer-volume-bar {
-                        width: 45px !important;
-                    }
-
-                    .dplayer-thumb {
-                        transform: scale(1) !important;
-                    }
-                }
-
-                .dplayer-volume-bar-wrap {
-                    display: inline-block;
-                    margin: 0 5px 0 -5px;
-                    vertical-align: middle;
-                    height: 100%;
-
-                    .dplayer-volume-bar {
-                        position: relative;
-                        top: 17px;
-                        width: 0;
-                        height: 3px;
-                        background: #aaa;
-                        transition: all 0.3s ease-in-out;
-
-                        .dplayer-volume-bar-inner {
-                            position: absolute;
-                            bottom: 0;
-                            left: 0;
-                            height: 100%;
-                            transition: all 0.1s ease;
-                            will-change: width;
-
-                            .dplayer-thumb {
-                                position: absolute;
-                                top: 0;
-                                right: 5px;
-                                margin-top: -4px;
-                                margin-right: -10px;
-                                height: 11px;
-                                width: 11px;
-                                border-radius: 50%;
-                                cursor: pointer !important;
-                                transition: all .3s ease-in-out;
-                                transform: scale(0);
-                            }
-                        }
-                    }
-                }
-            }
-
-            .dplayer-setting {
-                display: inline-block;
-                height: 100%;
-
-                .dplayer-setting-box {
-                    position: absolute;
-                    right: 0;
-                    bottom: 50px;
-                    transform: translateX(170px);
-                    width: 150px;
-                    height: 90px;
-                    border-radius: 2px;
-                    background: rgba(28, 28, 28, 0.9);
-                    padding: 7px 0;
-                    transition: all .3s ease-in-out;
-                    overflow: hidden;
-                    z-index: 2;
-
-                    &.dplayer-setting-box-open {
-                        transform: translateX(0);
-                    }
-
-                    &.dplayer-setting-box-narrow {
-                        width: 70px;
-                        height: 180px;
-                        text-align: center;
-                    }
-                }
-
-                .dplayer-setting-item,
-                .dplayer-setting-speed-item {
-                    height: 30px;
-                    padding: 5px 10px;
-                    box-sizing: border-box;
-                    cursor: pointer;
-
-                    &:hover {
-                        background-color: rgba(255,255,255,.1);
-                    }
-                }
-
-                .dplayer-setting-danmaku {
-                    padding: 5px 0;
-
-                    .dplayer-label {
-                        padding: 0 10px;
-                        display: inline;
-                    }
-
-                    &:hover {
-                        .dplayer-label {
-                            display: none;
-                        }
-                        .dplayer-danmaku-bar-wrap {
-                            display: inline-block;
-                        }
-                    }
-
-                    &.dplayer-setting-danmaku-active {
-                        .dplayer-label {
-                            display: none;
-                        }
-                        .dplayer-danmaku-bar-wrap {
-                            display: inline-block;
-                        }
-                    }
-
-                    .dplayer-danmaku-bar-wrap {
-                        padding: 0 10px;
-                        box-sizing: border-box;
-                        display: none;
-                        vertical-align: middle;
-                        height: 100%;
-                        width: 100%;
-
-                        .dplayer-danmaku-bar {
-                            position: relative;
-                            top: 8.5px;
-                            width: 100%;
-                            height: 3px;
-                            background: #fff;
-                            transition: all 0.3s ease-in-out;
-
-                            .dplayer-danmaku-bar-inner {
-                                position: absolute;
-                                bottom: 0;
-                                left: 0;
-                                height: 100%;
-                                transition: all 0.1s ease;
-                                background: #aaa;
-                                will-change: width;
-
-                                .dplayer-thumb {
-                                    position: absolute;
-                                    top: 0;
-                                    right: 5px;
-                                    margin-top: -4px;
-                                    margin-right: -10px;
-                                    height: 11px;
-                                    width: 11px;
-                                    border-radius: 50%;
-                                    cursor: pointer !important;
-                                    transition: all .3s ease-in-out;
-                                    background: #aaa;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-
-            .dplayer-comment {
-                display: inline-block;
-                height: 100%;
-
-                .dplayer-comment-box {
-                    position: absolute;
-                    right: 0;
-                    bottom: 50px;
-                    transform: translateX(382px);
-                    border-radius: 2px;
-                    transition: all .3s ease-in-out;
-                    z-index: 2;
-
-                    &.dplayer-comment-box-open {
-                        transform: translateX(0);
-                    }
-
-                    .dplayer-comment-setting-icon {
-                        height: 24px;
-                        width: 24px;
-                        position: absolute;
-                        top: 5px;
-                        left: 7px;
-                        padding: 0;
-                        opacity: 1;
-
-                        &:hover {
-                            .dplayer-fill {
-                                fill: #aaa;
-                            }
-                        }
-
-                        .dplayer-fill {
-                            transition: all .2s ease-in-out;
-                            fill: #ddd;
-                        }
-                    }
-
-                    .dplayer-comment-setting-box {
-                        position: absolute;
-                        background: #fff;
-                        bottom: 40px;
-                        left: -82.5px;
-                        box-shadow: 0 0 25px rgba(0,0,0,.3);
-                        border-radius: 4px;
-                        padding: 5px;
-                        font-size: 14px;
-                        width: 193px;
-                        transition: all .3s ease-in-out;
-                        transform: scale(0);
-
-                        &.dplayer-comment-setting-open {
-                            transform: scale(1);
-                        }
-
-                        &::after {
-                            content: '';
-                            position: absolute;
-                            top: 100%;
-                            left: 50%;
-                            margin-left: -12px;
-                            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 12"><path fill="#FFF" d="M23.7,0c-1.2,0-2.4,0.5-3.2,1.3l-7.7,7.8c-0.4,0.4-1.1,0.4-1.5,0L3.5,1.3C2.7,0.5,1.5,0,0.3,0"/></svg>');
-                            width: 24px;
-                            height: 12px;
-                        }
-
-                        input[type=radio] {
-                            display: none;
-                        }
-
-                        label {
-                            cursor: pointer;
-                        }
-
-                        .dplayer-comment-setting-type {
-                            width: 44px;
-                            float: left;
-                            margin-right: 5px;
-
-                            span {
-                                padding: 4px 6px;
-                                line-height: 16px;
-                                display: inline-block;
-                                border-radius: 4px;
-
-                                &:hover {
-                                    animation: my-face 5s infinite ease-in-out;
-                                }
-                            }
-
-                            input:checked+span {
-                                background: #aaa;
-                                color: #FFF;
-                            }
-                        }
-
-                        .dplayer-comment-setting-color {
-                            font-size: 0;
-
-                            label {
-                                font-size: 0;
-                                padding: 6px;
-                                display: inline-block;
-                            }
-
-                            span {
-                                width: 24px;
-                                height: 24px;
-                                display: inline-block;
-                                border-radius: 7px;
-                                box-sizing: border-box;
-                                cursor: pointer;
-
-                                &:hover {
-                                    animation: my-face 5s infinite ease-in-out;
-                                    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
-                                }
-                            }
-
-                            input:checked+span {
-                                box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
-                                border: none !important;
-                            }
-                        }
-                    }
-
-                    .dplayer-comment-input {
-                        outline: none;
-                        border: none;
-                        padding: 8px 31px;
-                        font-size: 14px;
-                        line-height: 18px;
-                        text-align: center;
-                        border-radius: 4px;
-                        width: 300px;
-                    }
-
-                    .dplayer-send-icon {
-                        height: 22px;
-                        width: 22px;
-                        position: absolute;
-                        top: 6px;
-                        right: 7px;
-                        padding: 0;
-                        opacity: 1;
-
-                        &:hover {
-                            .dplayer-fill {
-                                fill: #aaa;
-                            }
-                        }
-
-                        .dplayer-fill {
-                            transition: all .2s ease-in-out;
-                            fill: #ddd;
-                        }
-                    }
-                }
-            }
-
-            .dplayer-label {
-                color: #eee;
-                font-size: 13px;
-                display: inline-block;
-                vertical-align: middle;
-            }
-
-            .dplayer-toggle {
-                width: 32px;
-                height: 100%;
-                text-align: center;
-                display: inline-block;
-                font-size: 0;
-                vertical-align: middle;
-                float: right;
-            }
-
-            input#dplayer-toggle {
-                max-height: 0;
-                max-width: 0;
-                display: none;
-            }
-            input#dplayer-toggle + label {
-                display: inline-block;
-                position: relative;
-                box-shadow: rgb(223, 223, 223) 0 0 0 0 inset;
-                border: 1px solid rgb(223, 223, 223);
-                height: 20px;
-                width: 32px;
-                border-radius: 10px;
-                box-sizing: border-box;
-                cursor: pointer;
-                transition: .2s ease-in-out;
-            }
-
-            input#dplayer-toggle + label:before {
-                content: "";
-                position: absolute;
-                display: block;
-                height: 18px;
-                width: 18px;
-                top: 0;
-                left: 0;
-                border-radius: 15px;
-                transition: .2s ease-in-out;
-            }
-
-            input#dplayer-toggle + label:after {
-                content: "";
-                position: absolute;
-                display: block;
-                left: 0;
-                top: 0;
-                border-radius: 15px;
-                background: #fff;
-                transition: .2s ease-in-out;
-                box-shadow: 0 1px 3px rgba(0,0,0,0.4);
-                height: 18px;
-                width: 18px;
-            }
-
-            input#dplayer-toggle:checked + label {
-                border-color: rgba(255, 255, 255, 0.5);
-            }
-
-            input#dplayer-toggle:checked + label:before {
-                width: 30px;
-                background: rgba(255, 255, 255, 0.5);
-            }
-
-            input#dplayer-toggle:checked + label:after {
-                left: 12px;
-            }
-        }
-    }
-
-    .dplayer-menu {
-        position: absolute;
-        width: 150px;
-        border-radius: 2px;
-        background: rgba(28, 28, 28, 0.9);
-        padding: 5px 0;
-        overflow: hidden;
-        z-index: 3;
-        display: none;
-
-        &.dplayer-menu-show {
-            display: block;
-        }
-
-        .dplayer-menu-item {
-            height: 30px;
-            padding: 5px 10px;
-            box-sizing: border-box;
-            cursor: pointer;
-
-            &:hover {
-                background-color: rgba(255,255,255,.1);
-            }
-
-            .dplayer-menu-label a {
-                color: #eee;
-                font-size: 13px;
-                display: inline-block;
-                vertical-align: middle;
-            }
-        }
-    }
-}
-
-@keyframes my-face {
-    2% {
-        transform: translate(0, 1.5px) rotate(1.5deg);
-    }
-    4% {
-        transform: translate(0, -1.5px) rotate(-0.5deg);
-    }
-    6% {
-        transform: translate(0, 1.5px) rotate(-1.5deg);
-    }
-    8% {
-        transform: translate(0, -1.5px) rotate(-1.5deg);
-    }
-    10% {
-        transform: translate(0, 2.5px) rotate(1.5deg);
-    }
-    12% {
-        transform: translate(0, -0.5px) rotate(1.5deg);
-    }
-    14% {
-        transform: translate(0, -1.5px) rotate(1.5deg);
-    }
-    16% {
-        transform: translate(0, -0.5px) rotate(-1.5deg);
-    }
-    18% {
-        transform: translate(0, 0.5px) rotate(-1.5deg);
-    }
-    20% {
-        transform: translate(0, -1.5px) rotate(2.5deg);
-    }
-    22% {
-        transform: translate(0, 0.5px) rotate(-1.5deg);
-    }
-    24% {
-        transform: translate(0, 1.5px) rotate(1.5deg);
-    }
-    26% {
-        transform: translate(0, 0.5px) rotate(0.5deg);
-    }
-    28% {
-        transform: translate(0, 0.5px) rotate(1.5deg);
-    }
-    30% {
-        transform: translate(0, -0.5px) rotate(2.5deg);
-    }
-    32% {
-        transform: translate(0, 1.5px) rotate(-0.5deg);
-    }
-    34% {
-        transform: translate(0, 1.5px) rotate(-0.5deg);
-    }
-    36% {
-        transform: translate(0, -1.5px) rotate(2.5deg);
-    }
-    38% {
-        transform: translate(0, 1.5px) rotate(-1.5deg);
-    }
-    40% {
-        transform: translate(0, -0.5px) rotate(2.5deg);
-    }
-    42% {
-        transform: translate(0, 2.5px) rotate(-1.5deg);
-    }
-    44% {
-        transform: translate(0, 1.5px) rotate(0.5deg);
-    }
-    46% {
-        transform: translate(0, -1.5px) rotate(2.5deg);
-    }
-    48% {
-        transform: translate(0, -0.5px) rotate(0.5deg);
-    }
-    50% {
-        transform: translate(0, 0.5px) rotate(0.5deg);
-    }
-    52% {
-        transform: translate(0, 2.5px) rotate(2.5deg);
-    }
-    54% {
-        transform: translate(0, -1.5px) rotate(1.5deg);
-    }
-    56% {
-        transform: translate(0, 2.5px) rotate(2.5deg);
-    }
-    58% {
-        transform: translate(0, 0.5px) rotate(2.5deg);
-    }
-    60% {
-        transform: translate(0, 2.5px) rotate(2.5deg);
-    }
-    62% {
-        transform: translate(0, -0.5px) rotate(2.5deg);
-    }
-    64% {
-        transform: translate(0, -0.5px) rotate(1.5deg);
-    }
-    66% {
-        transform: translate(0, 1.5px) rotate(-0.5deg);
-    }
-    68% {
-        transform: translate(0, -1.5px) rotate(-0.5deg);
-    }
-    70% {
-        transform: translate(0, 1.5px) rotate(0.5deg);
-    }
-    72% {
-        transform: translate(0, 2.5px) rotate(1.5deg);
-    }
-    74% {
-        transform: translate(0, -0.5px) rotate(0.5deg);
-    }
-    76% {
-        transform: translate(0, -0.5px) rotate(2.5deg);
-    }
-    78% {
-        transform: translate(0, -0.5px) rotate(1.5deg);
-    }
-    80% {
-        transform: translate(0, 1.5px) rotate(1.5deg);
-    }
-    82% {
-        transform: translate(0, -0.5px) rotate(0.5deg);
-    }
-    84% {
-        transform: translate(0, 1.5px) rotate(2.5deg);
-    }
-    86% {
-        transform: translate(0, -1.5px) rotate(-1.5deg);
-    }
-    88% {
-        transform: translate(0, -0.5px) rotate(2.5deg);
-    }
-    90% {
-        transform: translate(0, 2.5px) rotate(-0.5deg);
-    }
-    92% {
-        transform: translate(0, 0.5px) rotate(-0.5deg);
-    }
-    94% {
-        transform: translate(0, 2.5px) rotate(0.5deg);
-    }
-    96% {
-        transform: translate(0, -0.5px) rotate(1.5deg);
-    }
-    98% {
-        transform: translate(0, -1.5px) rotate(-0.5deg);
-    }
-    0%, 100% {
-        transform: translate(0, 0) rotate(0deg);
-    }
-}