阿里云視頻點播（VOD）是集音視頻上傳、自動化轉碼處理、媒體資源管理、分發加速于一體的全鏈路音視頻點播服務。借助靈活、可伸縮的存儲、處理及內容分發服務，幫助企業和開發者快速搭建安全、彈性、高可定制的點播平臺和應用，提供端到端的完整解決方案。
第一步：安裝
在頁面上引入下面三個JS腳本，見 視頻上傳SDK下載。
<!-- IE需要es6-promise -->
<script src="../lib/es6-promise.min.js"></script>
<script src="../lib/aliyun-oss-sdk6.10.0.min.js"></script>
<script src="../aliyun-vod-upload-sdk1.5.2.min.js"></script>
第二步：頁面js上傳代碼
請求上傳地址加憑證
上傳圖片和上傳視頻獲取上傳地址和憑證所請求的API是不同的。 客戶端上傳視頻：需要請求向AppServer發送請求，AppServer通過OpenApi向阿里云點播服務發送CreateUploadVideo請求。請求成功將返回上傳地址，上傳憑證以及VideoId，AppServer需要將結果返回給客戶端。 客戶端上傳圖片：需要請求向AppServer發送請求，AppServer通過OpenApi向阿里云點播服務發送CreateUploadImage請求。請求成功將返回上傳地址，上傳憑證以及ImageURL，AppServer需要將結果返回給客戶端，然后通過上傳地址，上傳憑證上傳圖片，后面流程和上傳視頻一樣，不過不需要處理斷點續傳，因為圖片沒有續傳功能。
上傳地址和憑證方式(推薦使用)
首先請求獲取的上傳地址和憑證初始化時無需設置，而是在開始上傳開始后觸發的onUploadStarted回調中調用setUploadAuthAndAddress(uploadFileInfo, uploadAuth, uploadAddress,videoId);方法進行設置。 當token超時，會觸發onUploadTokenExpired回調，需要調用resumeUploadWithAuth(uploadAuth)方法，設置新的上傳憑證繼續上傳。
示例代碼
var uploader = new AliyunUpload.Vod({
timeout: 60000,
partSize: 1048576,
parallel: 5,
retryCount:3,
retryDuration: 2,
region: cn-shanghai,
userId: ‘12232’,
// 添加文件成功
addFileSuccess: function (uploadInfo) {
},
// 開始上傳
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) {
var createUrl = 'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/CreateUploadVideo?Title=testvod1&FileName=aa.mp4&BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&VideoId=5bfcc7864fc14b96972842172207c9e6'
$.get(createUrl, function (data) {
var uploadAuth = data.UploadAuth
var uploadAddress = data.UploadAddress
var videoId = data.VideoId
uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId)
}, 'json')
} else {
// 如果videoId有值，根據videoId刷新上傳憑證
// https://help.aliyun.com/document_detail/55408.html?spm=a2c4g.11186623.6.630.BoYYcY
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) {
},
// 文件上傳失敗
onUploadFailed: function (uploadInfo, code, message) {
},
// 取消文件上傳
onUploadCanceled: function (uploadInfo, code, message) {
},
// 文件上傳進度，單位：字節, 可以在這個函數中拿到上傳進度并顯示在頁面上
onUploadProgress: function (uploadInfo, totalSize, progress) {var progressPercent = Math.ceil(progress * 100)
},
// 上傳憑證超時
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")
}
})
第三步：獲取視頻上傳地址和憑證
阿里云文檔地址：https://help.aliyun.com/document_detail/55407.html?spm=a2c4g.11186623.6.717.4e217971q8IIKf
將提交的數據和公共參數以&符拼接，如：http://vod.cn-shanghai.aliyuncs.com/?Action=CreateUploadVideo&Title=exampleTitle&FileName=example.avi&FileSize=10485760&Format=JSON&<公共參數>
使用js來完成上傳：
var createUrl = 'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/CreateUploadVideo?Title=testvod1&FileName=aa.mp4&BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&VideoId=5bfcc7864fc14b96972842172207c9e6'
$.get(createUrl, function (data) {
var uploadAuth = data.UploadAuth
var uploadAddress = data.UploadAddress
var videoId = data.VideoId
uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId)
}, 'json')
第四步：保存上傳數據
保存上傳時生成的videoId值，播放時會需要
第五步：播放連接
我們使用獲取視頻播放憑證，來在阿里云播放器播放；
阿里云文檔連接：
https://help.aliyun.com/document_detail/52833.html?spm=a2c4g.11186623.6.728.392258fcAl0XGb
實例化播放器
new Aliplayer({
id: 'player',
vid: VideoId,
playauth: PlayAuth,
format: 'mp3',
mediaType: 'audio',
encryptType: 1,
autoplay: false
});
這樣就完成了阿里云視頻點播的上傳及播放
