.net阿里云视频上传，搭建服务器Web端JavaScrpt上传视频信息

最新推荐文章于 2023-07-03 17:53:32 发布

知音难遇

最新推荐文章于 2023-07-03 17:53:32 发布

阅读量715

点赞数 1

分类专栏： C# 阿里云视频点播上传

本文链接：https://blog.csdn.net/yzy1970185464/article/details/109100409

版权

C# 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

阿里云视频点播上传

1 篇文章 0 订阅

订阅专栏

参考 https://help.aliyun.com/document_detail/72085.html?spm=a2c4g.11186623.6.961.418958fcKLHJgt

添加包

1、服务端提供接口控制器ApiVideo下方法

AccessKeyID和AccessKeySecret在阿里云账户子用户里获取

/// 视频上传地址和凭证接口
/// </summary>
/// <returns></returns>
[HttpGet]
public ActionResult CreateUploadNewsVideo(Guid NID,string Title, string FileName)
{
// 构造请求
CreateUploadVideoRequest request = new CreateUploadVideoRequest
{
Title = Title, //UTF8编码
FileName = FileName//必须带扩展名，且扩展名不区分大小写
};
// 初始化客户端
DefaultAcsClient client = InitVodClient("AccessKeyID","AccessKeySecret" );
// 发起请求，并得到响应结果
CreateUploadVideoResponse response = client.GetAcsResponse(request);
string VideoId = response.VideoId;
//获取播放地址
string VideoUrl = GetVideoUrl(VideoId);
//修改视频路径
IAppVideo.News_Update_Video(NID, Title, VideoUrl);
//修改上传视频路径信息
return Content(response.ToJson());
}

//根据videoId获取上传视频的播放路径
private string GetVideoUrl(string videoId)
{
// 构造请求
GetPlayInfoRequest request = new GetPlayInfoRequest();
request.VideoId = videoId;
// request.AuthTimeout = 3600;
// 初始化客户端
DefaultAcsClient client = InitVodClient("AccessKeyID","AccessKeySecret");
// 发起请求，并得到 response
GetPlayInfoResponse response = client.GetAcsResponse(request);
Console.WriteLine("RequestId = " + response.RequestId);
Console.WriteLine("VideoBase.Title = " + response.VideoBase.Title);
List<GetPlayInfoResponse.GetPlayInfo_PlayInfo> playInfoList = response.PlayInfoList;
string PlayURL = "";
foreach (var playInfo in response.PlayInfoList)
{
PlayURL = PlayURL + playInfo.PlayURL;
}
return PlayURL;
}
/// <summary>
/// 如果videoId有值，根据videoId刷新上传凭证
/// </summary>
/// <param name="Title"></param>
/// <param name="FileName"></param>
/// <returns></returns>
[HttpGet]
public ActionResult RefreshUploadVideo(string VideoId)
{
// 构造请求
// 构造请求
RefreshUploadVideoRequest request = new RefreshUploadVideoRequest();
request.VideoId = VideoId;
// 初始化客户端
DefaultAcsClient client = InitVodClient("AccessKeyID","AccessKeySecret");
// 发起请求，并得到 response
RefreshUploadVideoResponse response = client.GetAcsResponse(request);
return Content(response.ToJson());
}

/// <summary>
/// 初始化VOD客户端
/// </summary>
/// <returns>The vod client.</returns>
private static DefaultAcsClient InitVodClient(string accessKeyId, string accessKeySecret)
{
// 点播服务接入区域
string regionId = "cn-shanghai";
IClientProfile profile = DefaultProfile.GetProfile(regionId, accessKeyId, accessKeySecret);
return new DefaultAcsClient(profile);
}

2、Web端 javascript案例包在下面

https://help.aliyun.com/document_detail/61388.html#section-kou-oxc-s05下载sdk路径

<tr>
<th>* 视频名称</th>
<td><input id="VideoTitle" name="VideoTitle" value="@Model.VideoTitle" class="form-control form-control-sm" required type="text" style="width:100%;" autocomplete="off" /></td>
<th></th>
<td></td>
</tr>
<tr>
<th>视频上传</th>
<td colspan="3">
<div class="upload">
<div>
<input type="file" id="fileUpload">
<label class="status">上传状态: <span id="status"></span></label>
<input type="text" id="region" value="cn-shanghai" style="display:none" />
</div>
<div class="upload-type">
<button id="authUpload" disabled="true">开始上传</button>
<button id="pauseUpload" disabled="true">暂停</button>
<button id="resumeUpload" disabled="true">恢复上传</button>
<span class="progressnew">上传进度: <i id="auth-progress">0</i> %</span>
<span></span>
@if (Model.VideoUrl != "")
{
<a href="@Model.VideoUrl">播放视频</a>
}
</div>
</div>
</td>
</tr>

3、https://127.0.0.1替换自己的服务器接口地址

<script>
//兼容IE11
if (!FileReader.prototype.readAsBinaryString) {
FileReader.prototype.readAsBinaryString = function (fileData) {
var binary = "";
var pt = this;
var reader = new FileReader();
reader.onload = function (e) {
var bytes = new Uint8Array(reader.result);
var length = bytes.byteLength;
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
//pt.result - readonly so assign binary
pt.content = binary;
pt.onload()
}
reader.readAsArrayBuffer(fileData);
}
}
$(document).ready(function () {
/**
* 创建一个上传对象
* 使用 UploadAuth 上传方式
*/
function createUploader() {
var uploader = new AliyunUpload.Vod({
timeout: 60000,
partSize: 1048576,
parallel: 5,
retryCount: 3,
retryDuration: 2,
region: $('#region').val(),
userId:"1571363948573267",
// 添加文件成功
addFileSuccess: function (uploadInfo) {
console.log('addFileSuccess')
$('#authUpload').attr('disabled', false)
$('#resumeUpload').attr('disabled', false)
$('#status').text('添加文件成功, 等待上传...')
console.log("addFileSuccess: " + uploadInfo.file.name)
},
// 开始上传
onUploadstarted: function (uploadInfo) {
// 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
// 如果是 UploadAuth 上传方式, 需要根据 uploadInfo.videoId是否有值，调用点播的不同接口获取uploadauth和uploadAddress
// 如果 uploadInfo.videoId 有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
// 注意: 这里是测试 demo 所以直接调用了获取 UploadAuth 的测试接口, 用户在使用时需要判断 uploadInfo.videoId 存在与否从而调用 openApi
// 如果 uploadInfo.videoId 存在, 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
// 如果 uploadInfo.videoId 不存在,调用获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)

if (!uploadInfo.videoId) {
var createUrl = 'https://127.0.0.1/ApiVideo/CreateUploadNewsVideo?NID=' + $('#NID').val() +'&Title=' + $('#VideoTitle').val() + '&FileName=' + uploadInfo.file.name
console.log(createUrl);
$.get(createUrl, function (data) {
console.log(data);
var uploadAuth = data.UploadAuth;
var uploadAddress = data.UploadAddress;
var videoId = data.VideoId;
console.log(uploadAuth, uploadAddress, videoId);
uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId);
console.log(uploadInfo);
}, 'json')
$('#status').text('文件开始上传...')
console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
}
else {
// 如果videoId有值，根据videoId刷新上传凭证
// https://help.aliyun.com/document_detail/55408.html?spm=a2c4g.11186623.6.630.BoYYcY
var refreshUrl = 'https://127.0.0.1/ApiVideo/RefreshUploadVideo?VideoId=' + uploadInfo.videoId
$.get(refreshUrl, function (data) {
var uploadAuth = data.UploadAuth
var uploadAddress = data.UploadAddress
var videoId = data.VideoId
uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
}, 'json')
}
},
// 文件上传成功
onUploadSucceed: function (uploadInfo) {
console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
$('#status').text('文件上传成功!')
},
// 文件上传失败
onUploadFailed: function (uploadInfo, code, message) {
console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message)
$('#status').text('文件上传失败!')
},
// 取消文件上传
onUploadCanceled: function (uploadInfo, code, message) {
console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
$('#status').text('文件上传已暂停!')
},
// 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
onUploadProgress: function (uploadInfo, totalSize, progress) {
console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%")
var progressPercent = Math.ceil(progress * 100)
$('#auth-progress').text(progressPercent)
$('#status').text('文件上传中...')
},
// 上传凭证超时
onUploadTokenExpired: function (uploadInfo) {
// 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时
// 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth
// 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth
$('#status').text('文件上传超时!')

let refreshUrl = 'https://127.0.0.1/ApiVideo/RefreshUploadVideo?VideoId=' + uploadInfo.videoId
$.get(refreshUrl, function (data) {
var uploadAuth = data.UploadAuth
uploader.resumeUploadWithAuth(uploadAuth)
console.log('upload expired and resume upload with uploadauth ' + uploadAuth)
}, 'json')
},
// 全部文件上传结束
onUploadEnd: function (uploadInfo) {
$('#status').text('文件上传完毕!')
console.log("onUploadEnd: uploaded all the files")
}
})
return uploader
}

var uploader = null

$('#fileUpload').on('change', function (e) {
var file = e.target.files[0]
if (!file) {
alert("请先选择需要上传的文件!")
return
}
var Title = file.name
var userData = '{"Vod":{}}'
if (uploader) {
uploader.stopUpload()
$('#auth-progress').text('0')
$('#status').text("")
}
uploader = createUploader()
// 首先调用 uploader.addFile(event.target.files[i], null, null, null, userData)
console.log(uploader)
uploader.addFile(file, null, null, null, userData)
$('#authUpload').attr('disabled', false)
$('#pauseUpload').attr('disabled', true)
$('#resumeUpload').attr('disabled', true)
})

// 第一种方式 UploadAuth 上传
$('#authUpload').on('click', function () {
// 然后调用 startUpload 方法, 开始上传
if (uploader !== null) {
uploader.startUpload()
$('#authUpload').attr('disabled', true)
$('#pauseUpload').attr('disabled', false)
}
})

// 暂停上传
$('#pauseUpload').on('click', function () {
if (uploader !== null) {
uploader.stopUpload()
$('#resumeUpload').attr('disabled', false)
$('#pauseUpload').attr('disabled', true)
}
})

$('#resumeUpload').on('click', function () {
if (uploader !== null) {
uploader.startUpload()
$('#resumeUpload').attr('disabled', true)
$('#pauseUpload').attr('disabled', false)
}
})

})
</script>

知音难遇

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
.net阿里云视频上传，搭建服务器Web端JavaScrpt上传视频信息

参考https://help.aliyun.com/document_detail/72085.html?spm=a2c4g.11186623.6.961.418958fcKLHJgt添加包1、服务端提供接口控制器ApiVideo下方法AccessKeyID和AccessKeySecret在阿里云账户子用户里获取 /// 视频上传地址和凭证接口 /// </summary> /// <returns></return...
复制链接

扫一扫