Introducing Ali player into Vue + element UI

Requirements:

1. Only one video can be played at a time.

2. It is forbidden to refresh the playing page.

3. Open video if the video has been learning for some time, open it again to skip to the position last played to continue playing.

4. The video shall be clocked and adjusted every 5 seconds to record the current learning time,Clear timer if video pause or error.

5. Only when the assessor is learning, he / she can do the marking, and can't drag it for about 15 seconds.

How to call Ali player?

1. In index.html Introduced in:

<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. Start calling;

Create dom to call player

<div class="video-tem">
                    <div id="J_prismPlayer" class="prism-player"></div>
                </div>

Initialize the player in the mounted method on the page where the player is needed;

this.ideovSource = this.ideovUrl + this.$route.params.fileId + "/output.m3u8"
            // Initialize player
            const that = this
            this.player = new Aliplayer({
                id: "J_prismPlayer", // container id
                source: this.ideovSource,//Video address
                // cover: "http://cdn.img.mtedu.com/images/assignment/day_3.jpg ", / / player cover
                autoplay: true,      // Auto play or not
                width: "100%",       // Player width
                height: "610px",      // Player height
                playsinline: true,
                "skinLayout": [
                    {
                        "name": "bigPlayButton",
                        "align": "blabs",
                        "x": 500,
                        "y": 300
                    },
                    {
                        "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
                            }
                        ]
                    }
                ]
            })

design sketch:

The default is the playback state

If you want to change the style of the buttons in the video, you can refer to: Online configuration

Then change the skin customization according to your needs.

3. Add restrictions on playing video:

Only those who jump from the list page will bring video parameters. If not, they will be prompted (either click refresh on the video page or copy the video link and paste it into the address bar)

Add the following code before initializing the player:

//Whether to start dragging event
            this.haveSeek = false
            // Judge whether it is copied first url Go to play page
            if (!this.$route.params.Ids && !this.$route.params.fileId) {
                this.$message({
                    message: 'No video information has been obtained. Please reopen from the list page',
                    type: 'warning'
                });
                return
            }

4. Add the played video ID:

Add the following code after initializing the player:

that.currentTime = new Date().getTime()
            if (localStorage.getItem('havePlay') && JSON.parse(localStorage.getItem('havePlay')).playerId !== that.$route.params.fileId) {
                that.player.pause()
                that.$message({
                    message: 'You already have a video screen that is playing. You cannot play multiple videos at the same time!',
                    type: 'warning'
                });
            } else if (!localStorage.getItem('havePlay')) {
                const obj = {
                    playerId: that.$route.params.fileId,
                    havePlay: true,
                    currentTime: that.currentTime
                }
                localStorage.setItem('havePlay', JSON.stringify(obj))
            }

5. Handle player drag events, play events, and destroy events (record whether to drag and obtain drag time, which is used to judge whether the video is dragged for more than 15 seconds)

Continue to append the following code under the above code:

//Triggered when the video is resumed from pause to play.
            that.player.on('completeSeek', function ({paramData}) {
                that.haveSeek = true
                that.playTime = paramData;
            })
            //Triggered when the video is resumed from pause to play.
            that.player.on('playing', function (e) {
                that.playTime = that.player.getCurrentTime();
            })
            //Video destruction.
            that.player.on('dispose', function (e) {
                if (JSON.parse(localStorage.getItem('havePlay'))) {
                    window.localStorage.removeItem("havePlay");
                }
                that.clearIntervalFun();
            })

6. Monitor playback time: playTime

        watch: {
            playTime(val, oldVal) {
                //Get drag time,If it's more than 5 seconds, the clock will not be clocked
                const that = this
                if ((that.haveSeek && that.record.type !== 2) && (val - oldVal > 15) && that.isEvaluator.length !== 0) {
                    that.clearIntervalFun();
                    that.$message({
                        message: 'Drag time cannot be greater than 15 seconds',
                        type: 'warning'
                    });
                }
            }
        },

7. Scroll the video to the last time

In the method of obtaining video details: methods -- >

In the player's play method, certain conditions are met, and the event is timed: the recordFun method.

In the player's canplaythrough method, scroll to the location of the last playback time.

            getDetailsAct(id) {
                const that = this
                that.$store.dispatch("CPE/detailsAct", id).then((response) => {
                    if (response.code === 200) {
                        that.detailsDt = that.$store.state.CPE.detailsDt
                        that.record = that.$store.state.CPE.detailsDt
                        that.record.courseId = that.detailsDt.rootId//curriculum id
                        that.record.coursewareId = that.detailsDt.id//Courseware id
                        that.ideovSource = that.ideovUrl + that.detailsDt.resourceFileId + "/output.m3u8"
                        that.player.loadByUrl(that.ideovSource)
                        var seeked = false;
                        that.player.on('play', function (e) {
                            if (localStorage.getItem('havePlay') && JSON.parse(localStorage.getItem('havePlay')).playerId !== that.$route.params.fileId) {
                                that.player.pause()
                                that.$message({
                                    message: 'You already have a video screen that is playing. You cannot play multiple videos at the same time!',
                                    type: 'warning'
                                });
                            }
                            if (that.userInfo.roleList.length !== 0) {
                                that.isEvaluator = that.userInfo.roleList.filter(function (item) {
                                    //User role collection,2-Warranty evaluator, 3-Content manager, 4-Federation administrator, 5-General users, 6-lecturer
                                    if (item == 2) {
                                        return item
                                    }
                                })
                            }
                            //Only when the assessor has not finished his study
                            if ((localStorage.getItem('havePlay') && JSON.parse(localStorage.getItem('havePlay')).playerId === that.$route.params.fileId) && (that.record.type !== 2 && that.isEvaluator.length !== 0)) {
                                that.recordFun()
                            }
                        });
                        that.player.on('canplaythrough', function (e) {
                            if (!seeked) {
                                seeked = true;
                                if (that.record.type === 1) {
                                    that.playTime = that.detailsDt.schedule
                                    that.player.seek(Number(that.detailsDt.schedule));//Set playback to where I last played
                                }
                            }
                        });
                    }
                }).catch(() => {
                })
            },

8. Timer event

            recordFun() {
                const that = this
                that.intervalTime = setInterval(function () {
                    if (that.record.type !== 2 && that.isEvaluator.length !== 0) {
                        var currentTime = that.player.getCurrentTime();
                        that.record.schedule = currentTime
                        //1: Learning, 2: learning completion
                        that.record.type = 1
                        that.$store.dispatch("CPE/recordAct", that.record)
                    }else {
                        that.clearIntervalFun();
                    }
                }, 5000);
                this.player.on('ended', function (e) {
                    window.localStorage.removeItem("havePlay");
                    that.record.schedule = that.record.resourceSize
                    //1: Learning, 2: learning completion
                    that.record.type = 2
                    that.$store.dispatch("CPE/recordAct", that.record)
                    that.clearIntervalFun();
                });
                this.player.on('pause',function  (e) {
                    that.clearIntervalFun();
                });
                this.player.on('error',function  (e) {
                    that.clearIntervalFun();
                    window.localStorage.removeItem("havePlay");
                });
            },

9. Clear timer:

//Clear timer
            clearIntervalFun() {
                const that = this
                if (that.intervalTime) {
                    clearInterval(that.intervalTime);
                    that.intervalTime = null;
                }
            },

10. Stop F5 refresh event and listen for browser refresh event

Judge if the video page is playing, press the refresh button to clear the video playing logo

//prevent F5 Refresh
            stopF5Refresh() {
                document.onkeydown = function (e) {
                    var evt = window.event || e;
                    var code = evt.keyCode || evt.which;
                    if (code == 116) {
                        if (evt.preventDefault) {
                            evt.preventDefault();
                        } else {
                            evt.keyCode = 0;
                            evt.returnValue = false
                        }
                    }
                }
            },
            //Browser refresh event
            beforeunloadHandler (e) {
                if (JSON.parse(localStorage.getItem('havePlay'))&& JSON.parse(localStorage.getItem('havePlay')).currentTime == this.currentTime) {
                    window.localStorage.removeItem("havePlay");
                }
            },

Tags: JSON Javascript

Posted on Wed, 20 May 2020 00:44:12 -0400 by Cyberspace