云点播上传视频

最新推荐文章于 2024-06-17 17:46:40 发布

海涛高软

最新推荐文章于 2024-06-17 17:46:40 发布

阅读量677

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_15267341/article/details/103760380

版权

小程序专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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="/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.text-danger {
	color: red;
}

.control-label {
	text-align: left !important;
}

#resultBox {
	width: 60%;
	height: 200px;
	border-top: 1px dotted #888;
	padding: 5px;
	overflow: auto;
	margin-bottom: 20px;
	margin-top:50px;
}

.uploaderMsgBox {
	width: 100%;
}

.cancel-upload {
	text-decoration: none;
	cursor: pointer;
}
</style>
</head>

<body>
	<div class="container" id="main-area">

		<div style="width: 75%; margin-top: 35px;">
			<div class="input-group" style="margin-bottom: 30px;">
				<input class="form-control" type="text" :value="vcExampleVideoName">
				<label class="input-group-btn"> <a
					href="javascript:void(0);" class="btn btn-default"
					@click="vcExampleAddVideo">添加视频</a>
				</label>
			</div>





			<div class="input-group" style="margin-bottom: 30px;">
				<input class="form-control" :value="vcExampleCoverName"> <label
					class="input-group-btn"> <a href="javascript:void(0);"
					class="btn btn-default" @click="vcExampleAddCover">添加封面</a>
				</label>
			</div>

			<div style="font-size: 18px; margin-bottom: 30px;">
				<a href="javascript:void(0);" class="btn btn-default"
					@click="vcExampleAddUpload">开始上传</a>
			</div>

		</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" id="resultBox">
			<!-- 上传信息组件	 -->
			<div class="uploaderMsgBox" v-for="uploaderInfo in uploaderInfos">
				<div v-if="uploaderInfo.videoInfo">
					视频名称：{{uploaderInfo.videoInfo.name + '.' +
					uploaderInfo.videoInfo.type}}；<br/>
					上传进度：{{Math.floor(uploaderInfo.progress * 100) + '%'}}；<br/>
					上传结果：{{uploaderInfo.isVideoUploadCancel ? '已取消' :
					uploaderInfo.isVideoUploadSuccess ? '上传成功' : '上传中'}}； 
				</div>

				<div v-if="uploaderInfo.coverInfo"  style="border-top:1px dotted  #888; margin-top:25px;">
					封面名称：{{uploaderInfo.coverInfo.name}}；<br/>
					上传进度：{{Math.floor(uploaderInfo.coverProgress * 100) + '%'}}；<br/>
					上传结果：{{uploaderInfo.isCoverUploadSuccess ? '上传成功' : '上传中'}}； <br>
				</div>
			</div>
		</div>


	</div>
	<script
		src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/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.get('/signature/getUgcUploadSign').then(function (response) {
          return response.data.signature
        })
      };
      /*
        防盗链地址获取。这是腾讯云官网demo的特殊逻辑，用户可忽略此处。
      */
      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: {
          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 mediaFile = this.$refs.vcExampleVideo.files[0];
            var coverFile = this.$refs.vcExampleCover.files[0];
            var uploader = this.tcVod.upload({
              mediaFile: mediaFile,
              coverFile: coverFile,
            })
            uploader.on('media_progress', function(info) {
              uploaderInfo.progress = info.percent;
            })
            uploader.on('media_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,
              isVideoUploadCancel: false,
              isCoverUploadSuccess: false,
              progress: 0,
              coverProgress: 0,
              fileId: '',
              videoUrl: '',
              coverUrl: '',
              cancel: function () {
                uploaderInfo.isVideoUploadCancel = true;
                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 = ''
            })
          },
        },
      })
    })();
  </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>

@RequestMapping("getUgcUploadSign")
	@ResponseBody
	public Object getUgcUploadSign() {
		Signature sign = new Signature();
		sign.setSecretId("AKIDWtNeff1AbaF1AHST");
		sign.setSecretKey("bqeMk4AA");
		sign.setCurrentTime(System.currentTimeMillis() / 1000);
		sign.setRandom(new Random().nextInt(java.lang.Integer.MAX_VALUE));
		sign.setSignValidDuration(3600 * 24 * 2);
		sign.setProcedure("xuhaitao");
		
		Map<String, String> map = Maps.newHashMap();
		String signature="";
		try {
			signature = sign.getUploadSignature();

		} catch (Exception e) {
			e.printStackTrace();
		}
		map.put("signature", signature);
		return map;
	}

FR:徐海涛（hunk Xu）
QQ技术交流群：386476712

海涛高软

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
云点播上传视频

<!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...
复制链接

扫一扫

专栏目录