lqb
/
DPlayer
mirror of https://gitee.com/mirrors/DPlayer.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DPlayer Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://unpkg.com/github-markdown-css">
    <link rel="stylesheet" href="demo.css">
    <script src="https://unpkg.com/flv.js/dist/flv.min.js"></script>
    <script src="https://unpkg.com/hls.js/dist/hls.min.js"></script>
    <script src="DPlayer.js"></script>
</head>
<body class="markdown-body">
    <h2 id="quick-start">Quick Start</h2>
    <div class="example">
        <div id="dplayer1"></div>
        <script>
            var dp1 = new DPlayer({
                container: document.getElementById('dplayer1'),
                video: {
                    url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
                    pic: 'http://devtest.qiniudn.com/若能绽放光芒.png',
                    thumbnails: 'http://devtest.qiniudn.com/thumbnails.jpg'
                },
                danmaku: {
                    id: '9E2E3368B56CDBB4',
                    api: 'https://api.prprpr.me/dplayer/'
                }
            });
        </script>
    </div>

    <h2 id="options">Options</h2>
    <div class="example">
        <button class="btn" onclick="switchDPlayer()">Switch Video</button>
        <button class="btn" onclick="dp2.notice('Notice演示')">notice</button>
        <button class="btn" onclick="dp2.seek(120)">seek</button>
        <button class="btn" onclick="dp2.volume(0.2)">volume</button>
        <button class="btn" onclick="dp2.toggle()">toggle</button>
        <button class="btn" onclick="dp2.destroy()">destroy</button>
        <button class="btn" onclick="dp2.danmaku.hide()">danmaku.hide</button>
        <button class="btn" onclick="dp2.danmaku.show()">danmaku.show</button>
        <div id="dplayer2"></div>
        <div id="events"></div>
        <script>
            var dp2 = new DPlayer({
                container: document.getElementById('dplayer2'),
                autoplay: false,
                theme: '#FADFA3',
                loop: true,
                screenshot: true,
                hotkey: true,
                logo: 'http://devtest.qiniudn.com/DPlayer.png',
                volume: 0.2,
                video: {
                    url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
                    pic: 'http://devtest.qiniudn.com/若能绽放光芒.png',
                    type: 'auto',
                    thumbnails: 'http://devtest.qiniudn.com/thumbnails.jpg'
                },
                danmaku: {
                    id: '9E2E3368B56CDBB4',
                    api: 'https://api.prprpr.me/dplayer/',
                    token: 'tokendemo',
                    maximum: 3000,
                    user: 'DIYgod',
                    margin: {
                        bottom: '15%'
                    },
                    unlimited: true
                },
                contextmenu: [
                    {
                        text: 'custom contextmenu',
                        link: 'https://github.com/DIYgod/DPlayer'
                    }
                ]
            });
            function switchDPlayer() {
                if (dp2.danmaku.options.api.id !== '5rGf5Y2X55qu6Z2p') {
                    dp2.switchVideo({
                        url: 'http://devtest.qiniudn.com/若能绽放光芒5.m3u8',
                        type: 'hls'
                    },
                        {
                            id: '5rGf5Y2X55qu6Z2p',
                            api: 'https://api.prprpr.me/dplayer/',
                            maximum: 3000,
                            user: 'DIYgod'
                        });
                }
                else {
                    dp2.switchVideo({
                        url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
                        pic: 'http://devtest.qiniudn.com/若能绽放光芒.png',
                        type: 'auto',
                    },
                        {
                            id: '9E2E3368B56CDBB4',
                            api: 'https://api.prprpr.me/dplayer/',
                            maximum: 3000,
                            user: 'DIYgod'
                        });
                }
            }
            var events = [
                'abort', 'canplay', 'canplaythrough', 'durationchange', 'emptied', 'ended', 'error',
                'loadeddata', 'loadedmetadata', 'loadstart', 'mozaudioavailable', 'pause', 'play',
                'playing', 'ratechange', 'seeked', 'seeking', 'stalled',
                'volumechange', 'waiting',
                'screenshot',
                'thumbnails_show', 'thumbnails_hide',
                'danmaku_show', 'danmaku_hide', 'danmaku_clear',
                'danmaku_loaded', 'danmaku_send', 'danmaku_opacity',
                'contextmenu_show', 'contextmenu_hide',
                'notice_show', 'notice_hide',
                'quality_start', 'quality_end',
                'destroy',
                'resize',
                'fullscreen', 'fullscreen_cancel', 'webfullscreen', 'webfullscreen_cancel'
            ];
            var eventsEle = document.getElementById('events');
            for (let i = 0; i < events.length; i++) {
                dp2.on(events[i], (info) => {
                    eventsEle.innerHTML += '<p>Event: ' + events[i] +  '</p>';
                    eventsEle.scrollTop = eventsEle.scrollHeight;
                })
            }
        </script>
    </div>

    <h2 id="quality-switching">Quality switching</h2>
    <div class="example">
        <button class="btn" onclick="dp3.switchQuality(1)">Switch quality</button>
        <div id="dplayer3"></div>
        <script>
        var dp3 = new DPlayer({
            container: document.getElementById('dplayer3'),
            video: {
                quality: [{
                    name: 'HD',
                    url: 'http://devtest.qiniudn.com/若能绽放光芒5.m3u8',
                    type: 'hls'
                }, {
                    name: 'SD',
                    url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
                    type: 'normal'
                }],
                defaultQuality: 0,
                pic: 'http://devtest.qiniudn.com/若能绽放光芒.png'
            }
        });
        </script>
    </div>

    <h2 id="hls-support">HLS support</h2>
    <div class="example">
        <div id="dplayer4"></div>
        <script>
            var dp4 = new DPlayer({
                container: document.getElementById('dplayer4'),
                video: {
                    url: 'http://devtest.qiniudn.com/若能绽放光芒5.m3u8',
                    type: 'hls'
                }
            });
        </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>
    <div class="example">
        <div id="dplayer5"></div>
        <script>
            var dp5 = new DPlayer({
                container: document.getElementById('dplayer5'),
                video: {
                    url: 'http://devtest.qiniudn.com/【微小微】玖月奇迹－踩踩踩.flv',
                    type: 'flv'
                }
            });
        </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="bilibili-video-and-danmaku">Bilibili video and danmaku</h2>
    <div class="example">
        <div id="dplayer6"></div>
        <script>
            var dp5 = new DPlayer({
                container: document.getElementById('dplayer6'),
                screenshot: false,
                video: {
                    url: 'https://api.prprpr.me/dplayer/video/bilibili?aid=4045652',
                },
                danmaku: {
                    id: '9E2E3368B56CDBB46',
                    api: 'https://api.prprpr.me/dplayer/',
                    addition: ['https://api.prprpr.me/dplayer/bilibili?aid=4045652']
                }
            });
        </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>