当前位置: 首页 > news >正文

C#结合JavaScript实现上传视频到腾讯云点播平台

目录

需求

关键代码

界面元素布局

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>
视频演示

JS上传视频到腾讯云点播

小结

以上提供的代码仅供参考,在实际的应用中,服务端 API URL 程序还需要身份验证或即时令牌访问等安全机制。

另外腾讯云媒体上传还提供了多种上传方式的SDK,具体可参考网址:https://cloud.tencent.com/document/product/266/9760

以上就是自己的一些分享,时间仓促,不妥之处还请大家批评指正!

相关文章:

C#结合JavaScript实现上传视频到腾讯云点播平台

目录 需求 关键代码 界面元素布局 C# 实现服务端的签名类 上传视频的JS实现 视频演示 小结 需求 在云培训系统里&#xff0c;制作视频课件是我们的主要工作之一&#xff0c;制作完成后如果将这些素材存储到服务器并进行分发播放&#xff0c;是摆在我们面前的一个问题。…...

简单介绍一下js中的构造函数、原型对象prototype、对象原型__proto__、原型链

构造函数 function Star (uname, age){this.uname unamethis.age agethis.sing function(){ log(唱歌~) }}let xzq new Star(薛之谦, 30)let ldh new Star(刘德华, 20)log(ldh) // { uname: 刘德华, age: 20, sing: f }ldh.sing() // 唱歌~log(ldh.sing xzq.sing) // fal…...

Java基于springboot+vue开发服装商城小程序

演示视频&#xff1a; 小程序 https://www.bilibili.com/video/BV1rM411o7m4/?share_sourcecopy_web&vd_source11344bb73ef9b33550b8202d07ae139b 管理员 https://www.bilibili.com/video/BV1fc411D7V3/?share_sourcecopy_web&vd_source11344bb73ef9b33550b8202d07ae…...

设计模式之十二:复合模式

模式通常被一起使用&#xff0c;并被组合在同一个解决方案中。 复合模式在一个解决方案中结合两个或多个模式&#xff0c;以解决一般或重复发生的问题。 首先重新构建鸭子模拟器&#xff1a; package headfirst.designpatterns.combining.ducks;public interface Quackable …...

java通过年月获取当前月所有周(跨月),获取每周开始日期和结束日期

/*** 根据年月返回本月共几周&#xff0c;每周开始与结束日期*/public static List<Map<String, String>> queryWeek(String year, String month) throws ParseException {/** 周 **/final String[] weeks { "第一周", "第二周", "第…...

9.3 Windows驱动开发:内核解析PE结构节表

在笔者上一篇文章《内核解析PE结构导出表》介绍了如何解析内存导出表结构&#xff0c;本章将继续延申实现解析PE结构的PE头&#xff0c;PE节表等数据&#xff0c;总体而言内核中解析PE结构与应用层没什么不同&#xff0c;在上一篇文章中LyShark封装实现了KernelMapFile()内存映…...

Zephyr:Direct Distillation of LM Alignment

Zephyr&#xff1a;Direct Distillation ofLM Alignment IntroductionMethod Introduction dSFT已经被可以提升模型的指令遵循能力的准确性&#xff0c;但是student model 不会超过 teacher model。 作者认为 dSFT虽然可以让模型更好的理解用户意图&#xff0c;但是无法与人类…...

二叉树--算法题总结

1、利用层序遍历的产生的字符串来创建二叉树 /*** 使用层序遍历的字符串创建二叉树* param treeInfo* return*/public static TreeNode generateTreeNodeSecond(String treeInfo) {LinkedList<TreeNode> treeNodeLinkedList new LinkedList<>();if(StringUtils.is…...

PyQt6 QLabel标签控件

​锋哥原创的PyQt6视频教程&#xff1a; 2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~共计21条视频&#xff0c;包括&#xff1a;2024版 PyQt6 Python桌面开发 视频教程(无废话…...

即时通讯技术文集(第24期):音视频WebRTC好文合集 [共20篇]

为了更好地分类阅读 52im.net 总计1000多篇精编文章&#xff0c;我将在每周三推送新的一期技术文集&#xff0c;本次是第 24 期。 [- 1 -] 开源实时音视频技术WebRTC的现状 [链接] http://www.52im.net/article-126-1.html [摘要] 作为Google开源的技术&#xff0c;WebRTC并不…...

HTML+CSS+JS网页设计与制作摄影类个人网页

可以使用网页三剑客htmlcssjs实现网页设计与制作&#xff0c;页面排版布局高端大气。 使用HTMLCSS页面布局设计&#xff0c;HTMLCSSJS网页设计与制作摄影类个人网页&#xff0c;这是一个优质的个人网页制作。 凭借简约的设计风格、精湛的制作工艺&#xff0c;突破与创新的理念…...

U-boot(五):启动内核

本文主要探讨210的uboot启动内核过程。 嵌入式系统状态启动 未上电时bootloader、kernel、rootfs以镜像形式存储在启动介质中(X210为iNand/SD卡),运行时搬运到DDR中 未上电时u-boot.bin,zImage,rootfs在SD卡中各自对应的分区中,启动时去对应分区寻找(分区表一…...

tp8 使用rabbitMQ(2)工作队列

代码的参数说明在 第一小节的代码中&#xff0c;如果需要可移步到第一节中查看 工作队列 工作队列&#xff08;又称&#xff1a;任务队列——Task Queues&#xff09;是为了避免等待一些占用大量资源、时间的操作。当我们把任务&#xff08;Task&#xff09;当作消息发送到队列…...

ZKP11.4 Use CI to instantiate Fiat-Shamir

ZKP学习笔记 ZK-Learning MOOC课程笔记 Lecture 11: From Practice to Theory (Guest Lecturer: Alex Lombardi) 11.4 Use CI to instantiate Fiat-Shamir Avoid Bad Challenges Def: Given false claim x x x and a first message α \alpha α, a challenge β \beta …...

华为云编译构建CodeArts Build常见问答汇总

1.【Build】公有云编译构建是否支持导入外部机器做执行机 答&#xff1a;参考链接&#xff1a;https://support.huaweicloud.com/usermanual-devcloud/devcloud_01_0017.html • 使用代理机功能&#xff0c;需要配备1台4U8G或以上规格、磁盘>80GB的主机。 • 安装代理的…...

009 OpenCV 二值化 threshold

一、环境 本文使用环境为&#xff1a; Windows10Python 3.9.17opencv-python 4.8.0.74 二、二值化算法 2.1、概述 在机器视觉应用中&#xff0c;OpenCV的二值化函数threshold具有不可忽视的作用。主要的功能是将一幅灰度图进行二值化处理&#xff0c;以此大幅降低图像的数…...

基于python的NBA球员数据可视化分析的设计与实现

完整下载&#xff1a;基于python的NBA球员数据可视化分析的设计与实现.docx 基于python的NBA球员数据可视化分析的设计与实现 Design and Implementation of NBA Player Data Visualization Analysis based on Python 目录 目录 2 摘要 3 关键词 4 第一章 引言 4 1.1 研究背景 …...

《使用Python将Excel数据批量写入MongoDB数据库》

在数据分析及处理过程中&#xff0c;我们经常需要将数据写入数据库。而MongoDB作为一种NoSQL数据库&#xff0c;其具有强大的可扩展性、高性能以及支持复杂查询等特性&#xff0c;广泛用于大规模数据存储和分析。在这篇文章中&#xff0c;我们将使用Python编写一个将Excel数据批…...

leetcode_828_统计子串中的唯一字符

题意&#xff1a;所有子串中单个字符出现的次数和 问题转化&#xff1a;对于串中的每个字符&#xff0c;只包含其一次的所有子串的个数和 关于求只包含某位置字符一次的子串个数 class Solution { public:int uniqueLetterString(string s) {/* ...A...A...A...*/int n s.size…...

「Java开发中文指南」IntelliJ IDEA插件安装(一)

IntelliJ IDEA是java编程语言开发的集成环境。IntelliJ在业界被公认为最好的Java开发工具&#xff0c;尤其在智能代码助手、代码自动提示、重构、JavaEE支持、各类版本工具(git、svn等)、JUnit、CVS整合、代码分析、 创新的GUI设计等方面的功能是非常强大的。 插件扩展了Intel…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...