腾讯云视频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批量上传视频文件的主要内容,如果未能解决你的问题,请参考以下文章

基于腾讯云点播的视频上传和转码功能

上传大文件到腾讯云cos遇到的一些问题

腾讯云 视频 点播 视频上传接口

vue + antd-vue + 腾讯云点播 完成视频上传功能

腾讯云音视频助力印尼在线招聘平台KUPU升级面试体验,视频上传速度提升超60%

5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用