vue+element-ui中引入阿里播放器

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