?封裝了一個視頻組件

具體一些阿里云視頻播放常見問題，請看官方文檔：https://help.aliyun.com/document_detail/125576.html?spm=a2c4g.11186623.6.1102.744d6fc5K6PcMQ#%E5%A6%82%E4%BD%95%E5%88%87%E6%8D%A2vid%E5%92%8Cplayauth

<template><div class="isvideo"><div class="title"><span>{{ title }}</span><button @click="$emit('gocourse', catId)">返回課程主頁</button></div><div class="content"><div class="prism-player" id="myPlayer"></div></div></div> </template><script> import "../../../lib/aliyun-upload-sdk-1.5.0.min.js"; import "../../../lib/aliyun-oss-sdk-5.3.1.min.js"; import {getupdateStatusApi,getisvideoApi,getSeekTimeApi, } from "@/request/api"; export default {name: "isvideo",props: {resourceUrl: String,title: String,catId: [String, Number],menuId: [String, Number],joined: Boolean,chapterId: [String, Number],studyTime: String,},data() {return {isPlay: false,PlayAuth: "",videoUrl: "",videoId: "",coverUrl: "",player: "",seeked: false,timer: null,currentTime: "",Duration: "",videoTime:0,updateTimeFlag:false,lastTaskId:''};},//常用于時間監聽watch: {resourceUrl: function () {this.init();},},created() {this.init();},methods: {init() {//獲取憑證this.getToken(getisvideoApi, { videoId: this.resourceUrl }, (res) => {//通過接口拿到憑證this.PlayAuth = res.data.PlayAuth;this.Duration = res.data.VideoMeta.Duration;if (this.player ) {if(!this.updateTimeFlag){console.log("studyTime:",this.currentTime);this.getToken(getSeekTimeApi,{taskId: this.lastTaskId,courseId: this.catId,studyTime: this.currentTime,},(res) => {this.updateTimeFlag=true;// console.log(res);});}this.player.dispose();this.seeked=false;}this.videoTime = this.studyTime;this.lastTaskId = this.menuId;// console.log("續播時間為",this.videoTime,this.studyTime)//拿到封面this.coverUrl = res.data.VideoMeta.CoverURL;var that = this;//先判斷是否有沒有播放器容器，存在的話就要注銷this.player = new Aliplayer({id: "myPlayer", //播放器外層容器的dom元素idvid: this.resourceUrl, //視頻idplayauth: this.PlayAuth, // 播放憑證width: "100%", //樣式height: "700px", //樣式autoplay: false, // 自動播放isLive: false, // 直播cover: this.coverUrl, //播放器默認封面圖片,需要autoplay為’false’時，才生效rePlay: false, // 循環播放playsinline: true, //H5是否內置播放preload: false, //播放器自動加載language: "zh-cn",controlBarVisibility: "always", //控制面板的實現 ‘click’ 點擊出現、‘hover’ 浮動出現、‘always’ 一直在useH5Prism: true, //指定使用H5播放器encryptType: 1,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: "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,},],},],},function () {// console.log("playAuth:",that.playAuth);// player.replayByVidAndPlayAuth(that.resourceUrl,that.PlayAuth)console.log("創建成功了");// getTime();});//設置續播事件this.player.on("canplaythrough", function (e) {// if (that.studyTime != that.Duration) {// console.log("studyTime:",that.studyTime)// that.player.seek(that.studyTime);// }// console.log("studyTime>")// console.log("studyTime:",that.studyTime)if (!that.seeked&&that.videoTime!=that.Duration) {that.seeked = true;// console.log("續播！:",that.videoTime);that.player.seek(that.videoTime);}});function getTime() {that.currentTime = that.player.getCurrentTime();that.timer = setTimeout(getTime, 1000);}//清除定時器function clear() {if (that.timer) {clearTimeout(that.timer);that.timer = null;// console.log("currentTime:", that.currentTime);}that.getToken(getSeekTimeApi,{taskId: that.menuId,courseId: that.catId,studyTime:(that.seeked)?(that.currentTime + ""):that.videoTime,// studyTime:that.currentTime + ""},(res) => {that.updateTimeFlag=true;// console.log(res);});}this.player.on("ended", function (e) {that.videoTime = that.Duration;that.seeked=false;clear();});this.player.on("play", function (e) {that.updateTimeFlag=false;getTime();});this.player.on("pause", function (e) {console.log(2)that.seeked=true;clear();});this.player.on("error", function (e) {console.log(3)clear();});window.onbeforeunload = function (e) {e = e || window.event;// 兼容IE8和Firefox 4之前的版本if (e) {e.returnValue = "關閉提示";if (that.timer) {clear();}}// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+return "關閉提示";};// 監聽結束事件function endedHandle() {if (that.joined) {getupdateStatusApi({status: 1,courseId: that.catId,taskId: that.menuId,}).then(() => {that.$store.commit("getIds", {chapterId: that.chapterId,taskId: that.menuId,});});}}this.player.on("ended", endedHandle);});},}, }; </script> <style lang="stylus" scoped> .isvideo {.title {height: 65px;border-bottom: 1px solid #eee;margin-left: 38px;margin-right: 39px;display: flex;position: relative;span {color: #333333;font-size: 18px;padding-top: 30px;}button {border: 0;outline: none;width: 99px;height: 30px;background-color: #ffffff;border: solid 1px #cecece;color: #4182fa;font-size: 12px;position: absolute;right: 17px;top: 50%;transform: translateY(-50%);}}.content {margin: 0 auto;margin-top: 24px;margin-left: 33px;margin-right: 33px;margin-bottom: 50px;overflow: hidden;min-height: 800px;video {margin-top: 20px;width: 100%;}} } </style>

?

總結

以上是生活随笔為你收集整理的阿里云Aliplayer视频播放2（断点续播--根据上次播放记录实现续播功能）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。