DPlayer 是一个支持弹幕的 HTML5 视频播放器。支持 Bilibili 视频和 danmaku,支持HLS,FLV,MPEG DASH,WebTorrent以及其他视频格式,支持截屏、热键、切换清晰度以及字幕等。
安装
使用 npm:
npm install dplayer --save
知识兔使用 Yarn:
yarn add dplayer
知识兔入门
先载入所需文件:
<link rel="stylesheet" href="https://zhishitu.com">
<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