安装
使用 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
来源: http://www.tuicool.com/articles/m6jyYjn