腾讯云视频jquery批量上传视频文件
Posted homexigua
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了腾讯云视频jquery批量上传视频文件相关的知识，希望对你有一定的参考价值。
{extend name="public/layout" /}
{block name="head"}
<script src="//cdn-go.cn/cdn/vod-js-sdk-v6/latest/vod-js-sdk-v6.js"></script>
{/block}
{block name="body"}
<body>
<div class="p-15">
<div class="upload-video">
<input type="file" style="display:none;" id="vod-file" multiple
accept=".mp4,.ts,.flv,.wmv,.asf,.rm,.rmvb,.mpg,.mpeg,.3gp,.mov,.webm,.mkv,.avi,.mp3,.m4a,.flac,.ogg,.wav" />
<button type="button" class="btn btn-default" onclick="$(‘#vod-file‘).click();"><i class="mdi mdi-select"></i> 选择视频</button>
<button type="button" class="btn btn-primary" onclick="uploadVod()"><i class="mdi mdi-video"></i> 上传视频</button>
<div id="video-box">
</div>
</div>
</div>
<script type="text/html" id="video-box-tpl">
<ul>
{@each videoFiles as video, index}
<li data-name="${video.sessionName}">
${video.name}
<div class="clearfix"></div>
<div class="progress-bar" aria-valuemin="0" aria-valuemax="100">
0%
</div>
</li>
{@/each}
</ul>
</script>
<script>
function getSignature() {
return $.get(‘sign.html‘,function (sign) {
return sign;
});
}
var tcVod = new TcVod.default({
getSignature: getSignature // 前文中所述的获取上传签名的函数
});
var videoNames = []; //已选择的视频文件数组
var videoFiles = []; //上传视频文件
var uploader = []; //上传对象
//选择视频
$(‘#vod-file‘).change(function (e) {
var files = e.target.files || e.dataTransfer.files;
if(files.length==0) alert("请选择视频文件");
for (var i=0; i<files.length; i++) {
if (files[i].constructor == File) {
var file = files[i];
var sessionName = file.name+‘_‘+file.size;
if($.inArray(sessionName, videoNames) == -1){
videoNames.push(sessionName);
file.sessionName = sessionName;
videoFiles.push(file);
}
}
}
var html = juicer($(‘#video-box-tpl‘).html(),{videoFiles:videoFiles});
$(‘#video-box‘).html(html);
});
//上传视频
function uploadVod() {
if(videoFiles.length==0) alert(‘请选择视频文件‘);
for(var i=0; i<videoFiles.length; i++){
let sessionName = videoFiles[i].sessionName;
let liObj = $(‘#video-box‘).find(‘[data-name="‘+sessionName+‘"]‘);
uploader[i] = tcVod.upload({
mediaFile: videoFiles[i],
});
uploader[i].on(‘media_progress‘, function (info) {
console.info(info.percent);
var width = (info.percent*100).toFixed(0);
liObj.find(‘.progress-bar‘).attr(‘aria-valuenow‘,width).css(‘width‘,width+‘%‘).text(width+‘%‘);
});
uploader[i].on(‘media_upload‘, function (info) {
console.info(info);
});
}
}
</script>
</body>
{/block}
以上是关于腾讯云视频jquery批量上传视频文件的主要内容，如果未能解决你的问题，请参考以下文章
vue + antd-vue + 腾讯云点播 完成视频上传功能