部署授权服务
目前客户端上传SDK支持两种授权方式：
- 使用上传地址和凭证上传
-
使用STS方式上传
点播默认推荐使用上传地址和凭证的方式，其相比STS方式更具优势，两种方式对比参考 上传(播放)凭证和STS方式对比。
整体步骤
1.请求上传地址加凭证或STS；
2.初始化上传实例，实例化上传有两种方式：上传地址加凭证和STS方式；
3.回调设置，所有的上传状态包括进度，上传成功，上传失败，凭证过期都在这里进行处理；
4.添加上传文件进入上传列表，目前主要支持视频文件和图片文件的上传；
5.启动上传；
6.回调处理；
实现
首先在index.html页面上引入下面三个JS脚本，视频上传SDK下载 。
<script src="/lib/aliyun-upload-sdk/lib/es6-promise.min.js"></script>
<script src="/lib/aliyun-upload-sdk/lib/aliyun-oss-sdk-5.3.1.min.js"></script>
<script src="/lib/aliyun-upload-sdk/aliyun-upload-sdk-1.5.0.min.js"></script>
因为项目需要的只是一个简单的上传功能，不需要用户自己输入过期时间、重新上传间隔时间等等、所以都用了默认值，只需要直接上传就可以了，需要自定义更多可以查看JavaScript上传SDK文档,html代码：
<div>
<input type="file" id="fileUpload" @change="fileChange($event)" />
<label class="status">
上传状态:
<span>{{statusText}}</span>
</label>
</div>
<div class="upload-type">
<button @click="authUpload" :disabled="uploadDisabled">开始上传</button>
<button @click="pauseUpload" :disabled="pauseDisabled">暂停</button>
<button :disabled="resumeDisabled" @click="resumeUpload">恢复上传</button>
<span class="progress">
上传进度:
<i id="auth-progress">{{authProgress}}</i> %
</span>
</div>
JS代码：
fileChange(e) {
this.file = e.target.files[0];
if (!this.file) {
alert("请先选择需要上传的文件!");
return;
}
var Title = this.file.name;
var userData = '{"Vod":{}}';
if (this.uploader) {
this.uploader.stopUpload();
this.authProgress = 0;
this.statusText = "";
}
this.uploader = this.createUploader();
this.uploader.addFile(this.file, null, null, null, userData);
this.uploadDisabled = false;
this.pauseDisabled = true;
this.resumeDisabled = true;
},
authUpload() {
// 然后调用 startUpload 方法, 开始上传
if (this.title == "") {
this.$message.error("视频标题不能为空");
this.uploadDisabled = false;
this.pauseDisabled = true;
this.resumeDisabled = true;
return;
}
if (this.uploader !== null) {
this.uploader.startUpload();
this.uploadDisabled = true;
this.pauseDisabled = false;
}
},
// 暂停上传
pauseUpload() {
if (this.uploader !== null) {
this.uploader.stopUpload();
this.resumeDisabled = false;
this.pauseDisabled = true;
}
},
// 恢复上传
resumeUpload() {
if (this.uploader !== null) {
this.uploader.startUpload();
this.resumeDisabled = true;
this.pauseDisabled = false;
}
},
createUploader(type) {
let self = this;
let uploader = new AliyunUpload.Vod({
timeout: 60000,
partSize: 1048576,
parallel: 5,
retryCount: 3,
retryDuration: 2,
region: self.region,
userId: self.userId,
// 添加文件成功
addFileSuccess: function(uploadInfo) {
self.uploadDisabled = false;
self.resumeDisabled = false;
self.statusText = "添加文件成功, 等待上传...";
console.log("addFileSuccess: " + uploadInfo.file.name);
},
// 开始上传
onUploadstarted: function(uploadInfo) {
// 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
// 如果是 UploadAuth 上传方式, 需要根据 uploadInfo.videoId是否有值，调用点播的不同接口获取uploadauth和uploadAddress
// 如果 uploadInfo.videoId 有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
// 注意: 这里是测试 demo 所以直接调用了获取 UploadAuth 的测试接口, 用户在使用时需要判断 uploadInfo.videoId 存在与否从而调用 openApi
// 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
// 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
if (!uploadInfo.videoId) {
self.$axios
.post("/api/project/video/gettoken", {
title: self.title,
filename: uploadInfo.file.name,
template: "ProjectVideoWatermark",
userdescription: self.userdescription,
project_id: 1
})
.then(({ data }) => {
if (data.code == 0) {
let uploadAuth = data.data.UploadAuth;
let uploadAddress = data.data.UploadAddress;
let videoId = data.data.VideoId;
uploader.setUploadAuthAndAddress(
uploadInfo,
uploadAuth,
uploadAddress,
videoId
);
}
});
self.statusText = "文件开始上传...";
console.log(
"onUploadStarted:" +
uploadInfo.file.name +
", endpoint:" +
uploadInfo.endpoint +
", bucket:" +
uploadInfo.bucket +
", object:" +
uploadInfo.object
);
} else {
// 如果videoId有值，根据videoId刷新上传凭证
let refreshUrl =
"/api/project/video/refreshtoken?VideoID=" + uploadInfo.videoId;
self.$axios.get(refreshUrl).then(({ data }) => {
console.log(data);
if (data.code == 0) {
let uploadAuth = data.data.UploadAuth;
let uploadAddress = data.data.UploadAddress;
let videoId = data.data.VideoId;
uploader.setUploadAuthAndAddress(
uploadInfo,
uploadAuth,
uploadAddress,
videoId
);
}
});
}
},
// 文件上传成功
onUploadSucceed: function(uploadInfo) {
console.log(
"onUploadSucceed: " +
uploadInfo.file.name +
", endpoint:" +
uploadInfo.endpoint +
", bucket:" +
uploadInfo.bucket +
", object:" +
uploadInfo.object
);
self.statusText = "文件上传成功!";
},
// 文件上传失败
onUploadFailed: function(uploadInfo, code, message) {
console.log(
"onUploadFailed: file:" +
uploadInfo.file.name +
",code:" +
code +
", message:" +
message
);
self.statusText = "文件上传失败!";
},
// 取消文件上传
onUploadCanceled: function(uploadInfo, code, message) {
console.log(
"Canceled file: " +
uploadInfo.file.name +
", code: " +
code +
", message:" +
message
);
self.statusText = "文件已暂停上传";
},
// 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
onUploadProgress: function(uploadInfo, totalSize, progress) {
console.log(
"onUploadProgress:file:" +
uploadInfo.file.name +
", fileSize:" +
totalSize +
", percent:" +
Math.ceil(progress * 100) +
"%"
);
let progressPercent = Math.ceil(progress * 100);
self.authProgress = progressPercent;
self.statusText = "文件上传中...";
},
// 上传凭证超时
onUploadTokenExpired: function(uploadInfo) {
let refreshUrl =
"/api/project/video/refreshtoken?VideoID=" + uploadInfo.videoId;
this.$axios.get(refreshUrl).then(({ data }) => {
let uploadAuth = data.UploadAuth;
uploader.resumeUploadWithAuth(uploadAuth);
console.log(
"upload expired and resume upload with uploadauth " + uploadAuth
);
});
self.statusText = "文件超时...";
},
// 全部文件上传结束
onUploadEnd: function(uploadInfo) {
console.log("onUploadEnd: uploaded all the files");
self.statusText = "文件上传完毕";
}
});
return uploader;
}
播放视频就很简单了，参考官方代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>Aliplayer Online Settings</title>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
</head>
<body>
<div class="prism-player" id="player-con"></div>
<script>
var player = new Aliplayer({
"id": "player-con",
"source": "//player.alicdn.com/video/aliyunmedia.mp4",
"width": "100%",
"height": "500px",
"autoplay": true,
"isLive": false,
"rePlay": false,
"playsinline": true,
"preload": true,
"controlBarVisibility": "hover",
"useH5Prism": true
}, function (player) {
console.log("The player is created");
}
);
</script>
</body>
网友评论