Supporting HLS; Style in mobile

README.md

@@ -124,22 +124,6 @@ $ npm run build
 
 - [DPlayer_for_Z-BlogPHP](https://github.com/fghrsh/DPlayer_for_Z-BlogPHP)
 
-## Todo
-
-- [ ] 截图
-
-- [ ] 记录播放位置 记录透明度
-
-- [ ] 国际化
-
-- [ ] 微博登录
-
-- [ ] 锁定IP规则
-
-- [ ] icon 动画
-
-- [ ] 字体
-
 ## LICENSE
 
 [The Star And Thank Author License (SATA)](https://github.com/DIYgod/DPlayer/blob/master/LICENSE)

package.json

@@ -5,7 +5,7 @@
   "main": "dist/DPlayer.min.js",
   "scripts": {
     "test": "webpack",
-    "start": "webpack-dev-server --hot --progress --inline"
+    "start": "webpack-dev-server --hot --progress --inline --host 0.0.0.0"
   },
   "repository": {
     "type": "git",
@@ -37,5 +37,8 @@
     "url-loader": "^0.5.7",
     "webpack": "^1.13.1",
     "webpack-dev-server": "^1.9.0"
+  },
+  "dependencies": {
+    "hls.js": "^0.6.2-2"
   }
 }

src/DPlayer.js

@@ -1,4 +1,5 @@
 require('./DPlayer.scss');
+const Hls = require('hls.js');
 
 class DPlayer {
     /**
@@ -277,6 +278,18 @@ class DPlayer {
         // get this audio object
         this.audio = this.element.getElementsByClassName('dplayer-video')[0];
 
+        // Support HTTP Live Streaming
+        if (this.option.video.url.match(/(m3u8)$/i) || Hls.isSupported()) {
+            const hls = new Hls();
+            hls.attachMedia(this.audio);
+            hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+                hls.loadSource(this.option.video.url);
+                hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
+                    console.log("manifest loaded, found " + data.levels.length + " quality level");
+                });
+            });
+        }
+
         this.bezel = this.element.getElementsByClassName('dplayer-bezel-icon')[0];
         this.bezel.addEventListener('animationend', () => {
             this.bezel.classList.remove('dplayer-bezel-transition');
@@ -296,8 +309,25 @@ class DPlayer {
             }
         };
         this.playButton.addEventListener('click', this.toggle);
-        this.element.getElementsByClassName('dplayer-video-wrap')[0].addEventListener('click', this.toggle);
-        this.element.getElementsByClassName('dplayer-controller-mask')[0].addEventListener('click', this.toggle);
+
+        const videoWrap = this.element.getElementsByClassName('dplayer-video-wrap')[0];
+        const conMask = this.element.getElementsByClassName('dplayer-controller-mask')[0];
+        if (!this.isMobile) {
+            videoWrap.addEventListener('click', this.toggle);
+            conMask.addEventListener('click', this.toggle);
+        }
+        else {
+            const toggleController = () => {
+                if (this.element.classList.contains('dplayer-hide-controller')) {
+                    this.element.classList.remove('dplayer-hide-controller');
+                }
+                else {
+                    this.element.classList.add('dplayer-hide-controller');
+                }
+            };
+            videoWrap.addEventListener('click', toggleController);
+            conMask.addEventListener('click', toggleController);
+        }
 
 
         /**
@@ -510,20 +540,22 @@ class DPlayer {
         /**
          * auto hide controller
          */
-        let hideTime = 0;
-        const hideController = () => {
-            this.element.classList.remove('dplayer-hide-controller');
-            clearTimeout(hideTime);
-            hideTime = setTimeout(() => {
-                if (this.audio.played.length) {
-                    this.element.classList.add('dplayer-hide-controller');
-                    closeSetting();
-                    closeComment();
-                }
-            }, 2000);
-        };
-        this.element.addEventListener('mousemove', hideController);
-        this.element.addEventListener('click', hideController);
+        if (!this.isMobile) {
+            let hideTime = 0;
+            const hideController = () => {
+                this.element.classList.remove('dplayer-hide-controller');
+                clearTimeout(hideTime);
+                hideTime = setTimeout(() => {
+                    if (this.audio.played.length) {
+                        this.element.classList.add('dplayer-hide-controller');
+                        closeSetting();
+                        closeComment();
+                    }
+                }, 2000);
+            };
+            this.element.addEventListener('mousemove', hideController);
+            this.element.addEventListener('click', hideController);
+        }
 
 
         /***

src/DPlayer.scss

@@ -42,23 +42,26 @@
     }
 
     &.dplayer-playing {
-        .dplayer-controller-mask {
-            opacity: 0;
-        }
-        .dplayer-controller {
-            opacity: 0;
-        }
 
         .dplayer-danmaku .dplayer-danmaku-move {
             animation-play-state: running !important;
         }
 
-        &:hover {
+        @media (min-width: 900px) {
             .dplayer-controller-mask {
-                opacity: 1;
+                opacity: 0;
             }
             .dplayer-controller {
-                opacity: 1;
+                opacity: 0;
+            }
+
+            &:hover {
+                .dplayer-controller-mask {
+                    opacity: 1;
+                }
+                .dplayer-controller {
+                    opacity: 1;
+                }
             }
         }
     }

webpack.config.js

@@ -23,6 +23,7 @@ module.exports = {
     },
 
     module: {
+        noParse: /node_modules\/hls.js\/dist\/hls.js/,
         loaders: [
             {
                 test: /\.js$/,