<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QCloud VIDEO UGC UPLOAD SDK</title>
  <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="//v3.bootcss.com/assets/css/docs.min.css">
  <style type="text/css">
    .text-danger {
      color: red;
    }
    .control-label {
      text-align: left !important;
    }
    #resultBox {
      width: 100%;
      height: 300px;
      border: 1px solid #888;
      padding: 5px;
      overflow: auto;
      margin-bottom: 20px;
    }
    .uploaderMsgBox {
      width: 100%;
      border-bottom: 1px solid #888;
    }
    .cancel-upload {
      text-decoration: none;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="bs-docs-header" id="content">
    <div class="container">
      <h1>UGC-Uploader</h1>
    </div>
  </div>
  <div class="container bs-docs-container" id="main-area">
    <div class="row" style="padding:10px;">
      <p>
        1.示例中的签名是直接从demo后台获取签名。该 demo 对应的点播账号已开启防盗链功能，此视频分发 URL 仅限 2 个独立 IP 进行访问，有效期为 10 分钟。<br>
        2.示例1点击“直接上传视频”按钮即可上传视频。<br>
        3.示例2点击“添加视频”添加视频文件，点击“添加封面”添加封面文件，然后点击“上传视频和封面”按钮即可上传视频和封面。<br>
        4.取消上传为取消上传中的视频，上传成功的视频不能取消上传。
      </p>
    </div>

    <form ref="vExample">
      <input type="file" style="display:none;" ref="vExampleFile" @change="vExampleUpload" />
    </form>
    <div class="row" style="padding:10px;">
      <h4>示例1：直接上传视频</h4>
      <a href="javascript:void(0);" class="btn btn-outline" @click="vExampleAdd">直接上传视频</a>
    </div>

    <form ref="vcExample">
      <input type="file" style="display:none;" ref="vcExampleVideo" @change="setVcExampleVideoName()" />
      <input type="file" style="display:none;" ref="vcExampleCover" @change="setVcExampleCoverName()" />
    </form>
    <div class="row" style="padding:10px;">
      <h4>示例2：上传视频和封面</h4>
      <a href="javascript:void(0);" class="btn btn-outline" @click="vcExampleAddVideo">{{vcExampleVideoName || '添加视频'}}</a>
      <a href="javascript:void(0);" class="btn btn-outline" @click="vcExampleAddCover">{{vcExampleCoverName || '添加封面'}}</a>
      <a href="javascript:void(0);" class="btn btn-outline" @click="vcExampleAddUpload">上传视频和封面</a>
    </div>

    <form ref="cExample">
      <input type="file" style="display:none;" ref="cExampleCover" @change="cExampleUpload" />
    </form>
    <div class="row form-group form-group-sm" style="padding:10px;">
      <h4>示例3：修改封面</h4>
      <label class="col-sm-1" style="padding: 0;">fileId：</label>
      <div class="col-sm-4">
        <input name="fileId" class="form-control" v-model="cExampleFileId"></input>
      </div>
      <div class="col-sm-4">
        <a href="javascript:void(0);" class="btn btn-outline" @click="cExampleAddCover">修改封面</a>
      </div>
    </div>
    <div class="row" id="resultBox">
      <!-- 上传信息组件	 -->
      <div class="uploaderMsgBox" v-for="uploaderInfo in uploaderInfos">
        <div v-if="uploaderInfo.videoInfo">
          视频名称：{{uploaderInfo.videoInfo.name + '.' + uploaderInfo.videoInfo.type}}；
          上传进度：{{Math.floor(uploaderInfo.progress * 100) + '%'}}；
          fileId：{{uploaderInfo.fileId}}；
          上传结果：{{uploaderInfo.isVideoUploadSuccess ? '上传成功' : '上传中'}}；
          <br>
          地址：{{uploaderInfo.videoUrl}}；
          <a href="javascript:void(0);" class="cancel-upload" v-if="!uploaderInfo.isVideoUploadSuccess" @click="uploaderInfo.cancel()">取消上传</a><br>
        </div>

        <div v-if="uploaderInfo.coverInfo">
          封面名称：{{uploaderInfo.coverInfo.name}}；
          上传进度：{{Math.floor(uploaderInfo.coverProgress * 100) + '%'}}；
          上传结果：{{uploaderInfo.isCoverUploadSuccess ? '上传成功' : '上传中'}}；
          <br>
          地址：{{uploaderInfo.coverUrl}}；
          <br>
        </div>
      </div>
    </div>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
  <script src="//cdn.bootcss.com/vue/2.5.21/vue.js"></script>
  <script src="//cdn.bootcss.com/axios/0.18.0/axios.js"></script>
  <script src="//unpkg.com/vod-js-sdk-v6"></script>

  <script type="text/javascript">
    ;(function () {
      /**
       * 计算签名
      **/
      function getSignature() {
//        return axios.post('https://demo.vod2.myqcloud.com/ugc-upload/', JSON.stringify({
//          "Action": "GetUgcUploadSign"
//        })).then(function (response) {
//          return response.data.data.sign
//        })
        return axios.post("{:url('Cloudtencent/sign')}", JSON.stringify({
          "Action": "GetUgcUploadSign"
        })).then(function (response) {
            console.log(response.data.result);
          return response.data.result
        })
      };
      /*
        防盗链地址获取
      */
      function getAntiLeechUrl(videoUrl, callback) {
        return axios.post('https://demo.vod2.myqcloud.com/ugc-upload/', JSON.stringify({
          Action: "GetAntiLeechUrl",
          Url: videoUrl,
        })).then(function (response) {
          return response.data.data.url
        })
      }
      var app = new Vue({
        el: '#main-area',
        data: {
          uploaderInfos: [],
          vcExampleVideoName: '',
          vcExampleCoverName: '',
          cExampleFileId: '',
        },
        created: function () {
          this.tcVod = new TcVod.default({
            getSignature: getSignature
          })
        },
        methods: {
          /**
           * vExample示例。添加视频
          **/
          vExampleAdd: function () {
            this.$refs.vExampleFile.click()
          },
          /**
           * vExample示例。上传视频过程。
          **/
          vExampleUpload: function () {
            var self = this;
            var videoFile = this.$refs.vExampleFile.files[0]
            console.log(videoFile);
            var uploader = this.tcVod.upload({
              videoFile: videoFile,
            })
            uploader.on('video_progress', function (info) {
              uploaderInfo.progress = info.percent;
            })
            uploader.on('video_upload', function (info) {
              uploaderInfo.isVideoUploadSuccess = true;
            })
            console.log(uploader, 'uploader')
            var uploaderInfo = {
              videoInfo: uploader.videoInfo,
              isVideoUploadSuccess: false,
              progress: 0,
              fileId: '',
              videoUrl: '',
              cancel: function() {
                uploader.cancel()
              },
            }
            this.uploaderInfos.push(uploaderInfo)
            uploader.done().then(function(doneResult) {
              console.log('doneResult', doneResult)
              uploaderInfo.fileId = doneResult.fileId;
              return getAntiLeechUrl(doneResult.video.url);
            }).then(function (videoUrl) {
              uploaderInfo.videoUrl = videoUrl
              self.$refs.vExample.reset();
            })
          },
          setVcExampleVideoName: function () {
            this.vcExampleVideoName = this.$refs.vcExampleVideo.files[0].name;
          },
          setVcExampleCoverName: function () {
            this.vcExampleCoverName = this.$refs.vcExampleCover.files[0].name;
          },
          /*
            vcExample添加视频
          */
          vcExampleAddVideo: function () {
            this.$refs.vcExampleVideo.click()
          },
          /*
            vcExample添加封面
          */
          vcExampleAddCover: function () {
            this.$refs.vcExampleCover.click()
          },
          /*
            vcExample上传过程
          */
          vcExampleAddUpload: function () {
            var self = this;
            var videoFile = this.$refs.vcExampleVideo.files[0];
            var coverFile = this.$refs.vcExampleCover.files[0];
            var uploader = this.tcVod.upload({
              videoFile: videoFile,
              coverFile: coverFile,
            })
            uploader.on('video_progress', function(info) {
              uploaderInfo.progress = info.percent;
            })
            uploader.on('video_upload', function(info) {
              uploaderInfo.isVideoUploadSuccess = true;
            })
            uploader.on('cover_progress', function(info) {
              uploaderInfo.coverProgress = info.percent;
            })
            uploader.on('cover_upload', function(info) {
              uploaderInfo.isCoverUploadSuccess = true;
            })
            console.log(uploader, 'uploader')
            var uploaderInfo = {
              videoInfo: uploader.videoInfo,
              coverInfo: uploader.coverInfo,
              isVideoUploadSuccess: false,
              isCoverUploadSuccess: false,
              progress: 0,
              coverProgress: 0,
              fileId: '',
              videoUrl: '',
              coverUrl: '',
              cancel: function () {
                uploader.cancel()
              },
            }
            this.uploaderInfos.push(uploaderInfo)
            uploader.done().then(function (doneResult) {
              console.log('doneResult', doneResult)
              uploaderInfo.fileId = doneResult.fileId;
              uploaderInfo.coverUrl = doneResult.cover.url;
              return getAntiLeechUrl(doneResult.video.url);
            }).then(function (videoUrl) {
              uploaderInfo.videoUrl = videoUrl
              self.$refs.vcExample.reset();
              self.vcExampleVideoName = ''
              self.vcExampleCoverName = ''
            })
          },
          // cExample 添加封面
          cExampleAddCover: function() {
            this.$refs.cExampleCover.click()
          },
          // cExample 上传过程
          cExampleUpload: function() {
            var self = this;
            var coverFile = this.$refs.cExampleCover.files[0];
            var uploader = this.tcVod.upload({
              fileId: this.cExampleFileId,
              coverFile: coverFile,
            })
            uploader.on('cover_progress', function(info) {
              uploaderInfo.coverProgress = info.percent;
            })
            uploader.on('cover_upload', function(info) {
              uploaderInfo.isCoverUploadSuccess = true;
            })
            console.log(uploader, 'uploader')
            var uploaderInfo = {
              coverInfo: uploader.coverInfo,
              isCoverUploadSuccess: false,
              coverProgress: 0,
              coverUrl: '',
              cancel: function () {
                uploader.cancel()
              },
            }
            this.uploaderInfos.push(uploaderInfo)
            uploader.done().then(function (doneResult) {
              console.log('doneResult', doneResult)
              uploaderInfo.coverUrl = doneResult.cover.url;
              self.$refs.cExample.reset();
            })
          },
        },
      })
    })();
  </script>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-26476625-7"></script>
  <script>
    // add by alsotang@gmail.com
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-26476625-7');
  </script>

</body>

</html>