1. new parameter: danmaku.maximum

2. rm svg shadow
3. new menu item
4. more intensive danmaku
5. alert error
6. fix some bugs

README.md

@@ -11,8 +11,6 @@
 
 ## Introduction
 
-**Notice:** This player is still under development.
-
 [Demo](http://diygod.github.io/DPlayer/demo/)
 
 Screenshot
@@ -58,7 +56,8 @@ var option = {
     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
+        token: 'tokendemo',                                            // Optional, danmaku token for api
+        maximum: 1000                                                  // Optional, maximum quantity of danmaku
     }
 }
 ```
@@ -85,9 +84,8 @@ var option = {
 
 ```js
 var DPlayer = require('DPlayer');
-var dp = new DPlayer({
-    // ...
-});
+var dp = new DPlayer(option);
+dp.init();
 ```
 
 ### Danmaku back-end
@@ -124,6 +122,8 @@ $ npm run build
 
 ## Todo
 
+- [ ] 记录播放位置 记录透明度
+
 - [ ] 中英文切换
 
 - [ ] 微博登录
@@ -132,6 +132,8 @@ $ npm run build
 
 - [ ] icon 动画
 
+- [ ] 字体
+
 ## LICENSE
 
 MIT © [DIYgod](http://github.com/DIYgod)

demo/index.html

@@ -68,7 +68,8 @@
         danmaku: {
             id: '9E2E3368B56CDBB4',
             api: 'https://dplayer.daoapp.io/',
-            token: 'tokendemo'
+            token: 'tokendemo',
+            maximum: 1000
         }
     });
     dp.init();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dplayer",
-  "version": "0.1.4",
+  "version": "1.0.0",
   "description": "Wow, such a lovely HTML5 danmaku video player",
   "main": "dist/DPlayer.min.js",
   "scripts": {

src/DPlayer.js

@@ -25,7 +25,7 @@
             this.getSVG = (type) => {
                 return `
                     <svg xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" version="1.1" viewBox="${this.svg[type][0]}" width="100%">
-                        <use class="dplayer-svg-shadow" xlink:href="#dplayer-${type}"></use>
+                        <use xlink:href="#dplayer-${type}"></use>
                         <path class="dplayer-fill" d="${this.svg[type][1]}" id="dplayer-${type}"></path>
                     </svg>
                 `;
@@ -248,6 +248,7 @@
                 </div>
                 <div class="dplayer-menu">
                     <div class="dplayer-menu-item"><span class="dplayer-menu-label"><a target="_blank" href="http://diygod.me/">关于作者</a></span></div>
+                    <div class="dplayer-menu-item"><span class="dplayer-menu-label"><a target="_blank" href="https://github.com/DIYgod/DPlayer/issues">播放器意见反馈</a></span></div>
                     <div class="dplayer-menu-item"><span class="dplayer-menu-label"><a target="_blank" href="https://github.com/DIYgod/DPlayer">关于 DPlayer 播放器</a></span></div>
                 </div>
             `;
@@ -328,7 +329,7 @@
             let barWidth;
 
             if (this.option.danmaku) {
-                this.audio.addEventListener('seeked', () => {
+                this.audio.addEventListener('seeking', () => {
                     for (let i = 0; i < this.dan.length; i++) {
                         if (this.dan[i].time >= this.audio.currentTime) {
                             this.danIndex = i;
@@ -343,57 +344,42 @@
             let currentPlayPos = 0;
             let bufferingDetected = false;
             this.setTime = () => {
-                if (this.option.danmaku) {
-                    this.playedTime = setInterval(() => {
-                        // whether the video is buffering
-                        currentPlayPos = this.audio.currentTime;
-                        if (!bufferingDetected
-                            && currentPlayPos < (lastPlayPos + 0.01)
-                            && !this.audio.paused) {
-                            this.element.classList.add('dplayer-loading');
-                            bufferingDetected = true;
-                        }
-                        if (bufferingDetected
-                            && currentPlayPos > (lastPlayPos + 0.01)
-                            && !this.audio.paused) {
-                            this.element.classList.remove('dplayer-loading');
-                            bufferingDetected = false;
-                        }
-                        lastPlayPos = currentPlayPos;
+                this.playedTime = setInterval(() => {
+                    // whether the video is buffering
+                    currentPlayPos = this.audio.currentTime;
+                    if (!bufferingDetected
+                        && currentPlayPos < (lastPlayPos + 0.01)
+                        && !this.audio.paused) {
+                        this.element.classList.add('dplayer-loading');
+                        bufferingDetected = true;
+                    }
+                    if (bufferingDetected
+                        && currentPlayPos > (lastPlayPos + 0.01)
+                        && !this.audio.paused) {
+                        this.element.classList.remove('dplayer-loading');
+                        bufferingDetected = false;
+                    }
+                    lastPlayPos = currentPlayPos;
 
-                        this.updateBar('played', this.audio.currentTime / this.audio.duration, 'width');
-                        this.ptime.innerHTML = this.secondToTime(this.audio.currentTime);
-                        this.trigger('playing');
-    
-                        const item = this.dan[this.danIndex];
-                        if (item && this.audio.currentTime >= parseFloat(item.time)) {
+                    this.updateBar('played', this.audio.currentTime / this.audio.duration, 'width');
+                    this.ptime.innerHTML = this.secondToTime(this.audio.currentTime);
+                    this.trigger('playing');
+                }, 100);
+                if (this.option.danmaku) {
+                    this.danmakuTime = setInterval(() => {
+                        let item = this.dan[this.danIndex];
+                        while (item && this.audio.currentTime >= parseFloat(item.time)) {
                             this.danmakuIn(item.text, item.color, item.type);
                             this.danIndex++;
+                            item = this.dan[this.danIndex];
                         }
-                    }, 100);
+                    }, 0);
                 }
-                else {
-                    this.playedTime = setInterval(() => {
-                        // whether the video is buffering
-                        currentPlayPos = this.audio.currentTime;
-                        if (!bufferingDetected
-                            && currentPlayPos < (lastPlayPos + 0.01)
-                            && !this.audio.paused) {
-                            this.element.classList.add('dplayer-loading');
-                            bufferingDetected = true
-                        }
-                        if (bufferingDetected
-                            && currentPlayPos > (lastPlayPos + 0.01)
-                            && !this.audio.paused) {
-                            this.element.classList.remove('dplayer-loading');
-                            bufferingDetected = false
-                        }
-                        lastPlayPos = currentPlayPos;
-
-                        this.updateBar('played', this.audio.currentTime / this.audio.duration, 'width');
-                        this.ptime.innerHTML = this.secondToTime(this.audio.currentTime);
-                        this.trigger('playing');
-                    }, 100);
+            };
+            this.clearTime = () => {
+                clearInterval(this.playedTime);
+                if (this.option.danmaku) {
+                    clearInterval(this.danmakuTime);
                 }
             };
     
@@ -425,7 +411,7 @@
     
             this.bar.addEventListener('mousedown', () => {
                 barWidth = this.bar.clientWidth;
-                clearInterval(this.playedTime);
+                this.clearTime();
                 document.addEventListener('mousemove', thumbMove);
                 document.addEventListener('mouseup', thumbUp);
             });
@@ -773,7 +759,7 @@
                     if (item && item.length) {
                         for (let j = 0; j < item.length; j++) {
                             const danRight = danItemRight(item[j]) - 10;
-                            if (danRight <= 640 - (tmp * danSpeed(item[j])) || danRight <= 0) {
+                            if (danRight <= danWidth - (tmp * danSpeed(item[j])) || danRight <= 0) {
                                 break;
                             }
                             if (j === item.length - 1) {
@@ -798,7 +784,7 @@
             this.danmakuIn = (text, color, type) => {
                 danWidth = danContainer.offsetWidth;
                 danHeight = danContainer.offsetHeight;
-                itemY = danHeight / itemHeight;
+                itemY = parseInt(danHeight / itemHeight);
                 let item = document.createElement(`div`);
                 item.classList.add(`dplayer-danmaku-item`);
                 item.classList.add(`dplayer-danmaku-${type}`);
@@ -846,14 +832,26 @@
                 xhr.onreadystatechange = () => {
                     if (xhr.readyState === 4) {
                         if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
-                            this.dan = JSON.parse(xhr.responseText).danmaku.sort((a, b) => a.time - b.time);
-
-                            // autoplay
-                            if (this.option.autoplay && !this.isMobile) {
-                                this.play();
+                            const response = JSON.parse(xhr.responseText);
+                            if (response.code !== 1) {
+                                alert(response.msg);
                             }
-                            else if (this.isMobile) {
-                                this.pause();
+                            else {
+                                if (this.option.danmaku.maximum) {
+                                    this.maximum = parseInt(this.option.danmaku.maximum);
+                                    this.dan = response.danmaku.splice(-this.maximum, this.maximum).sort((a, b) => a.time - b.time);
+                                }
+                                else {
+                                    this.dan = response.danmaku.sort((a, b) => a.time - b.time);
+                                }
+
+                                // autoplay
+                                if (this.option.autoplay && !this.isMobile) {
+                                    this.play();
+                                }
+                                else if (this.isMobile) {
+                                    this.pause();
+                                }
                             }
                         }
                         else {
@@ -916,7 +914,13 @@
                 xhr.onreadystatechange = () => {
                     if (xhr.readyState === 4) {
                         if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
-                            console.log('Post danmaku: ', JSON.parse(xhr.responseText));
+                            const response = JSON.parse(xhr.responseText);
+                            if (response.code !== 1) {
+                                alert(response.msg);
+                            }
+                            else {
+                                console.log('Post danmaku: ', JSON.parse(xhr.responseText));
+                            }
                         }
                         else {
                             console.log('Request was unsuccessful: ' + xhr.status);
@@ -1128,7 +1132,7 @@
 
                 this.audio.play();
                 if (this.playedTime) {
-                    clearInterval(this.playedTime);
+                    this.clearTime();
                 }
                 this.setTime();
                 this.element.classList.add('dplayer-playing');
@@ -1150,7 +1154,7 @@
                 this.ended = false;
                 this.playButton.innerHTML = this.getSVG('play');
                 this.audio.pause();
-                clearInterval(this.playedTime);
+                this.clearTime();
                 this.element.classList.remove('dplayer-playing');
                 this.trigger('pause');
             }

src/DPlayer.scss

@@ -9,16 +9,20 @@
         height: 100%;
         background: #000;
 
-        .dplayer-danmaku-top,
-        .dplayer-danmaku-bottom {
-            &.dplayer-danmaku-move {
-                animation: danmaku-center 8s linear !important;
+        .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 !important;;
+            .dplayer-danmaku-right {
+                &.dplayer-danmaku-move {
+                    animation: danmaku 8s linear;
+                    animation-play-state: paused;
+                }
             }
         }
     }
@@ -161,7 +165,7 @@
 
             &.dplayer-danmaku-move {
                 will-change: visibility;
-                animation: danmaku-center 5s linear;
+                animation: danmaku-center 4s linear;
                 animation-play-state: paused;
             }
         }
@@ -391,13 +395,6 @@
                 }
             }
 
-            .dplayer-svg-shadow {
-                stroke: #000;
-                stroke-opacity: .1;
-                stroke-width: 2px;
-                fill: none;
-            }
-
             .dplayer-fill {
                 fill: #fff;
             }
@@ -615,10 +612,6 @@
                             transition: all .2s ease-in-out;
                             fill: #ddd;
                         }
-
-                        .dplayer-svg-shadow {
-                            stroke: none;
-                        }
                     }
 
                     .dplayer-comment-setting-box {
@@ -739,10 +732,6 @@
                             transition: all .2s ease-in-out;
                             fill: #ddd;
                         }
-
-                        .dplayer-svg-shadow {
-                            stroke: none;
-                        }
                     }
                 }
             }
@@ -828,7 +817,7 @@
         width: 150px;
         border-radius: 2px;
         background: rgba(28, 28, 28, 0.9);
-        padding: 7px 0;
+        padding: 5px 0;
         overflow: hidden;
         z-index: 3;
         display: none;