Dplayer播放器同时支持手机和pc播放,支持弹幕,支持清晰度。
支持:mp4,m3u8,flv等视频格式。
是个很不错的视频播放器, 小灰灰强烈推荐使用。
(如果本地运行环境无法播放,请上传到服务器或者空间里进行测试播放。小灰灰测试本地环境的时候,网络视频流(2G视频),无法在本地播放, 但是上传到服务器上之后就能正常播放,这个是什么梗小灰灰暂时没看明白!!!)
在线演示地址(官方):http://dplayer.js.org/#html5-check
官方文档:http://dplayer.js.org/docs/#/
GitHub : https://github.com/DIYgod/DPlayer
方便查询使用说明,方便以后使用:
1、在页面中加载库文件
1 2 | <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、初始化视频
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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
灰灰整理好的可以直接使用的代码:(需要用服务器网站运行环境才能播放)
百度云下载:密码:hovt