play and pause bezel; loading bezel; new demo video

README.md

@@ -39,8 +39,6 @@ $ npm run build
 
 ## Todo
 
-- [ ] 缓冲提示
-
 - [ ] 快捷键: 空格暂停，双击全屏, 方向键控制进度
 
 - [ ] icon 动画

demo/index.html

@@ -61,8 +61,8 @@
         autoplay: false,
         theme: '#FADFA3',
         video: {
-            url: 'http://devtest.qiniudn.com/最后的告白.mp4',
-            pic: 'http://devtest.qiniudn.com/poster.jpg'
+            url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
+            pic: 'http://devtest.qiniudn.com/若能绽放光芒.png'
         },
         danmaku: {
             id: '9E2E3368B56CDBB4',

nodejs/index.js

@@ -58,10 +58,10 @@ app.all('*', function(req, res, next) {
 });
 
 app.get('/', function (req, res) {
-    var ip = req.headers['x-forwarded-for'] ||
-             req.connection.remoteAddress ||
-             req.socket.remoteAddress ||
-             req.connection.socket.remoteAddress;
+    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);
@@ -104,10 +104,10 @@ 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;
+    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');
@@ -190,7 +190,7 @@ app.post('/', function (req, res) {
                 type: jsonStr.type
             });
             dan.save(function (err, d) {
-                if (err){
+                if (err) {
                     logger.error(err);
                     res.send(`{"code": 0, "msg": "Error happens, please contact system administrator."}`);
                 }

src/DPlayer.js

@@ -107,6 +107,37 @@
                         <source src="${this.option.video.url}" type="video/mp4">
                     </video>
                     <div class="dplayer-danmaku"></div>
+                    <div class="dplayer-bezel">
+                        <span class="dplayer-bezel-icon"></span>
+                        <span class="diplayer-loading-icon">
+                            <svg height="100%" version="1.1" viewBox="0 0 22 22" width="100%">
+                                <svg x="7" y="1">
+                                    <circle class="diplayer-loading-dot diplayer-loading-dot-0" cx="4" cy="4" r="2"></circle>
+                                </svg>
+                                <svg x="11" y="3">
+                                    <circle class="diplayer-loading-dot diplayer-loading-dot-1" cx="4" cy="4" r="2"></circle>
+                                </svg>
+                                <svg x="13" y="7">
+                                    <circle class="diplayer-loading-dot diplayer-loading-dot-2" cx="4" cy="4" r="2"></circle>
+                                </svg>
+                                <svg x="11" y="11">
+                                    <circle class="diplayer-loading-dot diplayer-loading-dot-3" cx="4" cy="4" r="2"></circle>
+                                </svg>
+                                <svg x="7" y="13">
+                                    <circle class="diplayer-loading-dot diplayer-loading-dot-4" cx="4" cy="4" r="2"></circle>
+                                </svg>
+                                <svg x="3" y="11">
+                                    <circle class="diplayer-loading-dot diplayer-loading-dot-5" cx="4" cy="4" r="2"></circle>
+                                </svg>
+                                <svg x="1" y="7">
+                                    <circle class="diplayer-loading-dot diplayer-loading-dot-6" cx="4" cy="4" r="2"></circle>
+                                </svg>
+                                <svg x="3" y="3">
+                                    <circle class="diplayer-loading-dot diplayer-loading-dot-7" cx="4" cy="4" r="2"></circle>
+                                </svg>
+                            </svg>
+                        </span>
+                    </div>
                 </div>
                 <div class="dplayer-controller-mask"></div>
                 <div class="dplayer-controller">
@@ -214,17 +245,24 @@
     
             // get this audio object
             this.audio = this.element.getElementsByClassName('dplayer-video')[0];
-    
+            window.audio = this.audio // Todo
+
+            this.bezel = this.element.getElementsByClassName('dplayer-bezel-icon')[0];
+            this.bezel.addEventListener('animationend', () => {
+                this.bezel.classList.remove('dplayer-bezel-transition');
+            });
+
             this.ptime = this.element.getElementsByClassName('dplayer-ptime')[0];
     
             // play and pause button
             this.playButton = this.element.getElementsByClassName('dplayer-play-icon')[0];
+            this.shouldpause = true;
             this.toggle = () => {
-                if (this.audio.paused) {
-                    this.play();
+                if (!this.shouldpause || this.ended) {
+                    this.pause();
                 }
                 else {
-                    this.pause();
+                    this.play();
                 }
             };
             this.playButton.addEventListener('click', this.toggle);
@@ -295,6 +333,24 @@
             this.setTime = () => {
                 if (this.option.danmaku) {
                     this.playedTime = setInterval(() => {
+                        if (!this.element.classList.contains('dplayer-loading')) {
+                            if (!this.audio.buffered.length || this.audio.buffered.end(this.audio.buffered.length - 1) - this.audio.currentTime <= 10) {
+                                this.element.classList.add('dplayer-loading');
+                                this.audio.pause();
+                                return;
+                            }
+                        }
+                        else {
+                            if (this.audio.buffered.length && this.audio.buffered.end(this.audio.buffered.length - 1) - this.audio.currentTime > 15) {
+                                this.element.classList.remove('dplayer-loading');
+                                if (!this.shouldpause) {
+                                    this.audio.play();
+                                }
+                            }
+                            else {
+                                return;
+                            }
+                        }
                         this.updateBar('played', this.audio.currentTime / this.audio.duration, 'width');
                         this.ptime.innerHTML = this.secondToTime(this.audio.currentTime);
                         this.trigger('playing');
@@ -958,9 +1014,19 @@
          */
         play() {
             if (this.audio.paused) {
+                this.shouldpause = false;
+
+                this.bezel.innerHTML = this.getSVG('play');
+                this.bezel.classList.add('dplayer-bezel-transition');
+
                 this.playButton.innerHTML = this.getSVG('pause');
-    
-                this.audio.play();
+
+                if (!this.audio.buffered.length
+                    || this.element.classList.contains('dplayer-loading') && this.audio.buffered.end(this.audio.buffered.length - 1) - this.audio.currentTime > 15
+                    || !this.element.classList.contains('dplayer-loading') && this.audio.buffered.end(this.audio.buffered.length - 1) - this.audio.currentTime > 10) {
+                    this.element.classList.remove('dplayer-loading');
+                    this.audio.play();
+                }
                 if (this.playedTime) {
                     clearInterval(this.playedTime);
                 }
@@ -974,7 +1040,13 @@
          * Pause music
          */
         pause() {
-            if (!this.audio.paused || this.ended) {
+            if (!this.shouldpause || this.ended) {
+                this.shouldpause = true;
+                this.element.classList.remove('dplayer-loading');
+
+                this.bezel.innerHTML = this.getSVG('pause');
+                this.bezel.classList.add('dplayer-bezel-transition');
+
                 this.ended = false;
                 this.playButton.innerHTML = this.getSVG('play');
                 this.audio.pause();

src/DPlayer.scss

@@ -17,7 +17,7 @@
             opacity: 0;
         }
 
-        .dplayer-danmaku-move {
+        .dplayer-danmaku .dplayer-danmaku-move {
             animation-play-state: running !important;
         }
 
@@ -31,6 +31,16 @@
         }
     }
 
+    &.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;
@@ -138,6 +148,94 @@
         }
     }
 
+    .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;