Supporting HLS

README.md

@@ -27,11 +27,9 @@ $ npm install dplayer --save
 ### HTML
 
 ```HTML
-<link rel="stylesheet" href="DPlayer.min.css">
-<!-- ... -->
 <div id="player1" class="dplayer"></div>
 <!-- ... -->
-<script src="DPlayer.min.js"></script>
+<script src="dist/DPlayer.min.js"></script>
 ```
 
 ### JS
@@ -55,7 +53,7 @@ var option = {
         url: '若能绽放光芒.mp4',                                         // Required, video url
         pic: '若能绽放光芒.png'                                          // Optional, music picture
     },
-    danmaku: {                                                         // Optional, showing danmaku
+    danmaku: {                                                         // Optional, showing danmaku, ignore this option to hide danmaku
         id: '9E2E3368B56CDBB4',                                        // Required, danmaku id, NOTICE: it 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
@@ -84,6 +82,30 @@ var option = {
 + `ended`: Triggered when DPlayer ended
 + `error`: Triggered when an error occurs
 
+**Live Video (HTTP Live Streaming, M3U8 format)**
+
+It requires the library [hls.js](https://github.com/dailymotion/hls.js) and it should be loaded before DPlayer.min.js.
+
+Not supporting live danamku for now.
+
+```HTML
+<div id="player1" class="dplayer"></div>
+<!-- ... -->
+<script src="plugin/hls.min.js"></script>
+<script src="dist/DPlayer.min.js"></script>
+
+<script>
+var dp = new DPlayer({
+    // ...
+    video: {
+        url: 'xxx.m3u8'
+        // ...
+    }
+});
+dp.init();
+</script>
+```
+
 **Work with module bundler**
 
 ```js

package.json

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

src/DPlayer.js

@@ -289,16 +289,17 @@ class DPlayer {
         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");
-        //         });
-        //     });
-        // }
+        if (this.option.video.url.match(/(m3u8)$/i) || Hls.isSupported()) {
+            this.element.getElementsByClassName('dplayer-time')[0].style.display = 'none';
+            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', () => {