騰訊雲 視頻 點播 視頻上傳接口

 

 

申請騰訊雲  獲取id  及  keyjavascript

 

【騰訊雲視頻】Web上傳 地址css

 

https://cloud.tencent.com/document/product/266/9239html

 

Java 簽名示例

 

https://cloud.tencent.com/document/product/266/10638java

 

demoajax

http://video.qcloud.com/sdk/ugcuploader.html?_ga=1.215462160.645636177.1512724448ide

 

 

 

根據Java 簽名示例獲取相關的簽名  根據上面簽名案例ui

var getSignature = function (callback) {
    $.ajax({
        type: "get",
        url: "getMyKey",
        dataType: "text",
        success: function (result) {
            callback(result);
        },
        error: function (result) {
            alert("失敗");
        }
    });
}
url

頁面引入相關jsspa

 

<script src="//imgcache.qq.com/open/qcloud/js/vod/sdk/ugcUploader.js" type="text/javascript"></script>orm

 

<label>
                      上傳視頻 :
                </label>
                   <input type="file"  id="videoFile" name="videoFile" required="required" accept=".avi,.3gp,.mpg,.flv,.mp4,.mkv,.wmv,.rmvb" >
                </div>
                <div id="Blenght" class="progress progress-striped" style="display:none;width: 300px;height: 15px;margin-left:45px;margin-bottom: 1px;">
                    <div id="my-bar-success" class="progress-bar progress-bar-success my-bar-success" role="progressbar"
                         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                         style="width: 0%;">
                    </div>
                    <div id="countNum" class="len-countNum">
                    <em id="style-em-1" class="em-style"></em><em id="style-em-2" class="em-style"></em></div>
                </div>

 

function saveVideo() {    //判斷是否爲空    //開始上傳視頻文件    var videoObj = document.getElementById("videoFile");    /*console.log();*/    if (videoObj.files.length) {        var resultMsg = qcVideo.ugcUploader.start({            videoFile: videoObj.files[0],            getSignature: getSignature,            success: function (result) {            },            error: function (result) {                alert('上傳失敗的緣由:' + result.msg);                $(".div-grop").show();                $("#Blenght").css("display", "none");                $("#qued").show();            },            progress: function (result) {                var progressNum = result.shacurr;                progressNum = progressNum * 100;                $("#my-bar-success").css("width", parseInt(progressNum) + "%");                $("#style-em-1").html(parseInt(progressNum) + "%");            },            finish: function (result) {                if (!result) {                    layer.msg('操做異常,請稍後重試!', {time: 2000});                    return false;                }                var id = result.fileId;                var path = result.videoUrl;                var name = result.videoName;                if (id == "" || id == null) {                    layer.msg('請先上傳文件!', {time: 2000});                    return false;                }                if (path == "" || path == null) {                    layer.msg('請先上傳文件!', {time: 2000});                    return false;                }                if (name == "" || name == null) {                    layer.msg('請先上傳文件!', {time: 2000});                    return false;                }                $("#videoId").val(id);                $("#videoPath").val(path);                $("#videoName").val(name);//                $.ajax({                    type: "POST",                    url: "saveVideo",                    data: $('#videoform').serialize(),                    dataType: "text",                    success: function (result) {                    },                    error: function (result) {                    }                });            }        });    } else {        layer.msg('請選擇上傳文件!', {time: 2000});    }}
相關文章
相關標籤/搜索