1.在public文件下的index.html文件中插入以下代码：
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>2.在你要调用播放器的vue文件中：
this.ideovSource = this.ideovUrl + this.$route.query.fileId + "/output.m3u8"
// 初始化播放器
this.player = new Aliplayer({
id: "J_prismPlayer", // 容器id
source: this.ideovSource,//视频地址
// cover: "http://cdn.img.mtedu.com/images/assignment/day_3.jpg", //播放器封面图
autoplay: false, // 是否自动播放
width: "100%", // 播放器宽度
height: "610px", // 播放器高度
playsinline: true,
"skinLayout": [
{
"name": "bigPlayButton",
"align": "blabs",
"x": 30,
"y": 80
},
{
"name": "H5Loading",
"align": "cc"
},
{
"name": "errorDisplay",
"align": "tlabs",
"x": 0,
"y": 0
},
{
"name": "infoDisplay"
},
{
"name": "tooltip",
"align": "blabs",
"x": 0,
"y": 56
},
{
"name": "thumbnail"
},
{
"name": "controlBar",
"align": "blabs",
"x": 0,
"y": 0,
"children": [
{
"name": "progress",
"align": "blabs",
"x": 0,
"y": 44
},
{
"name": "playButton",
"align": "tl",
"x": 15,
"y": 12
},
{
"name": "timeDisplay",
"align": "tl",
"x": 10,
"y": 7
},
{
"name": "fullScreenButton",
"align": "tr",
"x": 10,
"y": 12
},
{
"name": "volume",
"align": "tr",
"x": 5,
"y": 10
}
]
}
]
})
//skinLayout设置只显示全屏和音量按钮配置好后如图：
默认的配置，打开后视频
如果你不知道怎么配置，可以看在线配置，然后在皮肤自定义中，勾选自己需要的功能，勾选好后在代码中查看它的配置。然后直接复制粘贴。
需求如下:
1.当用户开始播放视频后，每隔5秒打点一次，调后端接口记录当前学习时间，当视频报错、暂停、结束则停止打点
2.要记录用户观看时间，用户下次进入时不用从头看，直接快进到上次播放的位置，并且只有正在学习的才会快进到上次播放位置，已经学完的不用快进到上次播放的位置，用户可重新观看只是不再打点。
3.用户在观看视频的过程中不能一次拖动太多，当拖动时间大于15秒后，则给用户一个提示，并且就不再打点调用后端接口给后端实时跟新当前视频播放进度。
4.只有测评师才记录学习时间。
5.视频可以切换
具体代码：
//点击另外一个视频，则重新加载视频地址
that.player.loadByUrl(that.ideovSource)
var seeked = false;
that.player.on('play', function (e) {
let evaluator = []
if (that.userInfo.roleList.length !== 0) {
evaluator = that.userInfo.roleList.filter(function (item) {
//用户角色集合,2-等保测评师，3-内容管理员，4-联盟管理员，5-普通用户，6-讲师
if (item == 2) {
return item
}
})
}
//只有是测评师并且没有学习完时才进行打点
if (that.record.type !== 2 && evaluator.length !== 0) {
that.recordFun()
}
});
that.player.on('canplaythrough', function (e) {
if (!seeked) {
seeked = true;
if (that.record.type === 1) {
that.player.seek(Number(that.detailsDt.schedule));//设置播放到我上次播放的位置
}
}
});recordFun代码：
recordFun() {
const that = this
that.intervalTime = setInterval(function () {
var currentTime = that.player.getCurrentTime();
that.record.schedule = currentTime
//1：学习中，2：学习完成
that.record.type = 1
that.$store.dispatch("CPE/recordAct", that.record)
}, 5000);
//清除定时器
function clear() {
if (that.intervalTime) {
clearInterval(that.intervalTime);
that.intervalTime = null;
}
}
this.player.on('ended', function (e) {
that.record.schedule = that.record.resourceSize
//1：学习中，2：学习完成
that.record.type = 2
that.$store.dispatch("CPE/recordAct", that.record)
clear();
});
this.player.on('pause',function (e) {
clear();
});
this.player.on('error',function (e) {
clear();
});
}这段直接在初始化播放器下面插入就可以拉
//视频由暂停恢复为播放时触发。
that.player.on('completeSeek', function ({paramData}) {
//获取拖拽时间,大于5秒则不进行打点
if (paramData > 15) {
if (that.intervalTime) {
clearInterval(that.intervalTime);
that.intervalTime = null;
}
that.$message({
message: '拖拽时间不能大于15秒',
type: 'warning'
});
}
})