DPlayer

Wow, such a lovely HTML5 danmaku video player

安装

使用 npm :

npm install dplayer --save

使用 Yarn :

yarn add dplayer

入门

<link rel="stylesheet" href="DPlayer.min.css">
<div id="dplayer"></div>
<script src="DPlayer.min.js"></script>

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    screenshot: true,
    video: {
        url: 'demo.mp4',
        pic: 'demo.jpg',
        thumbnails: 'thumbnails.jpg'
    },
    subtitle: {
        url: 'webvtt.vtt'
    },
    danmaku: {
        id: 'demo',
        api: 'https://api.prprpr.me/dplayer/'
    }
});

使用模块管理器:

import 'DPlayer/dist/DPlayer.min.css';
import DPlayer from 'DPlayer';

const dp = new DPlayer(options);

参数

名称	默认值	描述
container	document.querySelector('.dplayer')	播放器容器元素
live	false	开启直播模式, 详情
autoplay	false	视频自动播放
theme	'#b7daff'	主题色
loop	false	视频循环播放
lang	navigator.language.toLowerCase()	可选值: 'en', 'zh-cn', 'zh-tw'
screenshot	false	开启截图，如果开启，视频和视频封面需要开启跨域
hotkey	true	开启热键
preload	'auto'	可选值: 'none', 'metadata', 'auto'
volume	0.7	默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
logo	-	在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置
apiBackend	-	自定义获取和发送弹幕行为，详情
video	-	视频信息
video.quality	-	详情
video.defaultQuality	-	详情
video.url	-	视频链接
video.pic	-	视频封面
video.thumbnails	-	视频缩略图，可以使用 DPlayer-thumbnails 生成
video.type	'auto'	可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent' 或其他自定义类型, 详情
video.customType	-	自定义类型, 详情
subtitle	-	外挂字幕
subtitle.url	required	字幕链接
subtitle.type	'webvtt'	字幕类型，可选值: 'webvtt', 'ass'，目前只支持 webvtt
subtitle.fontSize	'20px'	字幕字号
subtitle.bottom	'40px'	字幕距离播放器底部的距离，取值形如: '10px' '10%'
subtitle.color	'#fff'	字幕颜色
danmaku	-	显示弹幕
danmaku.id	required	弹幕池id，必须唯一
danmaku.api	required	详情
danmaku.token	-	弹幕后端验证 token
danmaku.maximum	-	弹幕最大数量
danmaku.addition	-	额外外挂弹幕，详情
danmaku.user	'DIYgod'	弹幕用户名
danmaku.bottom	-	弹幕距离播放器底部的距离，防止遮挡字幕，取值形如: '10px' '10%'
danmaku.unlimited	false	海量弹幕模式，即使重叠也展示全部弹幕，请注意播放器会记忆用户设置，用户手动设置后即失效
contextmenu	[]	自定义右键菜单
mutex	true	互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器

例如:

const dp = new DPlayer({
    container: document.getElementById('player'),
    autoplay: false,
    theme: '#FADFA3',
    loop: true,
    lang: 'zh-cn',
    screenshot: true,
    hotkey: true,
    preload: 'auto',
    logo: 'logo.png',
    volume: 0.7,
    mutex: true,
    video: {
        url: 'dplayer.mp4',
        pic: 'dplayer.png',
        thumbnails: 'thumbnails.jpg',
        type: 'auto'
    },
    subtitle: {
        url: 'dplayer.vtt',
        type: 'webvtt',
        fontSize: '25px',
        bottom: '10%',
        color: '#b7daff'
    },
    danmaku: {
        id: '9E2E3368B56CDBB4',
        api: 'https://api.prprpr.me/dplayer/',
        token: 'tokendemo',
        maximum: 1000,
        addition: ['https://api.prprpr.me/dplayer/bilibili?aid=4157142'],
        user: 'DIYgod',
        bottom: '15%',
        unlimited: true
    },
    contextmenu: [
        {
            text: 'custom1',
            link: 'https://github.com/DIYgod/DPlayer'
        },
        {
            text: 'custom2',
            click: (player) => {
                console.log(player);
            }
        }
    ]
});

API

• dp.play() : 播放视频

• dp.pause() : 暂停视频

• dp.seek(time: number) : 跳转到特定时间

  dp.seek(1000);

• dp.toggle() : 切换播放/暂停

• dp.on(event: string, handler: function) : 绑定视频和播放器事件,详情

• dp.switchVideo(video, danmaku) : 切换到其他视频

  dp.switchVideo({
      url: 'second.mp4',
      pic: 'second.png',
      thumbnails: 'second.jpg'
  }, {
      id: 'test',
      api: 'https://api.prprpr.me/dplayer/',
      maximum: 3000,
      user: 'dorence'
  });
  

• dp.destroy(): 销毁播放器

• dp.notice(text: string, time: number) : 显示消息

• dp.switchQuality(index: number) : 切换清晰度

• dp.speed(rate: number) : 设置视频速度(0.0625 - 16)

• dp.video: 原生 video

  • dp.video.currentTime : 返回视频当前播放时间

  • dp.video.loop : 返回视频是否循环播放

  • dp.video.paused: 返回视频是否暂停

  • 支持大多数原生video接口

• dp.danmaku

  • dp.danmaku.send(danmaku, callback: function) : 提交一个新弹幕

    dp.danmaku.send({
       text: 'dplayer is amazing',
       color: '#b7daff',
       type: 'right'   // should be `top` `bottom` or `right`
    }, function () {
       console.log('success');
    });
    

  • dp.danmaku.draw(danmaku): 实时绘制一个新弹幕

    dp.danmaku.draw({
       text: 'DIYgod is amazing',
       color: '#fff',
       type: 'top'
    });
    

  • dp.danmaku.opacity(percentage: number): 设置弹幕透明度(0 - 1)

  • dp.danmaku.clear() : 清除所有弹幕

  • dp.danmaku.hide() : 隐藏弹幕

  • dp.danmaku.show() : 显示弹幕

• dp.fullScreen: 两个类型：web 和 browser，默认类型是 browser

  • dp.fullScreen.request(type: string): 进入全屏

    dp.fullScreen.request('web');
    

  • dp.fullScreen.cancel(type: string): 退出全屏

    dp.fullScreen.cancel('web');
    

事件绑定

dp.on(event, handler)

dp.on('ended', function () {
    console.log('player ended');
});

视频事件

• abort
• canplay
• canplaythrough
• durationchange
• emptied
• ended
• error
• loadeddata
• loadedmetadata
• loadstart
• mozaudioavailable
• pause
• play
• playing
• progress
• ratechange
• seeked
• seeking
• stalled
• suspend
• timeupdate
• 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
• subtitle_show
• subtitle_hide
• subtitle_change

清晰度切换

在 video.quality 里设置不同清晰度的视频链接和类型，video.defaultQuality 设置默认清晰度

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        quality: [{
            name: 'HD',
            url: 'demo.m3u8',
            type: 'hls'
        }, {
            name: 'SD',
            url: 'demo.mp4',
            type: 'normal'
        }],
        defaultQuality: 0,
        pic: 'demo.png',
        thumbnails: 'thumbnails.jpg',
    }
});

弹幕

弹幕接口

danmaku.api

现成的接口

链接: https://api.prprpr.me/dplayer/

每日备份: DPlayer-data

自己搭建

DPlayer-node

Bilibili 弹幕

danmaku.addition

API: https://api.prprpr.me/dplayer/v2/bilibili?aid=[aid] or https://api.prprpr.me/dplayer/v2/bilibili?cid=[cid]

const option = {
    danmaku: {
        // ...
        addition: ['https://api.prprpr.me/dplayer/v2/bilibili?aid=[aid]']
    }
}

MSE 支持

HLS

需要在 DPlayer.min.js 前面加载 hls.js。

<link rel="stylesheet" href="DPlayer.min.css">
<div id="dplayer"></div>
<script src="hls.min.js"></script>
<script src="DPlayer.min.js"></script>

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.m3u8',
        type: 'hls'
    }
});

// 另一种方式，使用 customType
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.m3u8',
        type: 'customHls',
        customType: {
            'customHls': function (video, player) {
                const hls = new Hls();
                hls.loadSource(video.src);
                hls.attachMedia(video);
            }
        }
    }
});

MPEG DASH

需要在 DPlayer.min.js 前面加载 dash.js。

<link rel="stylesheet" href="DPlayer.min.css">
<div id="dplayer"></div>
<script src="dash.min.js"></script>
<script src="DPlayer.min.js"></script>

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.mpd',
        type: 'dash'
    }
});

// 另一种方式，使用 customType
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.mpd',
        type: 'customDash',
        customType: {
            'customDash': function (video, player) {
                dashjs.MediaPlayer().create().initialize(video, video.src, false);
            }
        }
    }
});

FLV

需要在 DPlayer.min.js 前面加载 flv.js。

<link rel="stylesheet" href="DPlayer.min.css">
<div id="dplayer"></div>
<script src="flv.min.js"></script>
<script src="DPlayer.min.js"></script>

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.flv',
        type: 'flv'
    }
});

// 另一种方式，使用 customType
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.flv',
        type: 'customFlv',
        customType: {
            'customFlv': function (video, player) {
                const flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    url: video.src
                });
                flvPlayer.attachMediaElement(video);
                flvPlayer.load();
            }
        }
    }
});

WebTorrent

需要在 DPlayer.min.js 前面加载 webtorrent。

<link rel="stylesheet" href="DPlayer.min.css">
<div id="dplayer"></div>
<script src="webtorrent.min.js"></script>
<script src="DPlayer.min.js"></script>

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'magnet:demo',
        type: 'webtorrent'
    }
});

// 另一种方式，使用 customType
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'magnet:demo',
        type: 'customWebTorrent',
        customType: {
            'customWebTorrent': function (video, player) {
                player.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(video, {
                        autoplay: player.options.autoplay
                    }, () => {
                        player.container.classList.remove('dplayer-loading');
                    });
                });
            }
        }
    }
});

直播

你可以把 DPlayer 用在直播当中，但如果你想要直播弹幕，你需要自己准备一个 WebSocket 后端。

初始化播放器:

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    live: true,
    danmaku: true,
    apiBackend: {
        read: function (endpoint, callback) {
            console.log('Pretend to connect WebSocket');
            callback();
        },
        send: function (endpoint, danmakuData, callback) {
            console.log('Pretend to send danamku via WebSocket', danmakuData);
            callback();
        }
    },
    video: {
        url: 'demo.m3u8',
        type: 'hls'
    }
});

通过 WebSocket 获取到弹幕之后，通过 dp.danmaku.draw 绘制弹幕:

const danmaku = {
    text: 'Get a danamku via WebSocket',
    color: '#fff',
    type: 'right'
};
dp.danmaku.draw(danmaku);

CDN

• bootcdn
• jsDelivr
• cdnjs
• unpkg

常见问题

为什么播放器不能全屏？

如果播放器被包含在 iframe 里，尝试在 iframe 上添加 allowfullscreen 属性。

为了完善的浏览器兼容性，它应该是这样：

<iframe src="example.com" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen"
    msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen"
    webkitallowfullscreen="webkitallowfullscreen"></iframe>

为什么播放器不能在手机上自动播放？

大多数移动端浏览器禁止了视频自动播放。