一、DPlayer
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);
参数
名称默认值描述containerdocument.querySelector('.dplayer')播放器容器元素livefalse开启直播模式autoplayfalse视频自动播放theme'#b7daff'主题色loopfalse视频循环播放langnavigator.language.toLowerCase()可选值: 'en', 'zh-cn', 'zh-tw'screenshotfalse开启截图，如果开启，视频和视频封面需要开启跨域hotkeytrue开启热键preload'auto'预加载，可选值: 'none', 'metadata', 'auto'volume0.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.urlrequired字幕链接subtitle.type'webvtt'字幕类型，可选值: 'webvtt', 'ass'，目前只支持 webvttsubtitle.fontSize'20px'字幕字号subtitle.bottom'40px'字幕距离播放器底部的距离，取值形如: '10px' '10%'subtitle.color'#fff'字幕颜色danmaku-显示弹幕danmaku.idrequired弹幕池id，必须唯一danmaku.apirequired-danmaku.token-弹幕后端验证 tokendanmaku.maximum-弹幕最大数量danmaku.addition-额外外挂弹幕danmaku.user'DIYgod'弹幕用户名danmaku.bottom-弹幕距离播放器底部的距离，防止遮挡字幕，取值形如: '10px' '10%'danmaku.unlimitedfalse海量弹幕模式，即使重叠也展示全部弹幕，请注意播放器会记忆用户设置，用户手动设置后即失效contextmenu[]自定义右键菜单mutextrue互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
示例:
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
