目錄

需求

關鍵代碼

界面元素布局

C# 實現服務端的簽名類

上傳視頻的JS實現

視頻演示

小結

---

需求

在云培訓系統里，制作視頻課件是我們的主要工作之一，制作完成后如果將這些素材存儲到服務器并進行分發播放，是擺在我們面前的一個問題。最終我們選擇了騰訊云點播服務，其加速分發播放幾乎適用所有需要展示圖片或音視頻媒體內容的在線場景，借助遍布全球的大量 CDN 加速節點，在復雜的網絡環境也能提供高質量的媒體內容訪問服務。

上傳視頻功能，主要要解決兩個問題：

1、在服務端通過C#生成簽名和SDKID

2、在客戶端通過JavaScript上傳視頻到騰訊云點播服務器。

關鍵代碼

界面元素布局

放置一個DIV容器，包括 file 上傳控件(id:file1)、一個上傳進度條的灰色背景層（id:ajax_uploadFiles_curbg）、一個傳進度條的進度圖片(id:ajax_uploadFiles_curprogress)、一個提示文字層(id:tip)，圖片及層采用絕對定位，并在上傳過程中計算進度值以決定進度圖片的寬度。

示例代碼如下：

<div>
<input type="file" accept=".mp4,.mp3" id="file1"  onchange="vUpload()" />
<img id="ajax_uploadFiles_curprogress" style="z-index:1;position:absolute;left:0px;top:4px;width:0px;height:12px" alt="" src="win7progress.jpg" />
<div id="ajax_uploadFiles_curbg" style="display:none;z-index:0;position:absolute;left:0px;top:4px;width:203px;height:12px;background-color:Gray"></div>
<div id="tip" style="z-index:0;position:absolute; font-size:9pt;left:205px;top:2px;height:12px;"></div>
</div>

C# 實現服務端的簽名類

上傳之前需要提供您的開發APPID和開發密鑰，以生成有效的簽名，才可以進行上傳操作，示例代碼如下：

public class Signature{public string m_strSecId;public string m_strSecKey;public int m_iRandom;public long m_qwNowTime;public int m_iSignValidDuration;public static long GetIntTimeStamp(){TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1);return Convert.ToInt64(ts.TotalSeconds);}private byte[] hash_hmac_byte(string signatureString, string secretKey){var enc = Encoding.UTF8; HMACSHA1 hmac = new HMACSHA1(enc.GetBytes(secretKey));hmac.Initialize();byte[] buffer = enc.GetBytes(signatureString);return hmac.ComputeHash(buffer);}public string GetUploadSignature(){string strContent = "";strContent += ("secretId=" + Uri.EscapeDataString((m_strSecId)));strContent += ("&currentTimeStamp=" + m_qwNowTime);strContent += ("&expireTime=" + (m_qwNowTime + m_iSignValidDuration));strContent += ("&random=" + m_iRandom);byte[] bytesSign = hash_hmac_byte(strContent, m_strSecKey);byte[] byteContent = System.Text.Encoding.Default.GetBytes(strContent);byte[] nCon = new byte[bytesSign.Length + byteContent.Length];bytesSign.CopyTo(nCon, 0);byteContent.CopyTo(nCon, bytesSign.Length);return Convert.ToBase64String(nCon);}public string getSign(int SignValidSeconds){Signature sign = new Signature();sign.m_strSecId = secretId;   //開發IDsign.m_strSecKey = secretKey; //開發密鑰sign.m_qwNowTime = Signature.GetIntTimeStamp();sign.m_iRandom = new Random().Next(0, 1000000);sign.m_iSignValidDuration = SignValidSeconds;return rv = "{\"errcode\":0,\"sign\":\"" + sign.GetUploadSignature() + "\",\"sdkid\":\"1111111111\"}";    }}

調用 Signature類的 getSign(int SignValidSeconds) 方法生成簽名，參數為簽名有效期的秒數。?

上傳視頻的JS實現

實現功能之前需要引用一些必要的JS文件，我的資源下載鏈接地址：https://download.csdn.net/download/michaelline/88555774

//引用必要的三個js
<script src="jquery-3.2.1.min.js"></script><script src="es6-promise.auto.js"></script><script src="vod-js-sdk-v6.js"></script><script type="text/javascript">var sign = "";var sdkid="";var tcVod = null;var timer=null;var ws=0;var fileobj=document.getElementById('file1');var curbg=document.getElementById('ajax_uploadFiles_curbg');var progressBarWidth=parseInt(curbg.style.width,10);
//重新或嘗試獲取signfunction resign() {return sign;}
//與服務器API地址交互獲得簽名值和SDKID，有效時間為3600秒function getsign() {$.ajax({type: "Post",url: '<%=ViewState["apiurl"].ToString()%>',contentType: "application/x-www-form-urlencoded;charset=utf-8",data: {validSeconds: 3600},dataType: "json",success: function (res) {//返回的數據用data.d獲取內容   if (res.errcode == 0) {sign = res.sign;sdkid=res.sdkid;initTcVod();} else {alert('上傳暫時無法使用。');}},error: function (err) {alert(err);}});}getsign();  //獲取一次簽名值function timetip(off) {var z = parseInt(off / 60, 10);var y = off % 60;var mtip='';var stip='';if(z==0&&y!=0){stip=y+'秒';} else if (z != 0 && y == 0) {mtip = z +'分鐘';} else if (z != 0 && y != 0) {mtip = z + '分';stip = y + '秒';}  return mtip+stip;}//初始化騰訊上傳組件function initTcVod() {tcVod = new TcVod.default({getSignature: resign});}
//上傳視頻function vUpload(){ws=0;curbg.style.display='';timer=window.setInterval(function(){ws++},1000);var mediaFile = document.getElementById('file1').files[0];var uploader = tcVod.upload({mediaFile: mediaFile,mediaName:sdkid+mediaFile.name,});uploader.on('media_progress', function (info) {fileobj.style.display='none';document.getElementById('tip').innerHTML='已上傳'+ Math.round(info.percent*100)+'%(耗時'+timetip(ws)+')';document.getElementById('ajax_uploadFiles_curprogress').style.width=(progressBarWidth*info.percent)+'px';})uploader.on('media_upload', function (info) {window.clearInterval(timer);document.getElementById('tip').innerHTML='上傳成功!';執行后續操作...}else{}})}</script>

視頻演示

小結

以上提供的代碼僅供參考，在實際的應用中，服務端 API URL 程序還需要身份驗證或即時令牌訪問等安全機制。

另外騰訊云媒體上傳還提供了多種上傳方式的SDK，具體可參考網址：https://cloud.tencent.com/document/product/266/9760

以上就是自己的一些分享，時間倉促，不妥之處還請大家批評指正！