live mode & upgrade dependencies

demo/demo.css

@@ -74,7 +74,6 @@ body {
     background: #fff;
     border: 1px solid #ddd;
     border-radius: 4px;
-    width: 128px;
     height: 40px;
     font-size: 14px;
     margin: 0 0 10px;

demo/index.html

@@ -180,15 +180,6 @@
                 }
             });
         </script>
-        <div id="dplayer8"></div>
-        <script>
-            var dp8 = new DPlayer({
-                container: document.getElementById('dplayer8')
-            });
-            var hls = new Hls();
-            hls.loadSource('http://devtest.qiniudn.com/若能绽放光芒5.m3u8');
-            hls.attachMedia(dp8.video);
-        </script>
     </div>
 
     <h2 id="flv-support">FLV support</h2>
@@ -203,19 +194,8 @@
                 }
             });
         </script>
-        <div id="dplayer7"></div>
-        <script>
-            var dp7 = new DPlayer({
-                container: document.getElementById('dplayer7')
-            });
-            var flvPlayer = flvjs.createPlayer({
-                type: 'flv',
-                url: 'http://devtest.qiniudn.com/【微小微】玖月奇迹－踩踩踩.flv'
-            });
-            flvPlayer.attachMediaElement(dp7.video);
-            flvPlayer.load();
-        </script>
     </div>
+
     <h2 id="dash-support">MPEG DASH support</h2>
     <div class="example">
         <div id="dplayer10"></div>
@@ -228,136 +208,46 @@
                 }
             });
         </script>
-        <div id="dplayer11"></div>
-        <script>
-            var dp11 = new DPlayer({
-                container: document.getElementById('dplayer11')
-            });
-            dashjs.MediaPlayer().create().initialize(dp11.video, "http://devtest.qiniudn.com/若能绽放光芒.mpd", false);
-        </script>
     </div>
 
-    <h2 id="bilibili-video-and-danmaku">Bilibili video and danmaku</h2>
+    <h2 id="dash-support">Live</h2>
     <div class="example">
-        <div id="dplayer6"></div>
+        <button class="btn" onclick="drawDanmaku()">假装收到 WebSocket 弹幕</button>
+        <div id="dplayer11"></div>
         <script>
-            var dp5 = new DPlayer({
-                container: document.getElementById('dplayer6'),
-                screenshot: false,
-                video: {
-                    url: 'https://api.prprpr.me/dplayer/video/bilibili?aid=4045652',
+            var dp10 = new DPlayer({
+                container: document.getElementById('dplayer11'),
+                live: true,
+                danmaku: true,
+                apiBackend: {
+                    read: function (endpoint, callback) {
+                        setTimeout(function () {}, 1000);
+                        console.log('假装 WebSocket 连接成功');
+                        callback();
+                    },
+                    send: function (endpoint, danmakuData, callback) {
+                        console.log('假装通过 WebSocket 发送数据', danmakuData);
+                        setTimeout(function () {}, 1000);
+                        callback();
+                    }
                 },
-                danmaku: {
-                    id: '9E2E3368B56CDBB46',
-                    api: 'https://api.prprpr.me/dplayer/',
-                    addition: ['https://api.prprpr.me/dplayer/bilibili?aid=4045652']
-                }
-            });
-        </script>
-    </div>
-
-    <h2 id="customize-ui-icons">Customize UI icons</h2>
-    <div class="example">
-        <div id="dplayer9"></div>
-        <script>
-            var dp9 = new DPlayer({
-                container: document.getElementById('dplayer9'),
-                screenshot: false,
                 video: {
-                    url: 'https://api.prprpr.me/dplayer/video/bilibili?aid=4045652',
-                },
-                icons: {
-                    play: [
-                        '0 0 24 24',
-                        'M8 5v14l11-7z',
-                        '24'
-                    ],
-                    pause: [
-                        '0 0 24 24',
-                        'M6 19h4V5H6v14zm8-14v14h4V5h-4z',
-                        '24'
-                    ],
-                    'volume-up': [
-                        '0 0 24 24',
-                        'M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z',
-                        '24'
-                    ],
-                    'volume-down': [
-                        '0 0 24 24',
-                        'M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z',
-                        '24'
-                    ],
-                    'volume-off': [
-                        '0 0 24 24',
-                        'M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z',
-                        '24'
-                    ],
-                    loop: [
-                        '0 0 32 32',
-                        'M1.882 16.941c0 4.152 3.221 7.529 7.177 7.529v1.882c-4.996 0-9.060-4.222-9.060-9.412s4.064-9.412 9.060-9.412h7.96l-3.098-3.098 1.331-1.331 5.372 5.37-5.37 5.372-1.333-1.333 3.1-3.098h-7.962c-3.957 0-7.177 3.377-7.177 7.529zM22.94 7.529v1.882c3.957 0 7.177 3.377 7.177 7.529s-3.221 7.529-7.177 7.529h-7.962l3.098-3.098-1.331-1.331-5.37 5.37 5.372 5.372 1.331-1.331-3.1-3.1h7.96c4.998 0 9.062-4.222 9.062-9.412s-4.064-9.412-9.060-9.412z'
-                    ],
-                    full: [
-                        '0 0 24 24',
-                        'M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z',
-                        '24'
-                    ],
-                    'full-in': [
-                        '0 0 32 33',
-                        'M24.965 24.38h-18.132c-1.366 0-2.478-1.113-2.478-2.478v-11.806c0-1.364 1.111-2.478 2.478-2.478h18.132c1.366 0 2.478 1.113 2.478 2.478v11.806c0 1.364-1.11 2.478-2.478 2.478zM6.833 10.097v11.806h18.134l-0.002-11.806h-18.132zM2.478 28.928h5.952c0.684 0 1.238-0.554 1.238-1.239 0-0.684-0.554-1.238-1.238-1.238h-5.952v-5.802c0-0.684-0.554-1.239-1.238-1.239s-1.239 0.556-1.239 1.239v5.802c0 1.365 1.111 2.478 2.478 2.478zM30.761 19.412c-0.684 0-1.238 0.554-1.238 1.238v5.801h-5.951c-0.686 0-1.239 0.554-1.239 1.238 0 0.686 0.554 1.239 1.239 1.239h5.951c1.366 0 2.478-1.111 2.478-2.478v-5.801c0-0.683-0.554-1.238-1.239-1.238zM0 5.55v5.802c0 0.683 0.554 1.238 1.238 1.238s1.238-0.555 1.238-1.238v-5.802h5.952c0.684 0 1.238-0.554 1.238-1.238s-0.554-1.238-1.238-1.238h-5.951c-1.366-0.001-2.478 1.111-2.478 2.476zM32 11.35v-5.801c0-1.365-1.11-2.478-2.478-2.478h-5.951c-0.686 0-1.239 0.554-1.239 1.238s0.554 1.238 1.239 1.238h5.951v5.801c0 0.683 0.554 1.237 1.238 1.237 0.686 0.002 1.239-0.553 1.239-1.236z'
-                    ],
-                    setting: [
-                        '0 0 24 24',
-                        'M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z',
-                        '24'
-                    ],
-                    right: [
-                        '0 0 32 32',
-                        'M22 16l-10.105-10.6-1.895 1.987 8.211 8.613-8.211 8.612 1.895 1.988 8.211-8.613z'
-                    ],
-                    comment: [
-                        '0 0 24 24',
-                        'M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z',
-                        '24'
-                    ],
-                    'comment-off': [
-                        '0 0 32 32',
-                        'M27.090 0.131h-22.731c-2.354 0-4.262 1.839-4.262 4.109v16.401c0 2.269 1.908 4.109 4.262 4.109h4.262v-2.706h8.469l-8.853 8.135 1.579 1.451 7.487-6.88h9.787c2.353 0 4.262-1.84 4.262-4.109v-16.401c0-2.27-1.909-4.109-4.262-4.109v0zM28.511 19.304c0 1.512-1.272 2.738-2.841 2.738h-8.425l-0.076-0.070-0.076 0.070h-11.311c-1.569 0-2.841-1.226-2.841-2.738v-13.696c0-1.513 1.272-2.739 2.841-2.739h19.889c1.569 0 2.841-0.142 2.841 1.37v15.064z'
-                    ],
-                    send: [
-                        '0 0 32 32',
-                        'M13.725 30l3.9-5.325-3.9-1.125v6.45zM0 17.5l11.050 3.35 13.6-11.55-10.55 12.425 11.8 3.65 6.1-23.375-32 15.5z'
-                    ],
-                    menu: [
-                        '0 0 22 32',
-                        'M20.8 14.4q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2zM1.6 11.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2zM20.8 20.8q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2z'
-                    ],
-                    camera: [
-                        '0 0 32 32',
-                        'M16 23c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zM16 13c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.206 0 4-1.794 4-4s-1.794-4-4-4zM27 28h-22c-1.654 0-3-1.346-3-3v-16c0-1.654 1.346-3 3-3h3c0.552 0 1 0.448 1 1s-0.448 1-1 1h-3c-0.551 0-1 0.449-1 1v16c0 0.552 0.449 1 1 1h22c0.552 0 1-0.448 1-1v-16c0-0.551-0.448-1-1-1h-11c-0.552 0-1-0.448-1-1s0.448-1 1-1h11c1.654 0 3 1.346 3 3v16c0 1.654-1.346 3-3 3zM24 10.5c0 0.828 0.672 1.5 1.5 1.5s1.5-0.672 1.5-1.5c0-0.828-0.672-1.5-1.5-1.5s-1.5 0.672-1.5 1.5zM15 4c0 0.552-0.448 1-1 1h-4c-0.552 0-1-0.448-1-1v0c0-0.552 0.448-1 1-1h4c0.552 0 1 0.448 1 1v0z'
-                    ]
-                },
-                iconsColor: 'orange'
+                    url: 'http://devtest.qiniudn.com/若能绽放光芒5.m3u8',
+                    type: 'hls'
+                }
             });
+            function drawDanmaku() {
+                dp10.danmaku.draw({
+                    text: '假装收到 WebSocket 弹幕',
+                    color: '#fff',
+                    type: 'right'
+                })
+            }
         </script>
     </div>
 
-    <h2 id="html5-check">HTML5 check</h2>
-    <ul>
-        <li class="video">Video</li>
-        <li class="svg">SVG</li>
-        <li class="cssanimations">CSS animations</li>
-        <li class="csstransforms">CSS transforms</li>
-        <li class="documentfragment">Document fragment</li>
-        <li class="fullscreen">Fullscreen</li>
-        <li class="localstorage">Localstorage</li>
-        <li class="canvas">Canvas</li>
-        <li class="track">Track</li>
-        <li class="websockets">WebSockets</li>
-    </ul>
-
     <script src="https://unpkg.com/stats.js"></script>
     <script src="demo.js"></script>
-    <script src="modernizr.js"></script>
 </body>
 
 </html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dplayer",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "Wow, such a lovely HTML5 danmaku video player",
   "main": "dist/DPlayer.min.js",
   "style": "dist/DPlayer.min.css",
@@ -30,27 +30,27 @@
   },
   "homepage": "https://github.com/DIYgod/DPlayer#readme",
   "devDependencies": {
-    "autoprefixer": "^7.1.1",
-    "babel-core": "^6.24.1",
-    "babel-loader": "^7.1.1",
-    "babel-preset-env": "^1.6.0",
-    "cross-env": "^5.0.1",
-    "css-loader": "^0.28.0",
-    "eslint": "^4.1.0",
+    "autoprefixer": "^7.1.6",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.1",
+    "cross-env": "^5.1.1",
+    "css-loader": "^0.28.7",
+    "eslint": "^4.12.1",
     "eslint-loader": "^1.9.0",
     "exports-loader": "^0.6.4",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^0.11.1",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^1.1.5",
     "git-revision-webpack-plugin": "^2.5.1",
-    "node-sass": "^4.5.0",
-    "postcss-loader": "^2.0.5",
-    "sass-loader": "^6.0.2",
+    "node-sass": "^4.7.2",
+    "postcss-loader": "^2.0.9",
+    "sass-loader": "^6.0.6",
     "strip-loader": "^0.1.2",
-    "style-loader": "^0.18.1",
+    "style-loader": "^0.19.0",
     "template-string-optimize-loader": "^2.2.3",
-    "url-loader": "^0.5.7",
-    "webpack": "^3.1.0",
-    "webpack-dev-server": "^2.4.5"
+    "url-loader": "^0.6.2",
+    "webpack": "^3.8.1",
+    "webpack-dev-server": "^2.9.5"
   },
   "dependencies": {
     "balloon-css": "^0.5.0"

src/DPlayer.js

@@ -45,6 +45,9 @@ class DPlayer {
         if (!this.options.danmaku) {
             this.container.classList.add('dplayer-no-danmaku');
         }
+        if (this.options.live) {
+            this.container.classList.add('dplayer-live');
+        }
         if (isMobile) {
             this.container.classList.add('dplayer-mobile');
         }

src/DPlayer.scss

@@ -55,6 +55,21 @@
         }
     }
 
+    &.dplayer-live {
+        .dplayer-time {
+            display: none;
+        }
+        .dplayer-bar-wrap {
+            display: none;
+        }
+        .dplayer-setting-speed {
+            display: none;
+        }
+        .dplayer-setting-loop {
+            display: none;
+        }
+    }
+
     &.dplayer-playing {
 
         .dplayer-danmaku .dplayer-danmaku-move {
@@ -649,7 +664,8 @@
                 }
             }
 
-            .dplayer-time {
+            .dplayer-time,
+            .dplayer-live-badge {
                 line-height: 38px;
                 color: #eee;
                 text-shadow: 0 0 2px rgba(0,0,0,.5);
@@ -658,6 +674,16 @@
                 cursor: default;
             }
 
+            .dplayer-live-dot {
+                display: inline-block;
+                width: 6px;
+                height: 6px;
+                vertical-align: 4%;
+                margin-right: 5px;
+                content: '';
+                border-radius: 6px;
+            }
+
             .dplayer-icon {
                 width: 40px;
                 height: 100%;

src/html.js

@@ -115,6 +115,7 @@ const html = {
                     </div>
                 </div>
                 <span class="dplayer-time"><span class="dplayer-ptime">0:00</span> / <span class="dplayer-dtime">0:00</span></span>
+                ${options.live ? `<span class="dplayer-live-badge"><span class="dplayer-live-dot" style="background: ${options.theme};"></span>${tran('Live')}</span>` : ''}
             </div>
             <div class="dplayer-icons dplayer-icons-right">
                 ${options.video.quality ? `

src/i18n.js

@@ -4,7 +4,7 @@ W3C def language codes is :
         primary-code    ISO 639-1   ( the names of language with 2 code )
         subcode         ISO 3166    ( the names of countries )
 
-NOTE: use lowercase to prevent case typo from user! 
+NOTE: use lowercase to prevent case typo from user!
 Use this as shown below..... */
 
 module.exports = function (lang) {
@@ -54,7 +54,8 @@ const tranTxt = {
         's': '秒',
         'Show subtitle': '显示字幕',
         'Hide subtitle': '隐藏字幕',
-        'Volume': '音量'
+        'Volume': '音量',
+        'Live': '直播',
     },
     "zh-tw" : {
         'Danmaku is loading': '彈幕加載中',
@@ -89,6 +90,7 @@ const tranTxt = {
         's': '秒',
         'Show subtitle': '顯示字幕',
         'Hide subtitle': '隱藏字幕',
-        'Volume': '音量'
+        'Volume': '音量',
+        'Live': '直播',
     }
 };

src/options.js

@@ -11,6 +11,7 @@ module.exports = (options) => {
     // default options
     const defaultOption = {
         container: options.element || document.getElementsByClassName('dplayer')[0],
+        live: false,
         autoplay: false,
         theme: '#b7daff',
         loop: false,
@@ -99,7 +100,7 @@ module.exports = (options) => {
     if (options.video) {
         !options.video.type && (options.video.type = 'auto');
     }
-    if (options.danmaku) {
+    if (typeof options.danmaku === 'object' && options.danmaku) {
         !options.danmaku.user && (options.danmaku.user = 'DIYgod');
     }
     if (options.subtitle) {
@@ -126,7 +127,7 @@ module.exports = (options) => {
     options.contextmenu = options.contextmenu.concat([
         {
             text: 'About author',
-            link: 'https://www.anotherhome.net/'
+            link: 'https://digod.me'
         },
         {
             text: 'About DPlayer',