阿里云Aliplayer视频播放2（断点续播--根据上次播放记录实现续播功能）

封装了一个视频组件

具体一些阿里云视频播放常见问题，请看官方文档：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（断点续播--根据上次播放记录实现续播功能）相关推荐

阿里云Aliplayer视频播放（web播放器）
1.官方文档https://help.aliyun.com/document_detail/125548.html?spm=a2c4g.11186623.6.1089.3f4b317c0dCNvV 2 ...
React+阿里云Aliplayer播放器实现rtmp直播（推流时间差，重启播放器，计时观看）
需求前端框架为React 用阿里云播放器Aliplayer播放直播使用的rtmp协议资料阿里云播放器 Web端文档:https://help.aliyun.com/document_detai ...
android阿里云基础视频播放器
android阿里云基础视频播放器记录: 1.阿里云视频播放器sdk地址:https://help.aliyun.com/document_detail/61910.html?spm=a2c4g.11 ...
阿里云服务器安全组开放指定端口无法访问问题记录
前言最近新上线项目,决定启用新的阿里云服务器,服务端项目打包之后部署到服务器,项目正常启动,在阿里云控制台开放指定端口之后接口访问不通,这里记录一下出现的问题的原因以及处理方案. 问题处理过程首先 ...
阿里云 Aliplayer高级功能介绍(二)：缩略图
为什么80%的码农都做不了架构师?>>> 基本介绍 Aliplayer提供了缩略图的功能,让用户在拖动进度条之前知道视频的内容,用户能够得到很好的播放体验,缩略图是显示在Con ...
阿里云 Aliplayer高级功能介绍(三)：多字幕
基本介绍国际化场景下面,播放器支持多字幕,可以有效解决视频的传播障碍难题,该功能适用于视频内容在全球范围内推广,阿里云的媒体处理服务提供接口可以生成多字幕,现在先看一下具体的效果: WebVTT格式 ...
阿里云 Aliplayer高级功能介绍(四)：直播时移
基本介绍时移直播基于常规的HLS视频直播,直播推流被切分成TS分片,通过HLS协议向播放用户分发,用户请求的m3u8播放文件中包含不断刷新的TS分片地址:对于常规的HLS直播而言,TS分片地址及相应 ...
阿里云视频点播视频播放出现network timeout问题处理
问题说明:一大早问题测试小哥跑来说APP所有课程都不能播放,页面显示: 处理过程: 先确认一下APP服务端是否正常--后台显示正常; 然后登录阿里云控制台音视频点播,视频中播放地址从浏览器打开之后都 ...
阿里云 Aliplayer高级功能介绍(七)：多分辨率
基本介绍网络环境比较复杂.网速不稳定,Aliplayer提供了多分辨率播放的模式,用户可以手工切换分辨率和播放器选择最优分辨率,基本UI如下: 66ccc596257a5db1d0f106b5745 ...
阿里云服务器4核8G配置多少钱？新购和续费价格分别是多少？
阿里云服务器4核8G配置多少钱?目前新用户购买4核8G配置云服务器最低为73.38元/3月起,年付最低是765.94元/年起,到期续费多少钱?目前新购之后续费享受4.5折.详细的收费标准.活动报价及续 ...

阿里云Aliplayer视频播放2（断点续播--根据上次播放记录实现续播功能）

阿里云Aliplayer视频播放2（断点续播--根据上次播放记录实现续播功能）相关推荐

最新文章

热门文章