阿里云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元素id
            vid: this.resourceUrl, //视频id
            playauth: 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>