aliplayer播放器使用

aliplayer播放器使用

项目背景：vue-cli3.0， 使用播放地址方式播放

1、aliplayer官网地址：(https://help.aliyun.com/document_detail/125548.html?spm=a2c4g.11186623.6.1099.33ee1bc7e0ebmi)

2、使用方式

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>

3、页面结构:

<div
v-if="hasvideo"
id="player-con"
style="height: 100%"
/>

4、js代码：

hastask：[
{name: "bigPlayButton", align: "cc"},
{
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:"subtitle", align:"tr",x:15, y:12},
{name:"setting", align:"tr",x:15, y:12},
{name: "volume", align: "tr", x: 5, y: 10}
]
}
],
// 参数说明： type类型：音频（'2'）视频（'1'）,seekTime(上次播放时间), iscomplate('本次播放视频是否看完')
getaliPlay(courseUrl,type ,seekTime, iscomplate) {
let hastask = [];
let contTime = seekTime;
if (!contTime) {
contTime = 0;
}
// 设置播放器高度
$('#player-con').height('100%');
// 初始化播放器时需判断页面中是否已存在播放器，如果存在就先remove掉后再重新创建
if ($('#J_prismPlayer').length > 0) {
this.player.dispose();
$('#J_prismPlayer').remove();
}
const boarddiv = '<div id="J_prismPlayer"></div>';
$('#player-con').append(boarddiv);
$('#J_prismPlayer').height('100%');
this.player = new Aliplayer({
id: 'J_prismPlayer',
source: courseUrl, // 播放地址
width: '100%',
height: '500px',
// seek: contTime,
cover: '', // 播放器封面
/* To set an album art, you must set 'autoplay' and 'preload' to 'false' */
autoplay: true, // 是否自动播放
preload: false,
isLive: false,
useH5Prism: true, // 使用h5播放器
skinLayout: hastask, // 重置播放器UI样式
x5_type: 'h5',
});
this.player.on('error', () => {
this.clearTimeing();
});
this.player.on('ready', () => {
contTime = contTime >= Math.round(this.player.getDuration())
? '0'
: contTime;
if (this.$route.query.taskId && !iscomplate) {
let video = null;
if(type === '2'){
video = document.querySelector('audio');
$('audio').addClass('pox');
}else if(type === '1'){
video = document.querySelector('video');
$('video').addClass('pox');
}
video.currentTime = contTime;
let supposedCurrentTime = 0;
let maxtime = contTime;
// 监听当前的播放位置发送改变时触发。
video.addEventListener('timeupdate', () => {
if (video.currentTime && video. > maxtime) {
maxtime = video.currentTime;
}
// seeking属性：显示用户是否在视频中寻址（用户在视频、音频中移动跳跃到新的位置）
if (!video.seeking) {
supposedCurrentTime = video.currentTime;
}
});
// prevent user from seeking
video.addEventListener('seeking', () => {
if (maxtime < video.currentTime) {
video.currentTime = supposedCurrentTime - 3.3;
}
});
}else {
if(type === '2' && $('audio').hasClass('pox')){
$('audio').romoveClass('pox');
}else if(type === '1' && $('video').hasClass('pox')){
$('video').removeClass('pox');
}
}
this.player.seek(contTime);
});
this.player.on("play", () => {
this.timing();
this.videoplay = true;
});
this.player.on('pause', () => {
this.videoplay = false;
this.saveLearningParams.courseId = localStorage.getItem(
'courseId',
);
this.saveLearningLog();
this.clearTimeing();
});
// this.player.on('requestFullScreen', () => {
// })
this.player.on('ended', () => {
// 保存记录
this.saveLearningLog();
this.clearTimeing();
for(let i = 0; i< this.allresouce.length; i++) {
if(this.currentvideo.detailId === this.allresouce[i].detailId){
this.nextvideo = this.allresouce[i+1];
}
}
if(this.nextvideo.detailType === '1'){
if(this.nextvideo.studyProcess){
this.continueTime = this.nextvideo.studyProcess.learningLength;
this.iscomplate = this.nextvideo.studyProcess.process === 100 ? true : false;
}
this.showvideo(this.nextvideo, this.continueTime, this.iscomplate, 'auto')
};
});
// });
},

最后

以上就是朴素野狼为你收集整理的aliplayer播放器使用的全部内容，希望文章能够帮你解决aliplayer播放器使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。