阿里云視頻點(diǎn)播(VOD)是集音視頻上傳、自動(dòng)化轉(zhuǎn)碼處理、媒體資源管理、分發(fā)加速于一體的全鏈路音視頻點(diǎn)播服務(wù)。借助靈活、可伸縮的存儲(chǔ)、處理及內(nèi)容分發(fā)服務(wù),幫助企業(yè)和開(kāi)發(fā)者快速搭建安全、彈性、高可定制的點(diǎn)播平臺(tái)和應(yīng)用,提供端到端的完整解決方案。
第一步:安裝
在頁(yè)面上引入下面三個(gè)JS腳本,見(jiàn) 視頻上傳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>
第二步:頁(yè)面js上傳代碼
請(qǐng)求上傳地址加憑證
上傳圖片和上傳視頻獲取上傳地址和憑證所請(qǐng)求的API是不同的。 客戶端上傳視頻:需要請(qǐng)求向AppServer發(fā)送請(qǐng)求,AppServer通過(guò)OpenApi向阿里云點(diǎn)播服務(wù)發(fā)送CreateUploadVideo請(qǐng)求。請(qǐng)求成功將返回上傳地址,上傳憑證以及VideoId,AppServer需要將結(jié)果返回給客戶端。 客戶端上傳圖片:需要請(qǐng)求向AppServer發(fā)送請(qǐng)求,AppServer通過(guò)OpenApi向阿里云點(diǎn)播服務(wù)發(fā)送CreateUploadImage請(qǐng)求。請(qǐng)求成功將返回上傳地址,上傳憑證以及ImageURL,AppServer需要將結(jié)果返回給客戶端,然后通過(guò)上傳地址,上傳憑證上傳圖片,后面流程和上傳視頻一樣,不過(guò)不需要處理斷點(diǎn)續(xù)傳,因?yàn)閳D片沒(méi)有續(xù)傳功能。
上傳地址和憑證方式(推薦使用)
首先請(qǐng)求獲取的上傳地址和憑證初始化時(shí)無(wú)需設(shè)置,而是在開(kāi)始上傳開(kāi)始后觸發(fā)的onUploadStarted回調(diào)中調(diào)用setUploadAuthAndAddress(uploadFileInfo, uploadAuth, uploadAddress,videoId);方法進(jìn)行設(shè)置。 當(dāng)token超時(shí),會(huì)觸發(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) {
},
// 開(kāi)始上傳
onUploadstarted: function (uploadInfo) {
// 如果是 UploadAuth 上傳方式, 需要調(diào)用 uploader.setUploadAuthAndAddress 方法
// 如果是 UploadAuth 上傳方式, 需要根據(jù) uploadInfo.videoId是否有值,調(diào)用點(diǎn)播的不同接口獲取uploadauth和uploadAddress
// 如果 uploadInfo.videoId 有值,調(diào)用刷新視頻上傳憑證接口,否則調(diào)用創(chuàng)建視頻上傳憑證接口
// 注意: 這里是測(cè)試 demo 所以直接調(diào)用了獲取 UploadAuth 的測(cè)試接口, 用戶在使用時(shí)需要判斷 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é), 可以在這個(gè)函數(shù)中拿到上傳進(jìn)度并顯示在頁(yè)面上
onUploadProgress: function (uploadInfo, totalSize, progress) {var progressPercent = Math.ceil(progress * 100)
},
// 上傳憑證超時(shí)
onUploadTokenExpired: function (uploadInfo) {
// 上傳大文件超時(shí), 如果是上傳方式一即根據(jù) UploadAuth 上傳時(shí)
// 需要根據(jù) uploadInfo.videoId 調(diào)用刷新視頻上傳憑證接口(https://help.aliyun.com/document_detail/55408.html)重新獲取 UploadAuth
// 然后調(diào)用 resumeUploadWithAuth 方法, 這里是測(cè)試接口, 所以我直接獲取了 UploadAuth
$('#status').text('文件上傳超時(shí)!')
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來(lái)完成上傳:
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ù)
保存上傳時(shí)生成的videoId值,播放時(shí)會(huì)需要
第五步:播放連接
我們使用獲取視頻播放憑證,來(lái)在阿里云播放器播放;
阿里云文檔連接:
https://help.aliyun.com/document_detail/52833.html?spm=a2c4g.11186623.6.728.392258fcAl0XGb
實(shí)例化播放器
new Aliplayer({
id: 'player',
vid: VideoId,
playauth: PlayAuth,
format: 'mp3',
mediaType: 'audio',
encryptType: 1,
autoplay: false
});
這樣就完成了阿里云視頻點(diǎn)播的上傳及播放