淄博品质网站建设,app页面制作,做网站较好的公司,派代网目录
需求
关键代码
界面元素布局
C# 实现服务端的签名类
上传视频的JS实现
视频演示
小结 需求
在云培训系统里#xff0c;制作视频课件是我们的主要工作之一#xff0c;制作完成后如果将这些素材存储到服务器并进行分发播放#xff0c;是摆在我们面前的一个问题。…目录
需求
关键代码
界面元素布局
C# 实现服务端的签名类
上传视频的JS实现
视频演示
小结 需求
在云培训系统里制作视频课件是我们的主要工作之一制作完成后如果将这些素材存储到服务器并进行分发播放是摆在我们面前的一个问题。最终我们选择了腾讯云点播服务其加速分发播放几乎适用所有需要展示图片或音视频媒体内容的在线场景借助遍布全球的大量 CDN 加速节点在复杂的网络环境也能提供高质量的媒体内容访问服务。
上传视频功能主要要解决两个问题
1、在服务端通过C#生成签名和SDKID
2、在客户端通过JavaScript上传视频到腾讯云点播服务器。 关键代码
界面元素布局
放置一个DIV容器包括 file 上传控件(id:file1)、一个上传进度条的灰色背景层id:ajax_uploadFiles_curbg、一个传进度条的进度图片(id:ajax_uploadFiles_curprogress)、一个提示文字层(id:tip)图片及层采用绝对定位并在上传过程中计算进度值以决定进度图片的宽度。
示例代码如下
div
input typefile accept.mp4,.mp3 idfile1 onchangevUpload() /
img idajax_uploadFiles_curprogress stylez-index:1;position:absolute;left:0px;top:4px;width:0px;height:12px alt srcwin7progress.jpg /
div idajax_uploadFiles_curbg styledisplay:none;z-index:0;position:absolute;left:0px;top:4px;width:203px;height:12px;background-color:Gray/div
div idtip stylez-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 srcjquery-3.2.1.min.js/scriptscript srces6-promise.auto.js/scriptscript srcvod-js-sdk-v6.js/scriptscript typetext/javascriptvar sign ;var sdkid;var tcVod null;var timernull;var ws0;var fileobjdocument.getElementById(file1);var curbgdocument.getElementById(ajax_uploadFiles_curbg);var progressBarWidthparseInt(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;charsetutf-8,data: {validSeconds: 3600},dataType: json,success: function (res) {//返回的数据用data.d获取内容 if (res.errcode 0) {sign res.sign;sdkidres.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(z0y!0){stipy秒;} else if (z ! 0 y 0) {mtip z 分钟;} else if (z ! 0 y ! 0) {mtip z 分;stip y 秒;} return mtipstip;}//初始化腾讯上传组件function initTcVod() {tcVod new TcVod.default({getSignature: resign});}
//上传视频function vUpload(){ws0;curbg.style.display;timerwindow.setInterval(function(){ws},1000);var mediaFile document.getElementById(file1).files[0];var uploader tcVod.upload({mediaFile: mediaFile,mediaName:sdkidmediaFile.name,});uploader.on(media_progress, function (info) {fileobj.style.displaynone;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
以上就是自己的一些分享时间仓促不妥之处还请大家批评指正
