美文网首页
七牛云获取视频第一帧

七牛云获取视频第一帧

作者: 云三木 | 来源:发表于2019-11-19 18:11 被阅读0次

调用七牛云上传接口后返回的视频链接后直接拼上 ?vframe/jpg/offset/0,就可以直接显示第一帧。
代码示例(我的项目用的是vue-cli):

    // 七牛云文件上传
    qiniuUpload(fileList) {
      let self = this;
      let targetlist = "";
      self.isWaiting = true;
      let file = event.target.files[0];
      let type = file.name.split(".");
      // if(file.size > 1024*1024*4)
      // {
      //     Toast('上传头像图片大小不能超过 4MB!')
      //     return false
      // }
      let reader = new FileReader();
      reader.readAsDataURL(file);
      event.target.value = "";
      reader.onload = function(e) {
        console.log(targetlist.length);
      };

      // 上传qiniu
      const promise = new this.request().fetch(
        this.apis.getApiByKey("GET_QINIU_TOKEN")
      );
      promise.then(res => {
        let token = res.data.uptoken;
        let config = {
          useCdnDomain: true,
          disableStatisticsReport: false,
          retryCount: 5,
          region: qiniu.region.z0
        };
        let putExtra = {
          fname: "",
          params: {}
        };
        let key = new Date().toLocaleString().replace(/\/|[\u4e00-\u9fa5]|:|\s+/g, "") + "_" + self.MathRand() + "." + type[type.length - 1];
        let domain = "dkscimages.pxmsw.cn";
        var observer = {
          next(res) {
            if (res.total.percent == 100) {
              // 上传进度为 100%
              self.isWaiting = false;
            }
          },
          error(err) {
            // console.log(err)
          },
          complete(res) {
            let resultUrl = "https://" + domain + "/" + res.key;
            targetlist.push(resultUrl);
            // 获取视频第一帧的地址
            // resultUrl是视频的地址 ,拼接上 ?vframe/jpg/offset/1 就是视频第一帧的图片的地址
            self.videoFirstFrame_url = resultUrl + "?vframe/jpg/offset/0";
            self.selectVideo_url = resultUrl;
          }
        };
        let observable = qiniu.upload(file, key, token, putExtra, config);
        var subscription = observable.subscribe(observer);
        setTimeout(function() {
          if(self.isWaiting){
            // 取消上传
            subscription.unsubscribe();
            self.isWaiting = false;
            Toast("上传超时,请重新上传!");
          }
        },30000);
      });
    },
    MathRand() {
      var Num = "";
      for (var i = 0; i < 5; i++) {
        Num += Math.floor(Math.random() * 10);
      }
      return Num;
    },

相关文章

网友评论

      本文标题:七牛云获取视频第一帧

      本文链接:https://www.haomeiwen.com/subject/sojgictx.html