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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
							<!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="https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.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',
                },
                subtitle: {
                    url: 'http://devtest.qiniudn.com/若能绽放光芒2.vtt'
                },
                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,
                mutex: false,
                video: {
                    url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
                    pic: 'http://devtest.qiniudn.com/若能绽放光芒.png',
                    type: 'auto',
                    thumbnails: 'http://devtest.qiniudn.com/thumbnails.jpg'
                },
                subtitle: {
                    url: 'http://devtest.qiniudn.com/若能绽放光芒2.vtt',
                    type: 'webvtt',
                    fontSize: '25px',
                    bottom: '10%',
                    color: '#b7daff'
                },
                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',
                'subtitle_show', 'subtitle_hide', 'subtitle_change'
            ];
            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>

    <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>

    <h2 id="dash-support">MPEG DASH support</h2>
    <div class="example">
        <div id="dplayer10"></div>
        <script>
            var dp10 = new DPlayer({
                container: document.getElementById('dplayer10'),
                video: {
                    url: 'http://devtest.qiniudn.com/若能绽放光芒.mpd',
                    type: 'dash'
                }
            });
        </script>
    </div>

    <h2 id="live">Live</h2>
    <div class="example">
        <button class="btn" onclick="drawDanmaku()">假装收到 WebSocket 弹幕</button>
        <div id="dplayer11"></div>
        <script>
            var dp10 = new DPlayer({
                container: document.getElementById('dplayer11'),
                live: true,
                danmaku: true,
                apiBackend: {
                    read: function (endpoint, callback) {
                        setTimeout(function () {}, 1000);
                        console.log('假装 WebSocket 连接成功');
                        callback();
                    },
                    send: function (endpoint, danmakuData, callback) {
                        console.log('假装通过 WebSocket 发送数据', danmakuData);
                        setTimeout(function () {}, 1000);
                        callback();
                    }
                },
                video: {
                    url: 'http://devtest.qiniudn.com/若能绽放光芒5.m3u8',
                    type: 'hls'
                }
            });
            function drawDanmaku() {
                dp10.danmaku.draw({
                    text: '假装收到 WebSocket 弹幕',
                    color: '#fff',
                    type: 'right'
                })
            }
        </script>
    </div>

    <script src="https://unpkg.com/stats.js"></script>
    <script src="demo.js"></script>
</body>

</html>