DPlayer – H5视频播放器支持弹幕

admin · 发表于 2024-5-25 18:24:47

DPlayer 是一个支持弹幕的 HTML5 视频播放器。支持 Bilibili 视频和 danmaku，支持HLS，FLV，MPEG DASH，WebTorrent以及其他视频格式，支持截屏、热键、切换清晰度以及字幕等。
安装

使用 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.url	-	视频链接
video.pic	-	视频封面
video.thumbnails	-	视频缩略图，可以使用 DPlayer-thumbnails 生成
video.type	'auto'	可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定义类型
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.toggle()：切换播放和暂停

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

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

dp.notice(text: string, time: number)：显示通知，时间的单位为毫秒，默认时间2000毫秒，默认透明度0.8

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

dp.destroy()：销毁播放器

dp.speed(rate: number)：设置视频速度

dp.volume(percentage: number, nostorage: boolean, nonotice: boolean)：设置视频音量

dp.video：原生 video

----dp.video.currentTime：返回视频当前播放时间

----dp.video.duration：返回视频总时间

----dp.video.paused：返回视频是否暂停

事件绑定

dp.on（event, handler）

play：DPlayer 开始播放时触发

pause：DPlayer 暂停时触发

canplay：在有足够的数据可以播放时触发

playing：DPlayer 播放时定期触发

ended：DPlayer 结束时触发

error：发生错误时触发

DPlayer对hls和flv格式的支持需要相应的插件。

更多有关DPlayer的使用请参考项目官网：https://github.com/MoePlayer/DPlayer