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')
            };
        });
    // });
},