阿里雲視頻點播Demo

前端使用Web端SDK下載,web端先調取自己服務器編寫的接口,自己服務器接口中利用服務端接口SDK調取相應的方法
還有個“全局設置”》“回調設置”中設置回調地址,會傳過來視頻ID,可在視頻上傳完成後更新視頻時長,播放地址等詳細信息。
Demo源碼:https://github.com/hanpanapn/AliyunVideo-Demo.git
寫的不好,如果你還是不懂,可以發郵件給我^^ [email protected],記得寫郵件主題哦。

    var serverRoot = "http://localhost:55962";
    
    function createUploader() {
        var uploader = new AliyunUpload.Vod({
            timeout:  60000,//請求過期時間
            partSize: 1048576,//分片大小
            parallel:  5,//上傳分片數
            retryCount:  3,//網絡失敗重試次數
            retryDuration: 2,//網絡失敗重試間隔
            region: "cn-shanghai",//配置項 region eu-central-1,ap-southeast-1
            userId: "1048573540209196",//這個ID就是阿里個人中心的“安全設置”裏面的
            // 添加文件成功
            addFileSuccess: function (uploadInfo) {
                $('#authUpload').attr('disabled', false); $('#resumeUpload').attr('disabled', false)
                $('#status').text('添加文件成功, 等待上傳...')
            },
            // 開始上傳
            onUploadstarted: function (uploadInfo) {
                if (!uploadInfo.videoId) {
                  
                    //調用自己編寫的CreateUploadVideo接口,服務端調取阿里返回視頻上傳地址和憑證
                    //下面接口的在服務端的代碼我也寫出來,請往後看。
                    var createUrl = serverRoot + '/AliVideo/CreateUploadVideo';
                    createUrl += "?Action=CreateUploadVideo";
                    createUrl += "&Title=" + uploadInfo.file.name;
                    createUrl += "&FileName=" + uploadInfo.file.name;//視頻源文件名 必須帶擴展名,且擴展名不區分大小寫。
                    createUrl += "&FileSize=" + uploadInfo.file.size;
                   // createUrl += "&Description=xx";
                   // createUrl += "&CoverURL=xx";//自定義視頻封面URL地址。
                  //  createUrl += "&CateId=xx";//視頻分類ID
                   // createUrl += "&Tags=xx"; //視頻標籤。  最多不超過16個標籤 多個用逗號分隔。 單個標籤不超過32個字符或漢字。
                      
                    $.get(createUrl, function (data) {
                        var uploadAuth = data.UploadAuth
                        var uploadAddress = data.UploadAddress
                        var videoId = data.VideoId
                        uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
                    }, 'json')
                    $('#status').text('文件開始上傳...')
                } else {
                    // 如果videoId有值,根據videoId刷新上傳憑證
                    var refreshUrl = serverRoot + '/AliVideo/RefreshUploadVideo';
                    refreshUrl += "?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)
                console.log(uploadInfo);
                $('#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 方法
                $('#status').text('文件上傳超時!')

                let refreshUrl = serverRoot + '/AliVideo/RefreshUploadVideo';
                refreshUrl += "?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('文件上傳完畢!')
            }
        })
        return uploader
    }
  public CreateUploadVideoResponse CreateUploadVideo(CreateUploadVideoRequest request)
        {
            CreateUploadVideoResponse response = new CreateUploadVideoResponse();
            try
            {
                //這裏用的accessKeyId, accessKeySecret 是點個人頭像彈出的列表有設置的地方
                DefaultAcsClient client = InitVodClient(accessKeyId, accessKeySecret);
                  response = client.GetAcsResponse(request); 
            }
            catch (ServerException ex)
            {
               // Console.WriteLine(ex.ToString());
            }
            catch (ClientException ex)
            {
               // Console.WriteLine(ex.ToString());
            }
           //返回的response 中有這些參數 UploadAuth UploadAddress VideoId
            return response;
        }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章