码迷,mamicode.com
首页 > Web开发 > 详细

腾讯云视频jquery批量上传视频文件

时间:2020-03-01 12:34:43      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:multi   sdk   let   jquery   names   str   data   min   turn   

{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批量上传视频文件

标签:multi   sdk   let   jquery   names   str   data   min   turn   

原文地址:https://www.cnblogs.com/homexigua/p/12388826.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!