support WebTorrent

.eslintrc

@@ -56,6 +56,7 @@
         "module": false,
         "Hls": false,
         "flvjs": false,
-        "dashjs": false
+        "dashjs": false,
+        "WebTorrent": false
     }
 }

README.md

@@ -25,6 +25,7 @@ DPlayer is a lovely HTML5 danmaku video player to help people build video and da
 	- [HLS](https://github.com/video-dev/hls.js)
 	- [FLV](https://github.com/Bilibili/flv.js)
 	- [MPEG DASH](https://github.com/Dash-Industry-Forum/dash.js)
+    - [WebTorrent](https://github.com/webtorrent/webtorrent)
 - Media formats
 	- MP4 H.264
 	- WebM

demo/demo.js

@@ -149,6 +149,14 @@ function initPlayers () {
     //     }
     // });
 
+    // window.dp9 = new DPlayer({
+    //     container: document.getElementById('dplayer9'),
+    //     video: {
+    //         url: 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent',
+    //         type: 'webtorrent'
+    //     }
+    // });
+
     // window.dp6 = new DPlayer({
     //     container: document.getElementById('dplayer6'),
     //     preload: 'none',

demo/index.html

@@ -10,6 +10,7 @@
     <script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
     <script src="DPlayer.js"></script>
 </head>
 
@@ -54,6 +55,11 @@
         <div id="dplayer5"></div>
     </div>
 
+    <h2 id="webtorrent">WebTorrent</h2>
+    <div class="example">
+        <div id="dplayer9"></div>
+    </div>
+
     <h2 id="live">Live</h2>
     <div class="example">
         <button class="btn" onclick="dp6.danmaku.draw({text: '假装收到 WebSocket 弹幕', color: '#fff', type: 'right'})">假装收到 WebSocket 弹幕</button>

src/js/player.js

@@ -323,26 +323,73 @@ class DPlayer {
             }
         }
 
-        // HTTP Live Streaming
-        if (this.type === 'hls' && Hls && Hls.isSupported()) {
-            const hls = new Hls();
-            hls.loadSource(video.src);
-            hls.attachMedia(video);
-        }
-
-        // FLV
-        if (this.type === 'flv' && flvjs && flvjs.isSupported()) {
-            const flvPlayer = flvjs.createPlayer({
-                type: 'flv',
-                url: video.src
-            });
-            flvPlayer.attachMediaElement(video);
-            flvPlayer.load();
-        }
+        switch (this.type) {
+        // https://github.com/video-dev/hls.js
+        case 'hls':
+            if (Hls) {
+                if (Hls.isSupported()) {
+                    const hls = new Hls();
+                    hls.loadSource(video.src);
+                    hls.attachMedia(video);
+                }
+                else {
+                    this.notice('Error: Hls is not supported.');
+                }
+            }
+            else {
+                this.notice('Error: Can\'t find Hls.');
+            }
+            break;
+
+        // https://github.com/Bilibili/flv.js
+        case 'flv':
+            if (flvjs && flvjs.isSupported()) {
+                if (flvjs.isSupported()) {
+                    const flvPlayer = flvjs.createPlayer({
+                        type: 'flv',
+                        url: video.src
+                    });
+                    flvPlayer.attachMediaElement(video);
+                    flvPlayer.load();
+                }
+                else {
+                    this.notice('Error: flvjs is not supported.');
+                }
+            }
+            else {
+                this.notice('Error: Can\'t find flvjs.');
+            }
+            break;
 
-        // MPEG DASH
-        if (this.type === 'dash' && dashjs) {
-            dashjs.MediaPlayer().create().initialize(video, video.src, false);
+        // https://github.com/Dash-Industry-Forum/dash.js
+        case 'dash':
+            if (dashjs) {
+                dashjs.MediaPlayer().create().initialize(video, video.src, false);
+            }
+            else {
+                this.notice('Error: Can\'t find dashjs.');
+            }
+            break;
+
+        // https://github.com/webtorrent/webtorrent
+        case 'webtorrent':
+            if (WebTorrent) {
+                this.container.classList.add('dplayer-loading');
+                const client = new WebTorrent();
+                const torrentId = video.src;
+                client.add(torrentId, (torrent) => {
+                    const file = torrent.files.find((file) => file.name.endsWith('.mp4'));
+                    file.renderTo(this.video, {
+                        autoplay: this.options.autoplay
+                    }, () => {
+                        this.container.classList.remove('dplayer-loading');
+                    });
+                });
+            }
+            else {
+                this.notice('Error: Can\'t find Webtorrent.');
+            }
+            break;
         }
     }
 
@@ -367,7 +414,7 @@ class DPlayer {
 
         // video download error: an error occurs
         this.on('error', () => {
-            this.tran && this.notice && this.notice(this.tran('This video fails to load'), -1);
+            this.tran && this.notice && this.type !== 'webtorrent' & this.notice(this.tran('This video fails to load'), -1);
         });
 
         // video end