您现在的位置是：技术博客 > 前端前端

Dplayer播放器

Lucas2021-03-26 19:33【代码】931人已围观

简介Dplayer 是一个支持弹幕的 HTML5 视频播放器。

Dplayer 是一个支持弹幕的 HTML5 视频播放器。

以下是一个简单地案例，部分代码如下，完整代码<a href="https://www.mylucas.com.cn/download/share/dplayer.zip" target='_blank'>点此</a>下载。更多介绍和用法进入<a href="http://dplayer.js.org/zh/" target='_blank'>官网</a>查看。

#### HTML代码

```
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>DPlayer示例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css">
    <link rel="stylesheet" href="index.css">
    <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="https://cdn.jsdelivr.net/npm/pearplayer"></script>
    <script src="DPlayer.min.js"></script>
</head>

<body class="markdown-body">
    <h2>在 dialog 中承载视频</h2>
    <h3 id="dplayer-dialog" class="show-dialog">Show Dialog</h3>
    <div id="float-dplayer" class="float-dplayer">
        <div id="dplayer-container" class="dplayer-container"></div>
        <h3 id="close-dialog" class="close-dialog">X</h3>
    </div>

<h2 id="options">示例2：按键操作</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>
    </div>

<h2 id="quality-switching">示例3：切换画质</h2>
    <div class="example">
        <button class="btn" onclick="dp3.switchQuality(1)">切换画质</button>
        <div id="dplayer3"></div>
    </div>
    
    <h2 id="hls-support">示例3：HLS协议支持</h2>
    <div class="example">
        <div id="dplayer4"></div>
    </div>
    
    <h2 id="dash-support">示例8：MPEG-DASH格式支持</h2>
    <div class="example">
        <div id="dplayer8"></div>
    </div>

<h2 id="flv-support">示例5：FLV格式支持</h2>
    <div class="example">
        <div id="dplayer5"></div>
    </div>
    
    <h2 id="webtorrent">示例9：WebTorrent</h2>
    <div class="example">
        <div id="dplayer9"></div>
    </div>
    
    <h2 id="live">示例6：Live</h2>
    <div class="example">
        <button class="btn" onclick="dp6.danmaku.draw({text: '假装收到 WebSocket 弹幕', color: '#fff', type: 'right'})">假装收到 WebSocket 弹幕</button>
        <div id="dplayer6"></div>
    </div>

</html>

```

#### demo.js代码

```
// stats.js: JavaScript Performance Monitor
const stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.dom);
function animate() {
    stats.begin();
    // monitored code goes here
    stats.end();

requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

initPlayers();
handleEvent();

function handleEvent() {
    document.getElementById('dplayer-dialog').addEventListener('click', (e) => {
        const $clickDom = e.currentTarget;
        const isShowStatus = $clickDom.getAttribute('data-show');

if (isShowStatus) {
            document.getElementById('float-dplayer').style.display = 'none';
        } else {
            $clickDom.setAttribute('data-show', 1);
            document.getElementById('float-dplayer').style.display = 'block';
        }
    });
    document.getElementById('close-dialog').addEventListener('click', () => {
        const $openDialogBtnDom = document.getElementById('dplayer-dialog');
        console.log('触发关闭“弹框视频”的点击事件');
        $openDialogBtnDom.setAttribute('data-show', '');
        document.getElementById('float-dplayer').style.display = 'none';
    });
}

function initPlayers() {
    // dplayer-float
    window.dpFloat = new DPlayer({
        // 播放器容器元素
        container: document.getElementById('dplayer-container'),
        // 视频预加载，可选值: 'none', 'metadata', 'auto'
        preload: 'none',
        // 开启截图，如果开启，视频和视频封面需要允许跨域
        screenshot: true,
        video: {
            // 视频地址
            url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4',
            // 视频封面
            pic: 'source0.mp4_092346633.jpg',
            // pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg',
            // 视频缩略图，可以使用 DPlayer-thumbnails (opens new window)生成
            thumbnails: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg'
        },
        // 外挂字幕
        subtitle: {
            // 字幕链接
            // url: 'subtitle test'
        },
        // 弹幕库
        danmaku: {
            id: '9E2E3368B56CDBB4',
            api: 'https://api.prprpr.me/dplayer/'
        }
    });
    // dp1
    window.dp1 = new DPlayer({
        container: document.getElementById('dplayer1'),
        preload: 'none',
        screenshot: true,
        video: {
            url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
            pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
            thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg'
        },
        subtitle: {
            url: 'https://s-sh-17-dplayercdn.oss.dogecdn.com/hikarunara.vtt'
        },
        danmaku: {
            id: '9E2E3368B56CDBB4',
            api: 'https://api.prprpr.me/dplayer/',
            addition: ['https://s-sh-17-dplayercdn.oss.dogecdn.com/1678963.json']
        }
    });

// dp2 参数文档地址：http://dplayer.js.org/zh/guide.html#%E5%8F%82%E6%95%B0
    window.dp2 = new DPlayer({
        container: document.getElementById('dplayer2'),
        preload: 'none',
        // 视频自动播放
        autoplay: true,
        // 主题色默认"#b7daff"
        theme: '#FADFA3',
        // 视频循环播放
        loop: true,
        // 开启截图，如果开启，视频和视频封面需要允许跨域
        screenshot: true,
        // 在 Safari 中开启 AirPlay
        airplay: true,
        // 开启热键，支持快进、快退、音量控制、播放暂停
        hotkey: true,
        // 在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置
        logo: 'https://i.loli.net/2019/06/06/5cf8c5d94521136430.png',
        // 默认音量，默认值 0.7，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
        volume: 0.2,
        // 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器，默认true
        mutex: true,
        video: {
            url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
            pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
            thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg',
            type: 'auto'
        },
        subtitle: {
            url: 'https://s-sh-17-dplayercdn.oss.dogecdn.com/hikarunara.vtt',
            type: 'webvtt',
            fontSize: '25px',
            bottom: '10%',
            color: '#b7daff'
        },
        danmaku: {
            id: '9E2E3368B56CDBB4',
            api: 'https://api.prprpr.me/dplayer/',
            token: 'tokendemo',
            maximum: 3000,
            user: 'DIYgod',
            bottom: '15%',
            unlimited: true
        },
        contextmenu: [
            {
                text: 'custom contextmenu',
                link: 'https://github.com/MoePlayer/DPlayer'
            }
        ]
    });

const 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'
    ];
    const 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;
        });
    }

// dp3
    window.dp3 = new DPlayer({
        container: document.getElementById('dplayer3'),
        preload: 'none',
        video: {
            quality: [{
                // 高清画质参数
                name: 'HD',
                url: 'https://m3u8.liuyue1234.com/20210311/ZgQHibg8/index.m3u8',
                // url: 'http://ivi.bupt.edu.cn/hls/cctv2.m3u8',
                // url: 'https://s-sh-17-dplayercdn.oss.dogecdn.com/hikarunara.m3u8',
                type: 'hls'
            }, {
                // 标清画质参数
                name: 'SD',
                url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
                type: 'normal'
            }],
            defaultQuality: 0,
            pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png'
        }
    });

// // dp4
    window.dp4 = new DPlayer({
        container: document.getElementById('dplayer4'),
        preload: 'none',
        video: {
            url: 'http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8',
            type: 'hls'
        }
    });

// // dp5
    window.dp5 = new DPlayer({
        container: document.getElementById('dplayer5'),
        preload: 'none',
        video: {
            url: 'source2.flv',
            type: 'flv'
        }
    });

window.dp8 = new DPlayer({
        container: document.getElementById('dplayer8'),
        preload: 'none',
        video: {
            url: 'https://moeplayer.b0.upaiyun.com/dplayer/dash/hikarunara.mpd',
            type: 'dash'
        }
    });

// 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',
    //     live: true,
    //     danmaku: true,
    //     apiBackend: {
    //         read: function (endpoint, callback) {
    //             console.log('假装 WebSocket 连接成功');
    //             callback();
    //         },
    //         send: function (endpoint, danmakuData, callback) {
    //             console.log('假装通过 WebSocket 发送数据', danmakuData);
    //             callback();
    //         }
    //     },
    //     video: {
    //         url: 'http://ivi.bupt.edu.cn/hls/cctv4.m3u8',
    //         type: 'hls'
    //     }
    // });

// window.dp10 = new DPlayer({
    //     container: document.getElementById('dplayer10'),
    //     video: {
    //         url: 'https://qq.webrtc.win/tv/Pear-Demo-Yosemite_National_Park.mp4',
    //         type: 'pearplayer',
    //         customType: {
    //             'pearplayer': function (video, player) {
    //                 new PearPlayer(video, {
    //                     src: video.src,
    //                     autoplay: player.options.autoplay
    //                 });
    //             }
    //         }
    //     }
    // });
}

function clearPlayers() {
    for (let i = 0; i < 6; i++) {
        window['dp' + (i + 1)].pause();
        document.getElementById('dplayer' + (i + 1)).innerHTML = '';
    }
}

function switchDPlayer() {
    if (dp2.option.danmaku.id !== '5rGf5Y2X55qu6Z2p') {
        dp2.switchVideo({
            url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4',
            pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg',
            type: 'auto',
        }, {
            id: '5rGf5Y2X55qu6Z2p',
            api: 'https://api.prprpr.me/dplayer/',
            maximum: 3000,
            user: 'DIYgod'
        });
    } else {
        dp2.switchVideo({
            url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
            pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
            thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg',
            type: 'auto'
        }, {
            id: '9E2E3368B56CDBB42',
            api: 'https://api.prprpr.me/dplayer/',
            maximum: 3000,
            user: 'DIYgod'
        });
    }

// const sourceList = [
    //     { name: 'cctv1', src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8' },
    //     { name: 'cctv2', src: 'http://ivi.bupt.edu.cn/hls/cctv2.m3u8' },
    //     { name: 'CCTV3高清', src: 'http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8' },
    //     { name: 'CCTV4高清', src: 'http://ivi.bupt.edu.cn/hls/cctv4.m3u8' },
    //     { name: 'CCTV5+高清', src: 'http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8' },
    //     { name: 'CCTV6高清', src: 'http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8' },
    //     { name: 'CCTV7高清', src: 'http://ivi.bupt.edu.cn/hls/cctv7.m3u8' },
    //     { name: 'CCTV-8高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv8hd.m3u8' },
    //     { name: 'CCTV-9高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv9.m3u8' },
    //     { name: 'CCTV-10高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv10.m3u8' },
    //     { name: 'CCTV-11高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv11.m3u8' },
    //     { name: 'CCTV-12高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv12.m3u8' },
    //     { name: 'CCTV-13高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv13.m3u8' },
    //     { name: 'CCTV-14高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv14.m3u8' },
    //     { name: 'CCTV-15高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv15.m3u8' },
    //     { name: 'CHC高清电影 ', src: 'http://ivi.bupt.edu.cn/hls/chchd.m3u8' },
    //     { name: '北京卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/btv1hd.m3u8' },
    //     { name: '北京文艺高清 ', src: 'http://ivi.bupt.edu.cn/hls/btv2hd.m3u8' },
    //     { name: '湖南卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/hunanhd.m3u8' },
    //     { name: '浙江卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/zjhd.m3u8' },
    //     { name: '江苏卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/jshd.m3u8' },
    //     { name: '东方卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/dfhd.m3u8' },
    //     { name: '安徽卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/ahhd.m3u8' },
    //     { name: '黑龙江卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/hljhd.m3u8' },
    //     { name: '辽宁卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/lnhd.m3u8' },
    //     { name: '深圳卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/szhd.m3u8' },
    //     { name: '广东卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/gdhd.m3u8' },
    //     { name: '天津卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/tjhd.m3u8' },
    //     { name: '湖北卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/hbhd.m3u8' },
    //     { name: '东南卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/sdhd.m3u8' },
    //     { name: '北京纪实高清 ', src: 'http://ivi.bupt.edu.cn/hls/btv11hd.m3u8' },

//     //
    //     { name: '民视新闻台 ', src: 'https://6.mms.vlog.xuite.net/hls/ftvtv/index.m3u8' },
    //     // 上面为可用的

//   ];
}
```

很赞哦！ ( 0 )

上一篇：Node.js安装和使用

下一篇：layui使用小技巧