靠近阿里雲–視訊點播

Judian發表於2018-10-24
阿里

在使用vue做前端專案需求視訊直傳阿里雲伺服器
參考文件（阿里雲官方）
https://help.aliyun.com/docum…

匯入官方sdk

<script src="/static/aliyun/aliyun-oss-sdk-5.2.0.min.js"></script>
<script src="/static/aliyun/aliyun-upload-sdk-1.4.0.min.js"></script>

input的@change事件

change(event) {
     let file = event.target.files[0]
     let url = URL.createObjectURL(file)
     this.getVideoUploadAuth(file) //獲取上傳許可權
}

採用UploadAuthAndAddress上傳方式，後臺php獲取相關許可權

getVideoUploadAuth(file) {
    let path = document.getElementById(`file`).value
    let params = {
        video_title: file.name,
        video_url: path
    }
    axios.post(`https://xxx/aliapi/upload.php`, params).then(res => {
        uploadAuth = res.data.UploadAuth
        uploadAddress = res.data.UploadAddress
        videoId = res.data.VideoId
        uploader.addFile(file, null, null, null, userData);
        this.videoUploadFn() //去上傳
    })
}

去上傳

videoUploadFn() {
    uploader.startUpload();
    _videoUploadSuccess.ok = false
    let interval = setInterval(() => {
        if(_videoUploadSuccess.ok) {
               clearInterval(interval)
               this.getVideoInfo() // 獲取視訊資訊得到視訊封面圖片
          }
     , 10);
}

獲取視訊資訊

getVideoInfo() {
    let sett 
    this.$post(`https://xxxx/ali/info.php`,{videoId :_videoUploadSuccess.uploadInfo.videoId}).then(res => {
         res = res.data
         xmview.showLoading(`正在獲取縮圖..`)
         if (res.Video.CoverURL) {
             this.posterimg = res.Video.CoverURL
             sessionStorage.setItem(`video_content`,_videoUploadSuccess.uploadInfo.videoId)
             sessionStorage.setItem(`video_thumb`,res.Video.CoverURL)
             xmview.hideLoading()
             clearTimeout(sett)
         } else {
             // 這裡加定時器，等待響應
             sett = setTimeout(() => {
                 this.getVideoInfo()
             }, 3000);
         }               
    })
}

下面是sdk設定

var uploadAuth = ``
var uploadAddress = `` 
var videoId = ``
var _videoUploadSuccess = {
    ok: false,
    uploadInfo: {}
}
var _uploadprogress = 0 // 上傳進度
const uploader = new AliyunUpload.Vod({
        //分片大小預設1M，不能小於100K
        partSize: 1048576,
        //並行上傳分片個數，預設5
        parallel: 5,
        //網路原因失敗時，重新上傳次數，預設為3
        retryCount: 3,
        //網路原因失敗時，重新上傳間隔時間，預設為2秒
        retryDuration: 2,
        // 開始上傳
        `onUploadstarted`: function(uploadInfo) {
            console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
            //上傳方式1, 需要根據uploadInfo.videoId是否有值，呼叫點播的不同介面獲取uploadauth和uploadAddress，如果videoId有值，呼叫重新整理視訊上傳憑證介面，否則呼叫建立視訊上傳憑證介面
            uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId);
        },
        // 檔案上傳成功
        `onUploadSucceed`: function(uploadInfo) {
            _videoUploadSuccess.ok = true
            _videoUploadSuccess.uploadInfo = uploadInfo
            console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
        },
        // 檔案上傳失敗
        `onUploadFailed`: function(uploadInfo, code, message) {
            console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
        },
        // 檔案上傳進度，單位：位元組
        `onUploadProgress`: function(uploadInfo, totalSize, loadedPercent) {
            _uploadprogress = Math.ceil(loadedPercent * 100)
            console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(loadedPercent * 100) + "%");
        },
        // 上傳憑證超時
        `onUploadTokenExpired`: function(uploadInfo) {
            console.console.log("onUploadTokenExpired");
            //上傳方式1  實現時，根據uploadInfo.videoId呼叫重新整理視訊上傳憑證介面重新獲取UploadAuth
            uploader.resumeUploadWithAuth(uploadAuth);
            // 上傳方式2 實現時，從新獲取STS臨時賬號用於恢復上傳
            // uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken, expireTime);
        },
        //全部檔案上傳結束
        `onUploadEnd`: function(uploadInfo) {
            console.log("onUploadEnd: uploaded all the files");
        }
    });
    const userData = `{"Vod":{"UserData":{"IsShowWaterMark":"false","Priority":"7"}}}`

2018-10-24
完。

相關文章