最近在项目开发中需要在Web页面中嵌入视频播放器，并且通过监听一些事件来记录访问者对于视频的一些操作，在此记录使用方法，方便查询使用
1、在页面中加载库文件<link rel="stylesheet" href="./assets/lib/dplayer/dist/DPlayer.min.css"/> //视频播放器对应样式文件
<script src="../assets/lib/dplayer/dist/DPlayer.min.js"></script>2、创建HTML<div id="dplayer"></div>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 onloadeddataonloadedmetadata onloadstart onmousedown onmouseenter onmouseleaveonmousemove onmouseout onmouseover onmouseup onmousewheelonpause onplay onplaying onpointercancel onpointerdown onpointerenteronpointerleave onpointermove onpointerout onpointerover onpointeruponprogress onratechange onreset onresize onseeked onseekingontimeupdate onvolumechange onwaiting onwaitingforkeyonwebkitfullscreenchange onwebkitfullscreenerrorEG: dplayer.video.current.onplay = function(){console.log("start play video");}
6、获取当前视频播放时间： dplayer.video.current.currentTime7、支持弹幕DPlayer 是一个支持弹幕的 HTML5 视频播放器。支持 Bilibili 视频和 danmaku，实时视频（HTTP Live Streaming，M3U8格式）以及 FLV 格式。 用法
HTML
<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="dist/DPlayer.min.js"></script>选项
var dp = new DPlayer({element: document.getElementById('player1'), // 可选，player元素autoplay: false, // 可选，自动播放视频，不支持移动浏览器theme: '#FADFA3', // 可选，主题颜色，默认: #b7daffloop: true, // 可选，循环播放音乐，默认：truelang: 'zh', // 可选，语言，`zh'用于中文，`en'用于英语，默认：Navigator languagescreenshot: true, // 可选，启用截图功能，默认值：false，注意：如果设置为true，视频和视频截图必须启用跨域hotkey: true, // 可选，绑定热键，包括左右键和空格，默认值：truepreload: '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/', // 必需，弹幕 apitoken: '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 之前加载。实时弹幕尚不支持。<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="plugin/hls.min.js"></script>
<script src="dist/DPlayer.min.js"></script><script>
var dp = new DPlayer({
// ...
video: {
url: 'xxx.m3u8'
// ...
}
});
</script>FLV支持
它需要 flv.js 库，并且应该在 DPlayer.min.js 之前加载。<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="plugin/flv.min.js"></script>
<script src="dist/DPlayer.min.js"></script><script>
var dp = new DPlayer({
// ...
video: {
url: 'xxx.flv'
// ...
}
});
</script>使用bundler模块
var DPlayer = require('DPlayer');
var dp = new DPlayer(option);详细参考官网文档：http://dplayer.js.org/zh/guide.html#api
