more demo

DIYgod · Oct 26, 2016 · 3a23427 · 3a23427
1 parent d0442e4
commit 3a23427
Showing 1 changed file with 89 additions and 7 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -51,15 +51,24 @@ <h1>DPlayer</h1>
     <h2>Wow, such a lovely HTML5 danmaku video player</h2>
     <p>Made by <a href="https://www.anotherhome.net/" target="_blank">DIYgod</a>. Available on <a href="https://github.com/DIYgod/DPlayer" target="_blank">GitHub</a>. Licensed SATA.</p>
     <hr>
-    <div class="dplayer"></div>
-    <br>
+    <h3>Normal</h3>
+    <div class="dplayer" id="dplayer1"></div>
     <button onclick="switchDPlayer()">Switch Video</button>
+    <h3>Bilibili video and danmaku support</h3>
+    <div class="dplayer" id="dplayer2"></div>
+    <h3>Live Video (HTTP Live Streaming, M3U8 format) support</h3>
+    <div class="dplayer" id="dplayer3"></div>
+    <h3>FLV format support</h3>
+    <div class="dplayer" id="dplayer4"></div>
 </div>
 <script src="https://rawgit.com/mrdoob/stats.js/master/build/stats.min.js"></script>
+<script src="../plugin/flv.min.js"></script>
+<script src="../plugin/hls.min.js"></script>
 <script src="../dist/DPlayer.min.js"></script>
 <script>
-    var dp = new DPlayer({
-        element: document.getElementsByClassName('dplayer')[0],
+    // Normal
+    var dp1 = new DPlayer({
+        element: document.getElementById('dplayer1'),
         autoplay: false,
         theme: '#FADFA3',
         loop: true,
@@ -77,8 +86,8 @@ <h2>Wow, such a lovely HTML5 danmaku video player</h2>
         }
     });
     function switchDPlayer() {
-        if (dp.option.danmaku.id !== '5rGf5Y2X55qu6Z2p') {
-            dp.switchVideo({
+        if (dp1.option.danmaku.id !== '5rGf5Y2X55qu6Z2p') {
+            dp1.switchVideo({
                         url: 'http://devtest.qiniudn.com/微小微-江南皮革厂倒闭了.mp4',
                         pic: 'http://devtest.qiniudn.com/微小微-江南皮革厂倒闭了.jpg'
                     },
@@ -90,7 +99,7 @@ <h2>Wow, such a lovely HTML5 danmaku video player</h2>
                     });
         }
         else {
-            dp.switchVideo({
+            dp1.switchVideo({
                         url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
                         pic: 'http://devtest.qiniudn.com/若能绽放光芒.png'
                     },
@@ -103,6 +112,79 @@ <h2>Wow, such a lovely HTML5 danmaku video player</h2>
         }
     }
 
+    // Bilibili video and danmaku support
+    const xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4) {
+            if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
+                const response = JSON.parse(xhr.responseText);
+                var dp2 = new DPlayer({
+                    element: document.getElementById('dplayer2'),
+                    autoplay: false,
+                    theme: '#FADFA3',
+                    loop: true,
+                    screenshot: false,
+                    video: {
+                        url: response.durl[0].url,
+                        pic: 'http://devtest.qiniudn.com/微小微-江南皮革厂倒闭了.jpg'
+                    },
+                    danmaku: {
+                        id: '5rGf5Y2X55qu6Z2p',
+                        api: 'https://dplayer.daoapp.io/',
+                        token: 'tokendemo',
+                        maximum: 3000,
+                        addition: ['https://dplayer.daoapp.io/bilibili?aid=4045652']
+                    }
+                });
+            }
+            else {
+                console.log('Request was unsuccessful: ' + xhr.status);
+            }
+        }
+    };
+    xhr.open('get', 'https://dplayer.daoapp.io/video/bilibili?aid=4045652', true);
+    xhr.send(null);
+
+    // Live Video (HTTP Live Streaming, M3U8 format) support
+    var dp3 = new DPlayer({
+        element: document.getElementById('dplayer3'),
+        autoplay: false,
+        theme: '#FADFA3',
+        loop: true,
+        screenshot: true,
+        hotkey: true,
+        video: {
+            url: 'http://devtest.qiniudn.com/若能绽放光芒5.m3u8',
+            pic: 'http://devtest.qiniudn.com/若能绽放光芒.png'
+        },
+        danmaku: {
+            id: '9E2E3368B56CDBB42',
+            api: 'https://dplayer.daoapp.io/',
+            token: 'tokendemo',
+            maximum: 3000
+        }
+    });
+
+    // FLV format support
+    var dp4 = new DPlayer({
+        element: document.getElementById('dplayer4'),
+        autoplay: false,
+        theme: '#FADFA3',
+        loop: true,
+        screenshot: true,
+        hotkey: true,
+        video: {
+            url: 'http://devtest.qiniudn.com/【微小微】玖月奇迹－踩踩踩.flv',
+            pic: 'http://devtest.qiniudn.com/【微小微】玖月奇迹－踩踩踩.jpg'
+        },
+        danmaku: {
+            id: '9E2E3368B56CDBB43',
+            api: 'https://dplayer.daoapp.io/',
+            token: 'tokendemo',
+            maximum: 3000
+        }
+    });
+
     // stats.js: JavaScript Performance Monitor
     var stats = new Stats();
     stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom