DPlayer视频播放器使用方法介绍
最近在项目开发中需要在Web页面中嵌入视频播放器，并且通过监听一些事件来记录访问者对于视频的一些操作，在此记录使用方法，方便查询使用：
1、在页面中加载库文件
//视频播放器对应样式文件
2、创建HTML
3、初始化视频var dplayer = new DPlayer({
element: document.getElementById('dplayer'),
autoplay: false,
theme: '#FADFA3',
loop: false,
screenshot: true, //截屏
hotkey: false,
logo: '/public/assets/images/server/favicon.ico',
video: { //视频源 包含不同分辨率源
quality: [{
name: '普清',
url: url1
},{
name: '高清',
url: url2
}, {
name: '超清',
url: url3
}],
defaultQuality: 0,
pic: '',
type: 'auto'
}
});
4、事件：
play, 播放时触发
pause, 暂停时触发
canplay,
playing, 播放时触发
ended, 视频播放结束时触发
error 出错时触发
5、事件监听：
（1）通过on方法绑定事件
dplayer.on(event, callback)
EG： dplayer.on('play',funcition(){
console.log("start play video");
})(2)通过dplayer.video.current对象设置 ondurationchange onerror onload onloadeddata
onloadedmetadata onloadstart onmousedown onmouseenter onmouseleave
onmousemove onmouseout onmouseover onmouseup onmousewheel
onpause onplay onplaying onpointercancel onpointerdown onpointerenter
onpointerleave onpointermove onpointerout onpointerover onpointerup
onprogress onratechange onreset onresize onseeked onseeking
ontimeupdate onvolumechange onwaiting onwaitingforkey
onwebkitfullscreenchange onwebkitfullscreenerror
EG: dplayer.video.current.onplay = function(){
console.log("start play video");
}
6、获取当前视频播放时间： dplayer.video.current.currentTime
7、支持弹幕
DPlayer 是一个支持弹幕的 HTML5 视频播放器。支持 Bilibili 视频和 danmaku，实时视频（HTTP Live Streaming，M3U8格式）以及 FLV 格式。
用法
HTML
选项
var dp = new DPlayer({
element: document.getElementById('player1'), // 可选，player元素
autoplay: false, // 可选，自动播放视频，不支持移动浏览器
theme: '#FADFA3', // 可选，主题颜色，默认: #b7daff
loop: true, // 可选，循环播放音乐，默认：true
lang: 'zh', // 可选，语言，`zh'用于中文，`en'用于英语，默认：Navigator
language
screenshot: true, // 可选，启用截图功能，默认值：false，注意：如果设置为
true，视频和视频截图必须启用跨域
hotkey: true, // 可选，绑定热键，包括左右键和空格，默认值：true
preload: 'auto', // 可选，预加载的方式可以是'none''metadata''auto'，默认
值：'auto'
video: { // 必需，视频信息
url: '若能绽放光芒.mp4', // 必填，视频网址
pic: '若能绽放光芒.png' // 可选，视频截图
},
danmaku: { // 可选，显示弹幕，忽略此选项以隐藏弹幕
id: '9E2E3368B56CDBB4', // 必需，弹幕 id，注意：它必须是唯一的，不能在你的新播放器
中使用这些： `https://api.prprpr.me/dplayer/list`
api: 'https://api.prprpr.me/dplayer/', // 必需，弹幕 api
token: 'tokendemo', // 可选，api 的弹幕令牌
maximum: 1000, // 可选，最大数量的弹幕
addition: ['https://api.prprpr.me/dplayer/bilibili?aid=4157142'] // 可选的，额外的弹幕，参见：`Bilibili弹幕支持`
}
});
事件绑定
dp.on（event, handler）事件：
play: DPlayer 开始播放时触发
pause: DPlayer 暂停时触发
canplay: 在有足够的数据可以播放时触发
playing: DPlayer 播放时定期触发
ended: DPlayer 结束时触发 error: 发生错误时触发
HLS支持（实时视频，M3U8格式）
它需要 hls.js 库，并且应该在 DPlayer.min.js 之前加载。实时弹幕尚不支持。
FLV支持
它需要 flv.js 库，并且应该在 DPlayer.min.js 之前加载。
使用bundler模块
var DPlayer = require('DPlayer');
var dp = new DPlayer(option);