阿里云視頻點播（VOD）是集音視頻上傳、自動化轉(zhuǎn)碼處理、媒體資源管理、分發(fā)加速于一體的全鏈路音視頻點播服務(wù)。借助靈活、可伸縮的存儲、處理及內(nèi)容分發(fā)服務(wù)，幫助企業(yè)和開發(fā)者快速搭建安全、彈性、高可定制的點播平臺和應(yīng)用，提供端到端的完整解決方案。
第一步：安裝
在頁面上引入下面三個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發(fā)送請求，AppServer通過OpenApi向阿里云點播服務(wù)發(fā)送CreateUploadVideo請求。請求成功將返回上傳地址，上傳憑證以及VideoId，AppServer需要將結(jié)果返回給客戶端。 客戶端上傳圖片：需要請求向AppServer發(fā)送請求，AppServer通過OpenApi向阿里云點播服務(wù)發(fā)送CreateUploadImage請求。請求成功將返回上傳地址，上傳憑證以及ImageURL，AppServer需要將結(jié)果返回給客戶端，然后通過上傳地址，上傳憑證上傳圖片，后面流程和上傳視頻一樣，不過不需要處理斷點續(xù)傳，因為圖片沒有續(xù)傳功能。
上傳地址和憑證方式(推薦使用)
首先請求獲取的上傳地址和憑證初始化時無需設(shè)置，而是在開始上傳開始后觸發(fā)的onUploadStarted回調(diào)中調(diào)用setUploadAuthAndAddress(uploadFileInfo, uploadAuth, uploadAddress,videoId);方法進(jìn)行設(shè)置。 當(dāng)token超時，會觸發(fā)onUploadTokenExpired回調(diào)，需要調(diào)用resumeUploadWithAuth(uploadAuth)方法，設(shè)置新的上傳憑證繼續(xù)上傳。
示例代碼
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 上傳方式, 需要調(diào)用 uploader.setUploadAuthAndAddress 方法
// 如果是 UploadAuth 上傳方式, 需要根據(jù) uploadInfo.videoId是否有值，調(diào)用點播的不同接口獲取uploadauth和uploadAddress
// 如果 uploadInfo.videoId 有值，調(diào)用刷新視頻上傳憑證接口，否則調(diào)用創(chuàng)建視頻上傳憑證接口
// 注意: 這里是測試 demo 所以直接調(diào)用了獲取 UploadAuth 的測試接口, 用戶在使用時需要判斷 uploadInfo.videoId 存在與否從而調(diào)用 openApi
// 如果 uploadInfo.videoId 存在, 調(diào)用 刷新視頻上傳憑證接口(https://help.aliyun.com/document_detail/55408.html)
// 如果 uploadInfo.videoId 不存在,調(diào)用 獲取視頻上傳地址和憑證接口(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有值，根據(jù)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) {
},
// 文件上傳進(jìn)度，單位：字節(jié), 可以在這個函數(shù)中拿到上傳進(jìn)度并顯示在頁面上
onUploadProgress: function (uploadInfo, totalSize, progress) {var progressPercent = Math.ceil(progress * 100)
},
// 上傳憑證超時
onUploadTokenExpired: function (uploadInfo) {
// 上傳大文件超時, 如果是上傳方式一即根據(jù) UploadAuth 上傳時
// 需要根據(jù) uploadInfo.videoId 調(diào)用刷新視頻上傳憑證接口(https://help.aliyun.com/document_detail/55408.html)重新獲取 UploadAuth
// 然后調(diào)用 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')
},
// 全部文件上傳結(jié)束
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
將提交的數(shù)據(jù)和公共參數(shù)以&符拼接，如：http://vod.cn-shanghai.aliyuncs.com/?Action=CreateUploadVideo&Title=exampleTitle&FileName=example.avi&FileSize=10485760&Format=JSON&<公共參數(shù)>
使用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')
第四步：保存上傳數(shù)據(jù)
保存上傳時生成的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
});
這樣就完成了阿里云視頻點播的上傳及播放
