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

￡神魔★判官ぃ 2022-12-18 15:59 151阅读 0赞

封装了一个视频组件

具体一些阿里云视频播放常见问题，请看官方文档：[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][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>

[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]: 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