需求：

3.打開視頻若該視頻以前已經學習過一段時間，則再次打開能夠跳至上次播放的位置繼續播放。html

4.視頻每隔5秒進行一次打點調後端接口，記錄當前學習時間，視頻暫停、報錯則清除定時器。java

如何調用阿里播放器？

1.在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.開始調用；

建立調用播放器的dom瀏覽器

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

在須要播放器的頁面中 mounted方法裏初始化播放器;dom

this.ideovSource = this.ideovUrl + this.$route.params.fileId + "/output.m3u8"
            // 初始化播放器
            const that = this
            this.player = new Aliplayer({ id: "J_prismPlayer", // 容器id
                source: this.ideovSource,//視頻地址
                // cover: "http://cdn.img.mtedu.com/images/assignment/day_3.jpg", //播放器封面圖
                autoplay: true,      // 是否自動播放
                width: "100%",       // 播放器寬度
                height: "610px",      // 播放器高度
                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 } ] } ] })

效果圖：ide

默認是播放狀態學習

若是想更改視頻中按鈕的樣式，能夠參考：在線配置this

而後根據你的需求更改皮膚自定義。

3.添加播放視頻限制：

只有從列表頁跳轉過來的，纔會帶播放視頻參數，若是沒有則提示（要麼在視頻播放頁點擊刷新按鈕；要麼複製視頻連接新開頁面粘貼到地址欄）

在初始化播放器前加如下代碼：

//是否出發拖拽事件
            this.haveSeek = false
            // 先判斷是不是複製的 url 進入到播放頁面
            if (!this.$route.params.Ids && !this.$route.params.fileId) { this.$message({ message: '暫未獲取到視頻信息，請從列表頁從新打開', type: 'warning' }); return }

4.添加已經播放視頻標識：

在初始化播放器後加如下代碼：

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: '您已經有正在播放的視屏，不能同時播放多個!', 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.處理播放器拖拽事件、播放事件、銷燬事件（記錄是否拖拽，獲取拖拽時間，用於判斷視頻是否被拖拽大於15秒）

在上面代碼下繼續追加如下代碼：

//視頻由暫停恢復爲播放時觸發。
            that.player.on('completeSeek', function ({paramData}) { that.haveSeek = true that.playTime = paramData; }) //視頻由暫停恢復爲播放時觸發。
            that.player.on('playing', function (e) { that.playTime = that.player.getCurrentTime(); }) //視頻銷燬。
            that.player.on('dispose', function (e) { if (JSON.parse(localStorage.getItem('havePlay'))) { window.localStorage.removeItem("havePlay"); } that.clearIntervalFun(); })

6.監聽播放時間：playTime

 watch: { playTime(val, oldVal) { //獲取拖拽時間,大於5秒則不進行打點
                const that = this
                if ((that.haveSeek && that.record.type !== 2) && (val - oldVal > 15) && that.isEvaluator.length !== 0) { that.clearIntervalFun(); that.$message({ message: '拖拽時間不能大於15秒', type: 'warning' }); } } },

7.視頻滾動到上次播放時間的位置

在獲取視頻詳情方法中：methods——>

播放器的play 方法中知足必定條件，調定時事件：recordFun 方法。

播放器的 canplaythrough 方法中，滾動到上次播放時間的位置。

 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//課程id
                        that.record.coursewareId = that.detailsDt.id//課件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: '您已經有正在播放的視屏，不能同時播放多個!', type: 'warning' }); } if (that.userInfo.roleList.length !== 0) { that.isEvaluator = that.userInfo.roleList.filter(function (item) { //用戶角色集合,2-等保測評師，3-內容管理員，4-聯盟管理員，5-普通用戶，6-講師
                                    if (item == 2) { return item } }) } //只有是測評師而且沒有學習完時才進行打點
                            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));//設置播放到我上次播放的位置
 } } }); } }).catch(() => { }) },

8.定時器事件

 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：學習中，2：學習完成
                        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：學習中，2：學習完成
                    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.清除定時器：

//清除定時器
 clearIntervalFun() { const that = this
                if (that.intervalTime) { clearInterval(that.intervalTime); that.intervalTime = null; } },

10.阻止F5刷新事件，監聽瀏覽器刷新事件

判斷若是在正在播放的視頻頁面，按了刷新按鈕，清除有視頻播放標識

//阻止F5刷新
 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 } } } }, //瀏覽器刷新事件
 beforeunloadHandler (e) { if (JSON.parse(localStorage.getItem('havePlay'))&& JSON.parse(localStorage.getItem('havePlay')).currentTime == this.currentTime) { window.localStorage.removeItem("havePlay"); } },

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

需求：