需求
在云培训系统里，制作视频课件是我们的主要工作之一，制作完成后如果将这些素材存储到服务器并进行分发播放，是摆在我们面前的一个问题。最终我们选择了腾讯云点播服务，其加速分发播放几乎适用所有需要展示图片或音视频媒体内容的在线场景，借助遍布全球的大量 CDN 加速节点，在复杂的网络环境也能提供高质量的媒体内容访问服务。
上传视频功能，主要要解决两个问题：
1、在服务端通过C#生成签名和SDKID
2、在客户端通过JavaScript上传视频到腾讯云点播服务器。
关键代码
界面元素布局
放置一个DIV容器，包括 file 上传控件(id:file1)、一个上传进度条的灰色背景层（id:ajax_uploadFiles_curbg）、一个传进度条的进度图片(id:ajax_uploadFiles_curprogress)、一个提示文字层(id:tip)，图片及层采用绝对定位，并在上传过程中计算进度值以决定进度图片的宽度。
示例代码如下：
代码语言：javascript复制<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和开发密钥，以生成有效的签名，才可以进行上传操作，示例代码如下：
代码语言：javascript复制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 = ("¤tTimeStamp=" 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; //开发ID
sign.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
代码语言：javascript复制//引用必要的三个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);
//重新或尝试获取sign
function 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>视频演示
JS上传视频到腾讯云点播
小结
以上提供的代码仅供参考，在实际的应用中，服务端 API URL 程序还需要身份验证或即时令牌访问等安全机制。
另外腾讯云媒体上传还提供了多种上传方式的SDK，具体可参考网址：https://cloud.tencent.com/document/product/266/9760
以上就是自己的一些分享，时间仓促，不妥之处还请大家批评指正！
