由於工作關系，需要不定時在阿里雲上傳視頻文件，為了更加簡化操作提升效率，結合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
