通过网页上传阿里云点播视频
由于工作关系，需要不定时在阿里云上传视频文件，为了更加简化操作提升效率，结合WPF及阿里云SDK写了一个视频预览、截图、视频翻转以及本地视频上传并获取上传后视频的ImgUrl和videoUrl等关键播放参数的小工具
由于SDK中没有提供C#版的本地上传视频SDK，本人也不熟悉C++ ，只能从提供的JavaScriptDemo中，简单修改了个上传视频的页面，以下为正题：
js文档层级关系
lib
|---jquery.min.js
|---aliyun-upload-sdk
|-----aliyun-upload-sdk-1.5.0.min.js
|-----lib
|-----es6-promise.min.js
|-----aliyun-oss-sdk-5.3.1.min.js
上传视频主页面代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>正式版上传视频文件</title> <script src="./lib/jquery.min.js"></script> <script src="./lib/aliyun-upload-sdk/aliyun-upload-sdk-1.5.0.min.js"></script> <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> <style type="text/css"> .container { width: 1200px; margin: 0 auto; } .input-control { margin: 5px 0; } .input-control label { font-size: 14px; color: #333; width: 30%; text-align: right; display: inline-block; vertical-align: middle; margin-right: 10px; } .input-control input { width: 30%; height: 30px; padding: 0 5px; } .upload { padding: 30px 50px; } .progress { font-size: 14px; } .progress i { font-style: normal; } .upload-type { color: #666; font-size: 12px; padding: 10px 0; } .upload-type button { margin: 0 10px 0 20px; } .status { font-size: 14px; margin-left: 30px; } .info { font-size: 14px; padding-left: 30px; } </style> </head> <body> <div class="container"> <div class="setting"> <div class="input-control"> <label for="timeout">请求过期时间（配置项 timeout, 默认 60000）:</label> <input type="text" id="timeout" placeholder="输入过期时间, 单位毫秒"> </div> <div class="input-control"> <label for="partSize">分片大小（配置项 partSize, 默认 1048576）:</label> <input type="text" class="form-control" id="partSize" placeholder="输入分片大小, 单位bit, 最小100k"> </div> <div class="input-control"> <label for="parallel">上传分片数（配置项 parallel, 默认 5）:</label> <input type="text" class="form-control" id="parallel" placeholder="输入并行上传分片个数, 默认为5"> </div> <div class="input-control"> <label for="retryCount">网络失败重试次数（配置项 retryCount, 默认 3）:</label> <input type="text" class="form-control" id="retryCount" placeholder="输入网络失败重试次数, 默认为3"> </div> <div class="input-control"> <label for="retryDuration">网络失败重试间隔（配置项 retryDuration, 默认 2）:</label> <input type="text" class="form-control" id="retryDuration" placeholder="输入网络失败重试间隔, 默认2秒"> </div> <div class="input-control"> <label for="region">配置项 region, 默认 cn-shanghai:</label> <select id="region"> <option>cn-shanghai</option> <option>eu-central-1</option> <option>ap-southeast-1</option> </select> </div> <div class="input-control"> <label for="userId">阿里云账号ID:</label> <input type="text" value="13000000000000" disabled class="form-control" id="userId" placeholder="输入阿里云账号ID"> </div> <div class="input-control"> <label for="userId">视频文件的ID:</label> <input type="text" class="form-control" id="videoId" placeholder="输入视频文件VideoId"> </div> <div class="input-control"> <label for="userId">视频上传凭证:</label> <input type="text" class="form-control" id="videoAuth" placeholder="输入视频上传凭证videoAuth"> </div> <div class="input-control"> <label for="userId">视频上传地址:</label> <input type="text" class="form-control" id="videoAddress" placeholder="输入视频上传地址videoAddress"> </div> </div> <div class="upload"> <div> <input type="file" id="fileUpload"> <label class="status">上传状态: <span id="status"></span></label> </div> <div class="upload-type"> 上传方式一, 使用 UploadAuth 上传: <button id="authUpload" disabled="true">开始上传</button> <button id="pauseUpload" disabled="true">暂停</button> <button id="resumeUpload" disabled="true">恢复上传</button> <span class="progress">上传进度: <i id="auth-progress">0</i> %</span> <span></span> </div> </div> <div class="info">uploadAuth及uploadAddress参数请查看 <a href="https://help.aliyun.com/document_detail/55407.html" target="_blank">获取上传地址和凭证 </a> </div> </div> <script> //兼容IE11 if(!FileReader.prototype.readAsBinaryString) { FileReader.prototype.readAsBinaryString = function(fileData) { var binary = ""; var pt = this; var reader = new FileReader(); reader.onload = function(e) { var bytes = new Uint8Array(reader.result); var length = bytes.byteLength; for(var i = 0; i < length; i++) { binary += String.fromCharCode(bytes[i]); } //pt.result - readonly so assign binary pt.content = binary; pt.onload() } reader.readAsArrayBuffer(fileData); } } $(document).ready(function() { /** * 创建一个上传对象 * 使用 UploadAuth 上传方式 */ function createUploader() { var uploader = new AliyunUpload.Vod({ timeout: $('#timeout').val() || 60000, partSize: $('#partSize').val() || 1048576, parallel: $('#parallel').val() || 5, retryCount: $('#retryCount').val() || 3, retryDuration: $('#retryDuration').val() || 2, region: $('#region').val(), userId: $('#userId').val(), // 添加文件成功 addFileSuccess: function(uploadInfo) { $('#authUpload').attr('disabled', false) $('#resumeUpload').attr('disabled', false) $('#status').text('添加文件成功, 等待上传...') console.log("addFileSuccess: " + uploadInfo.file.name) console.log("videoId：" + uploadInfo.videoInfo.videoId) console.log("uploadAddress：" + uploadInfo.videoInfo.uploadAddress) console.log("uploadAuth：" + uploadInfo.videoInfo.uploadAuth) }, // 开始上传 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) { console.log('走了if方法') var uploadAuth = uploadInfo.videoInfo.uploadAuth var uploadAddress = uploadInfo.videoInfo.uploadAddress var videoId = uploadInfo.videoInfo.videoId uploader.setUploadAuthAndAddress(uploadInfo,uploadAuth, uploadAddress, videoId) $('#status').text('文件开始上传...') console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object) } else { // 如果videoId有值，根据videoId刷新上传凭证 // https://help.aliyun.com/document_detail/55408.html?spm=a2c4g.11186623.6.630.BoYYcY console.log('走了else方法') var refreshUrl = 'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=' + uploadInfo.videoId $.get(refreshUrl, function(data) { var uploadAuth = data.UploadAuth var uploadAddress = data.UploadAddress var videoId = data.VideoId uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId) }, 'json') } }, // 文件上传成功 onUploadSucceed: function(uploadInfo) { console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object) $('#status').text('文件上传成功!') }, // 文件上传失败 onUploadFailed: function(uploadInfo, code, message) { console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message) $('#status').text('文件上传失败!') }, // 取消文件上传 onUploadCanceled: function(uploadInfo, code, message) { console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message) $('#status').text('文件上传已暂停!') }, // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上 onUploadProgress: function(uploadInfo, totalSize, progress) { console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%") var progressPercent = Math.ceil(progress * 100) $('#auth-progress').text(progressPercent) $('#status').text('文件上传中...') }, // 上传凭证超时 onUploadTokenExpired: function(uploadInfo) { // 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时 // 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth // 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth $('#status').text('文件上传超时!') let refreshUrl = 'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=' + uploadInfo.videoId $.get(refreshUrl, function(data) { var uploadAuth = data.UploadAuth uploader.resumeUploadWithAuth(uploadAuth) console.log('upload expired and resume upload with uploadauth ' + uploadAuth) }, 'json') }, // 全部文件上传结束 onUploadEnd: function(uploadInfo) { $('#status').text('文件上传完毕!') console.log("onUploadEnd: uploaded all the files") } }) return uploader } var uploader = null $('#fileUpload').on('change', function(e) { var file = e.target.files[0] if(!file) { alert("请先选择需要上传的文件!") return } var Title = file.name //userData对象 var userData = '{"Vod":{"videoId":'+ '"' + $('#videoId').val()+ '"' + ',"uploadAddress":'+ '"' +$('#videoAddress').val()+ '"'+ ',"uploadAuth":'+ '"' + $('#videoAuth').val()+ '"' +'}}' if(uploader) { uploader.stopUpload() $('#auth-progress').text('0') $('#status').text("") } uploader = createUploader() // 首先调用 uploader.addFile(event.target.files[i], null, null, null, userData) console.log(uploader) uploader.addFile(file, null, null, null, userData) $('#authUpload').attr('disabled', false) $('#pauseUpload').attr('disabled', true) $('#resumeUpload').attr('disabled', true) }) // 第一种方式 UploadAuth 上传 $('#authUpload').on('click', function() { // 然后调用 startUpload 方法, 开始上传 if(uploader !== null) { uploader.startUpload() $('#authUpload').attr('disabled', true) $('#pauseUpload').attr('disabled', false) } }) // 暂停上传 $('#pauseUpload').on('click', function() { if(uploader !== null) { uploader.stopUpload() $('#resumeUpload').attr('disabled', false) $('#pauseUpload').attr('disabled', true) } }) $('#resumeUpload').on('click', function() { if(uploader !== null) { uploader.startUpload() $('#resumeUpload').attr('disabled', true) $('#pauseUpload').attr('disabled', false) } }) }) </script> </body> </html>
以下为页面运行截图：
其中：阿里云账号ID可在阿里云后台看到。其余视频ID、上传凭证、上传地址可从服务器端通过调用相关SDK，获取参数值
界面只是简单对必要参数做了微调，其余均为官网demo代码
附官方原Demo下载地址：
https://help.aliyun.com/document_detail/51992.html?spm=a2c4g.11186623.2.41.47566bd1zKXKuh
