碼上歡樂
相關內容    簡體    繁體

JavaWeb-SpringBoot_（上）騰訊雲點播服務之視頻的上傳-demo

本文轉載自   查看原文   2019-02-03 20:45   2228    【GitHub】/ 【Spring全家桶】/ JavaWeb

 

 

　　使用Gradle編譯項目　　傳送門

　　騰訊視頻雲點播　　傳送門

　　項目已托管到Github上　　　傳送門

　　騰訊雲點播服務之視頻的顯示（下）　　傳送門

 

 　　

　　個人騰訊雲控制台中的視頻管理

 

　　IndexController.java下的getSign()方法中填寫自己雲API秘鑰 ID和AppKey[此ID和Appke作為自己項目視頻文件上傳地址]

　　騰訊雲會通過Signature類去將ID和Appkey加密得到字符串【作為自己項目視頻上傳地址】

　　得到的字符串在qcVideo.ugcUploader.start()中getSignature:getSignature屬性下作為視頻文件傳輸位置

 

　　　　　　　//個人API密鑰中的Secret Id
            sign.setSecretId("AKIDkNsDQWZOYYVSHu49kDh9Uh1FSo3BsnLm");
            //個人API密鑰中的Secret Key
            sign.setSecretKey("XDn1a3NWzN0Tp4vH3zpSp5fEXxxxxxxxx");

 

 

實現分三個模塊

　　（一）、使用原生JQuery獲取文件

　　（二）、簡單上傳文件(無封面提示信息) 

　　（三）、上傳視頻及封面並增加上傳提示信息

 

　　各個功能模塊的默認配置文件application.properties

#thymeleaf編碼風格
spring.thymeleaf.encoding=UTF-8

#熱部署靜態文件
spring.thymeleaf.cache=false

#使用HTML5的標簽
spring.thymeleaf.model=HTML5

#使用H2控制台
spring.h2.console.enabled=true

 

前申：使用原生JQuery獲取本地文件

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Gary_Video</title>
</head>
<body>

    <h1>Gary上傳視頻</h1>

    <from id="from1">
        <input id="uploadVideoNow-file" type="file" onchange="changeInput(this)" style="display:none;">
        
    </from>

    <!-- a標簽，當點擊之后，執行change函數中的內容 -->
    <a id="uploadVideoNow" href="javascript:void(0);" onclick="change()">點擊上傳視頻</a>

    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        function change(){
            $("#uploadVideoNow-file").click();
        }
        
        function changeInput(e){
            alert(e.files[0].name);
        }
        
    </script>

</body>
</html>
video.html

 

package com.Gary.videodemo.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

@RestController
public class IndexController {
    
    @RequestMapping("/")
    public ModelAndView index()
    {
        return new ModelAndView("/video.html");
    }
}
IndexController.java

 

    <from id="from1">
        <input id="uploadVideoNow-file" type="file" onchange="changeInput(this)" style="display:none;">
        
    </from>

    <!-- a標簽，當點擊之后，執行change函數中的內容 -->
    <a id="uploadVideoNow" href="javascript:void(0);" onclick="change()">點擊上傳視頻</a>

    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        function change(){
            $("#uploadVideoNow-file").click();
        }
        
        function changeInput(e){
            alert(e.files[0].name);
        }
        
    </script>

 

 

一、實現簡單上傳視頻　　　　官方文檔：傳送門

　　當頁面返回"success"提示信息時成功上傳到騰訊雲中！！！

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Gary_Video</title>
</head>
<body>

    <h1>Gary上傳視頻</h1>

    <from id="from1">
        <input id="uploadVideoNow-file" type="file" onchange="changeInput(this)" style="display:none;">
        
    </from>

    <!-- a標簽，當點擊之后，執行change函數中的內容 -->
    <a id="uploadVideoNow" href="javascript:void(0);" onclick="change()">點擊上傳視頻</a>

    <!-- 在web中引入sdk，js -->
    <script src="//imgcache.qq.com/open/qcloud/js/vod/sdk/ugcUploader.js"></script>
    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" th:inline="javascript">
    
        
        var getSignature = function(callback)
        {
            $.ajax({
                url:[[@{~/sign}]],
                type:"POST",
                success:function(result)
                {
                    alert(result);
                    //即可上傳視頻
                    callback(result);
                }
                
            })
        }
    
        function change()
        {
            $("#uploadVideoNow-file").click();
        }
        
        function changeInput(e){
             //alert(e.files[0].name);
            var videoFile = e.files[0];
            qcVideo.ugcUploader.start({
                //視頻文件
                videoFile:videoFile,
                //上傳位置
                getSignature:getSignature,
                //是否上傳聲音
                allowAudio:1,
                //上傳成功
                success:function(result)
                {
                    alert("success");
                },
                //上傳失敗
                error:function(result)
                {
                    alert("error");
                },
                //上傳過程中
                progress:function(result)
                {
                    
                },
                //上傳完成
                finish:function(result)
                {
                    alert("finish");
                }
            })
        }
        
    </script>

</body>
</html>
video.html

 

package com.Gary.videodemo.controller;

import java.util.Random;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import com.Gary.videodemo.utils.Signature;

@RestController
public class IndexController {
    
    @RequestMapping("/")
    public ModelAndView index(){
        return new ModelAndView("/video.html");
    }
    
    @RequestMapping("/sign")
    @ResponseBody
    public String getSign()
    {
        //得到Sign
            Signature sign = new Signature();
            //個人API密鑰中的Secret Id
            sign.setSecretId("AKIDkNsDQWZOYYVSHu49kDh9Uh1FSo3Bxxxx");
            //個人API密鑰中的Secret Key
            sign.setSecretKey("XDn1a3NWzN0Tp4vH3zpSp5fEX2Rqxxxx");
            sign.setCurrentTime(System.currentTimeMillis() / 1000);
            sign.setRandom(new Random().nextInt(java.lang.Integer.MAX_VALUE));
            sign.setSignValidDuration(3600 * 24 * 2);
            
            String signature = null;    
            try {
                signature = sign.getUploadSignature();
                System.out.println("signature : " + signature);
            } catch (Exception e) {
                System.out.print("獲取簽名失敗");
                e.printStackTrace();
            }
            
            return signature;
    }
    
}
IndexController.java

 

package com.Gary.videodemo.utils;

import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;
import sun.misc.BASE64Encoder;

public class Signature {
    private String secretId;
    private String secretKey;
    private long currentTime;
    private int random;
    private int signValidDuration;

    private static final String HMAC_ALGORITHM = "HmacSHA1";
    private static final String CONTENT_CHARSET = "UTF-8";

    public static byte[] byteMerger(byte[] byte1, byte[] byte2) {
        byte[] byte3 = new byte[byte1.length + byte2.length];
        System.arraycopy(byte1, 0, byte3, 0, byte1.length);
        System.arraycopy(byte2, 0, byte3, byte1.length, byte2.length);
        return byte3;
    }

    public String getUploadSignature() throws Exception {
        String strSign = "";
        String contextStr = "";

        long endTime = (currentTime + signValidDuration);
        contextStr += "secretId=" + java.net.URLEncoder.encode(secretId, "utf8");
        contextStr += "&currentTimeStamp=" + currentTime;
        contextStr += "&expireTime=" + endTime;
        contextStr += "&random=" + random;

        try {
            Mac mac = Mac.getInstance(HMAC_ALGORITHM);
            SecretKeySpec secretKey = new SecretKeySpec(this.secretKey.getBytes(CONTENT_CHARSET), mac.getAlgorithm());
            mac.init(secretKey);

            byte[] hash = mac.doFinal(contextStr.getBytes(CONTENT_CHARSET));
            byte[] sigBuf = byteMerger(hash, contextStr.getBytes("utf8"));
            strSign = new String(new BASE64Encoder().encode(sigBuf).getBytes());
            strSign = strSign.replace(" ", "").replace("\n", "").replace("\r", "");
        } catch (Exception e) {
            throw e;
        }
        return strSign;
    }

    public void setSecretId(String secretId) {
        this.secretId = secretId;
    }

    public void setSecretKey(String secretKey) {
        this.secretKey = secretKey;
    }

    public void setCurrentTime(long currentTime) {
        this.currentTime = currentTime;
    }

    public void setRandom(int random) {
        this.random = random;
    }

    public void setSignValidDuration(int signValidDuration) {
        this.signValidDuration = signValidDuration;
    }
}
Signature.java

 

　　目錄結構

　　

　　

　　Signature.java得到加密后的字符串

　　通過IndexController.java中的getSign()方法將appkey和appid進行加密，得到加密后的字符串並通過函數指針回傳給getSignature:getSignature

@RequestMapping("/sign")
    @ResponseBody
    public String getSign()
    {
        //得到Sign
            Signature sign = new Signature();
            //個人API密鑰中的Secret Id
            sign.setSecretId("AKIDkNsDQWZOYYVSHu49kDh9Uh1FSoxxxxxx");
            //個人API密鑰中的Secret Key
            sign.setSecretKey("XDn1a3NWzN0Tp4vH3zpSp5fEX2xxxxxx");
            sign.setCurrentTime(System.currentTimeMillis() / 1000);
            sign.setRandom(new Random().nextInt(java.lang.Integer.MAX_VALUE));
            sign.setSignValidDuration(3600 * 24 * 2);
            
            String signature = null;    
            try {
                signature = sign.getUploadSignature();
                System.out.println("signature : " + signature);
            } catch (Exception e) {
                System.out.print("獲取簽名失敗");
                e.printStackTrace();
            }
            
            return signature;
    }

 

var getSignature = function(callback)
        {
            $.ajax({
                url:[[@{~/sign}]],
                type:"POST",
                success:function(result)
                {
                    alert(result);
                    //即可上傳視頻
                    callback(result);
                }
                
            })
        }

 

　　得到加密后的字符串后就可以上傳到我們個人的騰訊雲控制台中

    <from id="from1">
        <input id="uploadVideoNow-file" type="file" onchange="changeInput(this)" style="display:none;">
        
    </from>

    <!-- a標簽，當點擊之后，執行change函數中的內容 -->
    <a id="uploadVideoNow" href="javascript:void(0);" onclick="change()">點擊上傳視頻</a>

    <!-- 在web中引入sdk，js -->
    <script src="//imgcache.qq.com/open/qcloud/js/vod/sdk/ugcUploader.js"></script>
    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" th:inline="javascript">
    function change()
        {
            $("#uploadVideoNow-file").click();
        }
        
        function changeInput(e){
             //alert(e.files[0].name);
            var videoFile = e.files[0];
            qcVideo.ugcUploader.start({
                //視頻文件
                videoFile:videoFile,
                //上傳位置
                getSignature:getSignature,
                //是否上傳聲音
                allowAudio:1,
                //上傳成功
                success:function(result)
                {
                    alert("success");
                },
                //上傳失敗
                error:function(result)
                {
                    alert("error");
                },
                //上傳過程中
                progress:function(result)
                {
                    
                },
                //上傳完成
                finish:function(result)
                {
                    alert("finish");
                }
            })
        }
        
    </script>

 

　　為了更好的顯示上傳信息，可添加id標簽，通過實現qcVideo.ugcUploader.start()中progress:function(result)方法得到上傳進度信息

　

 

 

　　因為上傳過程中會一直調用progress:function(result)()

　　所以可以添加一個id標簽用來顯示上傳提示信息

    <!-- 結果 -->
    <div id="resultBox">Gary</div>

　　

　　修改qcVideo.ugcUploader.start()函數

qcVideo.ugcUploader.start({
                //視頻文件
                videoFile:videoFile,
                //上傳位置
                getSignature:getSignature,
                //是否上傳聲音
                allowAudio:1,
                //上傳成功
                success:function(result)
                {
//                     alert("success");
                    $('[name=videoresult]').text('上傳成功');
                },
                //上傳失敗
                error:function(result)
                {
//                     alert("error");
                    $('[name=videoresult]').text('上傳失敗');
                },
                //正在上傳過程中會一直調用的Update
                progress:function(result)
                {
                    $('[name=videoname]').text(result.name);
                    $('[name=videosha]').text(Math.floor(result.shacurr*100)+"%");
                    $('[name=videocurr]').text(Math.floor(result.curr*100)+"%");
                },
                //上傳完成
                finish:function(result)
                {
//                     alert("finish");
                    $('[name=videourl]').text(result.videoUrl);
                }
            })
        }
        
        //在id里邊加東西
        function addUploaderMsgBox()
        {
            var html = '<div name = 1>'
            html+='視頻的名稱：<span name="videoname"></span>;'+
            '計算sha進度：<span name="videosha"></span>;'+
            '上傳進度：<span name="videocurr"></span>;'+
            '上傳結果：<span name="videoresult"></span>;'+
            '地址：<span name="videourl"></span>;';
            
            html+="</div>"
            
            $("#resultBox").append(html);
            
        }

 

 

 二、上傳視頻及封面並增加上傳提示信息

 

 

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Gary_Video</title>
</head>
<body>

    <h1>Gary上傳視頻</h1>

    <from id="from1">
        <input id="uploadVideoNow-file" type="file" onchange="changeInput(this)" style="display:none;">
        
    </from>

    <!-- a標簽，當點擊之后，執行change函數中的內容 -->
    <a id="uploadVideoNow" href="javascript:void(0);" onclick="change()">點擊上傳視頻</a>

    <br>
    <hr>
    <!-- 結果 -->
    <div id="resultBox">Gary</div>

    <!-- 在web中引入sdk，js -->
    <script src="//imgcache.qq.com/open/qcloud/js/vod/sdk/ugcUploader.js"></script>
    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" th:inline="javascript">
    
        
        var getSignature = function(callback)
        {
            $.ajax({
                url:[[@{~/sign}]],
                type:"POST",
                success:function(result)
                {
                    alert(result);
                    //即可上傳視頻
                    callback(result);
                }
                
            })
        }
    
        function change()
        {
            $("#uploadVideoNow-file").click();
        }
        
        function changeInput(e){
             //alert(e.files[0].name);
            var videoFile = e.files[0];
            //添加視頻進度的顯示
            addUploaderMsgBox();
            qcVideo.ugcUploader.start({
                //視頻文件
                videoFile:videoFile,
                //上傳位置
                getSignature:getSignature,
                //是否上傳聲音
                allowAudio:1,
                //上傳成功
                success:function(result)
                {
//                     alert("success");
                    $('[name=videoresult]').text('上傳成功');
                },
                //上傳失敗
                error:function(result)
                {
//                     alert("error");
                    $('[name=videoresult]').text('上傳失敗');
                },
                //正在上傳過程中會一直調用的Update
                progress:function(result)
                {
                    $('[name=videoname]').text(result.name);
                    $('[name=videosha]').text(Math.floor(result.shacurr*100)+"%");
                    $('[name=videocurr]').text(Math.floor(result.curr*100)+"%");
                },
                //上傳完成
                finish:function(result)
                {
//                     alert("finish");
                    $('[name=videourl]').text(result.videoUrl);
                }
            })
        }
        
        //在id里邊加東西
        function addUploaderMsgBox()
        {
            var html = '<div name = 1>'
            html+='視頻的名稱：<span name="videoname"></span>;'+
            '計算sha進度：<span name="videosha"></span>;'+
            '上傳進度：<span name="videocurr"></span>;'+
            '上傳結果：<span name="videoresult"></span>;'+
            '地址：<span name="videourl"></span>;';
            
            html+="</div>"
            
            $("#resultBox").append(html);
            
        }
        
    </script>

</body>
</html>
video.html

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Gary_Video</title>
</head>
<body>
    
    <form>
        <!-- 添加視頻 -->
        <input id="addVideo-file" onchange="addVideo(this)" type="file" style="display: none;">
        <!-- 添加封面 -->
        <input id="addCover-file" onchange="addCover(this)" type="file" style="display:none;">
    </form>
    
    <h1>上傳視頻+封面</h1>
    <!-- 添加視頻 -->
    <a id="addVideo" onclick="videoClick()" href="javascript:void(0)">上傳視頻</a>
    <!-- 添加封面 -->
    <a id="addCover" onclick="coverClick()" href="javascript:void(0)">上傳封面</a>
    <!-- 上傳按鈕 -->
    <a id="upload" onclick="upload()" href="javascript:void(0)">確定上傳</a>

    <br>
    <hr>
    <!-- 結果 -->
    <div id="resultBox">Gary</div>
    
    <script src="//imgcache.qq.com/open/qcloud/js/vod/sdk/ugcUploader.js"></script>
    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" th:inline="javascript">
    
        var videoFile = null;
        var coverFile = null;
    
        //得到加密后的字符串
        var getSignature = function(callback)
        {
            $.ajax({
                url:[[@{~/sign}]],
                type:"POST",
                success:function(result)
                {
                    callback(result);
                }
            })
        }
        
        //input change事件
        function addVideo(e)
        {
            //alert(e.files[0].name);
            videoFile = e.files[0];
        }
        //input change事件
        function addCover(e)
        {
            //alert(e.files[0].name);
            coverFile = e.files[0];
        }
    
        //a標簽點擊事件
        function videoClick()
        {
            $("#addVideo-file").click();
        }
        
        function coverClick()
        {
            $("#addCover-file").click();
        }
        
        //上傳按鈕
        function upload()
        {
            //提示信息
            addUploaderMsgBox();
            startUploader();
        }
        
        var startUploader = function()
        {
            //上傳視頻的核心
            qcVideo.ugcUploader.start({
                //視頻
                videoFile:videoFile,
                //封面
                coverFile:coverFile,
                
                getSignature:getSignature,
                allowAudio:1,
                
                success:function(result)
                {
                    //alert("success")
                    $('[name=videoresult]').text('上傳成功')
                },
                error:function(result)
                {
                    $('[name=videoresult]').text('上傳失敗')
                },
                progress:function(result)
                {
                    $('[name=videoname]').text(result.name)
                    $('[name=videosha]').text(Math.floor(result.shacurr*100)+"%")
                    $('[name=videocurr]').text(Math.floor(result.curr*100)+"%")
                },
                finish:function(result)
                {
                    $('[name=videourl]').text(result.videoUrl)
                }
                
            })
        }
        
        function addUploaderMsgBox()
        {
            var html = '<div name = 1>'
            html+='視頻的名稱：<span name="videoname"></span>;'+
            '計算sha進度：<span name="videosha"></span>;'+
            '上傳進度：<span name="videocurr"></span>;'+
            '上傳結果：<span name="videoresult"></span>;'+
            '地址：<span name="videourl"></span>;';
            
            html+="</div>"
            
            $("#resultBox").append(html);
            
        }
    </script>
    
</body>
</html>
video.html

 

package com.Gary.videodemo.controller;

import java.util.Random;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import com.Gary.videodemo.utils.Signature;

@RestController
public class IndexController {
    
    @RequestMapping("/plus")
    public ModelAndView plus()
    {
        return new ModelAndView("/video-plus.html");
    }
    
    @RequestMapping("/")
    public ModelAndView index(){
        return new ModelAndView("/video.html");
    }
    
    @RequestMapping("/sign")
    @ResponseBody
    public String getSign()
    {
        //得到Sign
            Signature sign = new Signature();
            //個人API密鑰中的Secret Id
            sign.setSecretId("AKIDkNsDQWZOYYVSHu49kDh9Uh1FSoxxxxxx");
            //個人API密鑰中的Secret Key
            sign.setSecretKey("XDn1a3NWzN0Tp4vH3zpSp5fEX2xxxxxx");
            sign.setCurrentTime(System.currentTimeMillis() / 1000);
            sign.setRandom(new Random().nextInt(java.lang.Integer.MAX_VALUE));
            sign.setSignValidDuration(3600 * 24 * 2);
            
            String signature = null;    
            try {
                signature = sign.getUploadSignature();
                System.out.println("signature : " + signature);
            } catch (Exception e) {
                System.out.print("獲取簽名失敗");
                e.printStackTrace();
            }
            
            return signature;
    }
    
}
IndexController.java

 

package com.Gary.videodemo.utils;

import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;
import sun.misc.BASE64Encoder;

public class Signature {
    private String secretId;
    private String secretKey;
    private long currentTime;
    private int random;
    private int signValidDuration;

    private static final String HMAC_ALGORITHM = "HmacSHA1";
    private static final String CONTENT_CHARSET = "UTF-8";

    public static byte[] byteMerger(byte[] byte1, byte[] byte2) {
        byte[] byte3 = new byte[byte1.length + byte2.length];
        System.arraycopy(byte1, 0, byte3, 0, byte1.length);
        System.arraycopy(byte2, 0, byte3, byte1.length, byte2.length);
        return byte3;
    }

    public String getUploadSignature() throws Exception {
        String strSign = "";
        String contextStr = "";

        long endTime = (currentTime + signValidDuration);
        contextStr += "secretId=" + java.net.URLEncoder.encode(secretId, "utf8");
        contextStr += "&currentTimeStamp=" + currentTime;
        contextStr += "&expireTime=" + endTime;
        contextStr += "&random=" + random;

        try {
            Mac mac = Mac.getInstance(HMAC_ALGORITHM);
            SecretKeySpec secretKey = new SecretKeySpec(this.secretKey.getBytes(CONTENT_CHARSET), mac.getAlgorithm());
            mac.init(secretKey);

            byte[] hash = mac.doFinal(contextStr.getBytes(CONTENT_CHARSET));
            byte[] sigBuf = byteMerger(hash, contextStr.getBytes("utf8"));
            strSign = new String(new BASE64Encoder().encode(sigBuf).getBytes());
            strSign = strSign.replace(" ", "").replace("\n", "").replace("\r", "");
        } catch (Exception e) {
            throw e;
        }
        return strSign;
    }

    public void setSecretId(String secretId) {
        this.secretId = secretId;
    }

    public void setSecretKey(String secretKey) {
        this.secretKey = secretKey;
    }

    public void setCurrentTime(long currentTime) {
        this.currentTime = currentTime;
    }

    public void setRandom(int random) {
        this.random = random;
    }

    public void setSignValidDuration(int signValidDuration) {
        this.signValidDuration = signValidDuration;
    }
}
Signature.java

 

　　目錄結構

　　

 

　　上傳封面只需在qcVideo.ugcUploader.start()方法中添加coverFile:coverFile並指定文件便可

　　為使視頻文件和封面文件一同上傳，可添加Button按鈕作為上傳按鈕並添加點擊事件upload()

 

    <form>
        <!-- 添加視頻 -->
        <input id="addVideo-file" onchange="addVideo(this)" type="file" style="display: none;">
        <!-- 添加封面 -->
        <input id="addCover-file" onchange="addCover(this)" type="file" style="display:none;">
    </form>
    
    <h1>上傳視頻+封面</h1>
    <!-- 添加視頻 -->
    <a id="addVideo" onclick="videoClick()" href="javascript:void(0)">上傳視頻</a>
    <!-- 添加封面 -->
    <a id="addCover" onclick="coverClick()" href="javascript:void(0)">上傳封面</a>
    <!-- 上傳按鈕 -->
    <a id="upload" onclick="upload()" href="javascript:void(0)">確定上傳</a>

 

        //上傳按鈕
        function upload()
        {
            //提示信息
            addUploaderMsgBox();
            startUploader();
        }

 

　　核心代碼

var startUploader = function()
        {
            //上傳視頻的核心
            qcVideo.ugcUploader.start({
                //視頻
                videoFile:videoFile,
                //封面
                coverFile:coverFile,
                
                getSignature:getSignature,
                allowAudio:1,
                //文件上傳成功后
                success:function(result)
                {
                    //alert("success")
                    $('[name=videoresult]').text('上傳成功')
                },
                //文件上傳失敗后
                error:function(result)
                {
                    $('[name=videoresult]').text('上傳失敗')
                },
                //正在上傳過程中會一直調用的Update
                progress:function(result)
                {
                    $('[name=videoname]').text(result.name)
                    $('[name=videosha]').text(Math.floor(result.shacurr*100)+"%")
                    $('[name=videocurr]').text(Math.floor(result.curr*100)+"%")
                },
                //上傳完成
                finish:function(result)
                {
                    $('[name=videourl]').text(result.videoUrl)
                }
                
            })
        }

 

　　


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 騰訊雲 視頻 點播 視頻上傳接口 基於騰訊雲點播的視頻上傳和轉碼功能 騰訊雲點播視頻存儲(Web端視頻上傳) springboot阿里雲視頻點播服務實現上傳視頻和刪除功能 騰訊雲點播vod使用Web 端上傳 SDK視頻上傳 vue + antd-vue + 騰訊雲點播 完成視頻上傳功能 JavaWeb-SpringBoot_使用MySQL數據庫實現用戶管理_demo 通過網頁上傳阿里雲點播視頻 阿里雲視頻點播（視頻上傳、圖片上傳憑證） 使用阿里雲視頻點播功能demo
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM