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"><p id="dplayer"></p><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
以上就上有关DPlayer–H5视频播放器支持弹幕的全部内容,学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。