更新记录
1.0.3(2023-06-03) 下载此版本
1、修复移动端滑动快进快退提示问题,更改滑动样式 2、修复header部分遮罩问题 3、修复部分其他样式问题
1.0.2(2023-05-30) 下载此版本
1、修复部分样式
1.0.1(2023-05-29) 下载此版本
1.修复部分样式问题 2.修复网页全屏
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
× | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
基于DPlayer的手机端H5播放器,支持dplayer的大部分功能,具体参数dplayer官方文档,如需开启p2p加速,请参考CBplayer官方文档,以下仅提供部分手机端使用说明,特别提示(部分图标来自于互联网,可能存在侵权行为,商用请根据源码修改图标样式,此处插件仅供学习使用,如有侵权一切后果自行承担)。
QQ群: 938902755
demo体验地址: http://player.is-great.net/
教程:
1、 index.html 引入
<script src="./js/flv.min.js"></script> //flv格式需引入 (按需引入)
<script src="./js/hls.js"></script> //m3u8格式需引入 (按需引入)
<script src="./js/AipPlayer.min.js"></script>
2、初始化播放器
var player = new AipPlayer({
container: document.getElementById("aplayer"),
header: true, //全屏显示头部信息(返回图标+标题)
title: "demo", //视频标题
autoplay: true, //自动播放
minHeader: true, //非全屏时是否显示 标题
playNext: true, //全屏时是否显示下一集图标 选集数组小于等于1时不显示
screenshot: false,
airplay: false,
loop: false, //循环播放 默认false
live: false, //是否是直播
playbackSpeed: [1.0, 1.25, 1.5, 2.0, 2.5,3.0],
playbackSpeedTxt: "倍数",
speedIndex: 0, //playbackSpeed数组下标 初始的速度 默认0
showMobilePlay: false, //手机中心播放暂停图标
currentIndex: 0, //设置当前激活选集的下标索引 默认0,
height: 240, //播放器高度
spisodes: [], //选集 [{"name":"01"},{"name":"02"}] 数组小于等于1时不显示
spisodesTxt: "选集",
showDanmaku: true, //弹幕开启 配置danmaku后才可生效 false关闭图标样式切换等
landscape: false, //手机端默认进入横屏全屏时设置true 默认false
video: {
url: this.src, //视频url
pic: '/static/face.jpg' //封面
},
});
3、事件列表(仅列举部分事件) 其他事件参考官方文档
//播放
player.play()
//暂停
player.pause()
//销毁
player.destroy()
//跳转
player.jump(100) //跳转多少秒位置
//视频切换
player.switchVideo({
url: that.src,
pic: '/static/face.jpg'
});
4、监听事件列表(仅列举部分事件) 其他事件参考官方文档
//播放
player.on('play', function() {
});
//下一集
player.on('playnext', function() {
alert("下一集");
});
//选集
player.on('changeSpisodes', function() {
let currentIndex = player.options.currentIndex;
//点击时,会修改spisodes索引下标,根据下标获取视频url
player.switchVideo({url: that.src,pic: '/static/face.jpg'});
player.play();
});
//全屏
player.on('fullscreen', function() {
alert("全屏");
});
//退出全屏
player.on('fullscreen_cancel', function() {
alert("退出全屏");
});
//截屏
player.on('screenshot', function() {
alert("截屏");
});
//返回
player.on('back', function() {
//全屏时 返回图标退出全屏 非全屏时触发此事件
alert("返回");
});
//倍数
player.on('speed_change', function() {
})
//收藏
player.on('collect', function() {
});
//分享
player.on('share', function() {
});
5.属性(仅列举部分属性)
player.video.currentTime //当前时间
player.video.duration //视频总长
//可根据player.options获取相关属性
player.options.currentIndex;
player.options.speedIndex;
player.options.title;
6.获取组件
//可根据player.template获取相关组件,更多组件请参考源码template.js 中信息。
player.template.batteryInfo //电量信息(全屏时显示)
player.template.playButton //播放按钮
player.template.lockScreenButton //锁屏按钮
player.template.browserFullButton //全屏按钮
player.template.mobileDanmuButton //移动端弹幕
player.template.mobileShareButton //分享
player.template.backButton //返回
player.template.playnextButton //下一集
player.template.mobileSetButton //设置