腾讯云视频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}

  

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

时间: 2024-10-16 19:16:35

腾讯云视频jquery批量上传视频文件的相关文章

陈松松:如何使用网页和软件批量上传视频

每个视频,都是你的金牌业务员 这是我写的第60篇视频营销原创文章 与其搜索十年,不如花一年的时间学习,去赚9年的高薪! 之前分享了很多有关视频营销方法.策略.技巧,比如视频商场技巧,制作视频方法等,最近有朋友询问有关视频上传方式的内. 首先上传视频整体看有2种方式,分开来看是三种: 第一种:网页上传 第二种:软件上传 第三种:第三方软件上传 无论是软件上传视频还是网页上传视频,各有优缺点,要根据自己的实际情况来选择到底是用网页上传还是用软件上传,接下来为你详细讲解! 第一种:网页上传 网页上传视

百度地图云麻点之批量上传、实时显示数据篇

上篇博文你可能用到的百度地图效果(付源码)介绍了几个比较实用的百度地图特效,其中重点介绍了海量数据上传及响应的问题,前端展示可以通过LBS云麻点来展示,通过这个可以解决批量数据Marker响应特慢的性能问题.首先在百度云服务器上建完表之后,我们可以通过后台的管理平台直接把数据传上去,作为我们的初始数据.这部分数据有了之后,接下来要做的就是想办法手动同步数据,更智能一点就是实时同步数据,接下来就带你一步步实现这个过程. 这次在正文开始之前,我想先做一次吐槽君.最近压力有点儿大,先来发一下牢骚.三人

视频营销:上传视频之后着重分析调整这5个因素

每个视频,都是你的金牌业务员 这是我写的第66篇视频营销原创文章 与其搜索十年,不如花一年的时间学习,去赚9年的高薪! 数据分析和优化调整是视频营销的关键. 很多人以为上传视频之后就大事告成了,开始坐等客户主动找上门. 而实际上我们还要对自己的内容进行调整和优化,以及对视频营销新的方法进行测试,帮助我们更好的做好视频内容,优化好视频标题,视频封面等,提高视频点击率. 视频上传之后,有2件事情需要我们每天都要做的, 第一件:分析同行视频数据 第二件:分析自己视频数据 当你每天都在分析自己的视频和同

linux FTP批量上传下载文件

一.登录ftp 输入 ftp 192.168.1.111 输入用户名:ftpuser 输入密码:aaa123 二.转到目标目录 输入:cd   test   ----test为文件夹 三.批量上传 输入 prom 此命令是打开批量上传或下载的开关,不然不能进行批量操作 输入下载命令:mput  * 四.批量下载 输入 prom 此命令是打开批量上传或下载的开关,不然不能进行批量操作 输入下载命令:mget *

视频营销:上传视频格外要注意的6个细节

这是我写的第93篇原创视频营销文章 陈松松,6年视频营销实战经验 今天分享下有关上传视频格外要注意的六个细节, 这六个细节大多数上传视频的朋友都没有注意, 在上传的过程中出现各种问题,接下来就详细跟你说说: 第1个细节:避免集中上传视频 如果每天只上传一两个视频,不会存在集中上传的问题, 但是如果你每天上传几十个到几百个视频,甚至更多,那必须注意这个细节, 尽量避免集中发布: 因为集中上传视频: ①所有视频会同时间推送出去,用户观看的时候,不知道先看哪个,也不能安心看完,这样上传的视频很难达到引

百度编辑器上传视频以及视频编辑器预览bug解决

百度编辑器目前来讲是运用比较广泛的一个编辑器了,不仅开源还有中文的文档,所以很受欢迎,不过里面也有许多地方需要开发人员自己调试,其中一个比较常见的问题就是上传视频了,上传视频本身有一些小bug,这个基本最大的体现就是编辑器内无法预览上传的视频问题. 我搜集了网上的解决方案,发现基本都一样,大多数都是复制黏贴的答案,虽说一定程度解决了编辑器上传不显示的问题,但却造成了新的bug,例如上传视频框无法关闭,还有只要等切换源码模式再返回来又看不到预览的视频了等. 所以最后还是自己动手丰衣足食,最后终于找

百度开源富文本编辑器 UEditor配置:图片上传和文件上传独立使用方法

使用UEditor编辑器自带的插件实现图片上传和文件上传功能,这里通过配置UEditor单独使用其内置的第三方插件swfupload来实现图片和文件的上传,通过对UEditor配置轻松实现图片批量上传,文件披批量上传 第一步:先配置UEditor <script src="ueditor/ueditor.config.js"></script> <script src="ueditor/ueditor.all.min.js">&l

jQuery之批量上传文件插件之一

$("#uploader").plupload({     /*常规设置*/     runtimes:'html5,flash,silverlight,html4',     url:'hyzx/seller/commPicUpload.action',     /*最大文件限制b, kb, mb, gb, tb */     max_file_size:'1mb',     /*是否生成唯一文件名,如果为true会为上传的文件唯一的文件名.*/     unique_names:t

jquery文件批量上传控件Uploadify3.2(java springMVC)

人比較懒  有用为主 不怎么排版了 先放上Uploadify的官网链接:http://www.uploadify.com/  -->里面能够看到PHP的演示样例,属性说明,以及控件下载地址.分flash版(免费)和html5版(收费). 官网上能够看到效果演示. 另外在网上找到了一份Uploadify3.2的中文API文档.能够在我上传的资源里面下载. 以下就是一个基于springMVC的文件上传演示样例,看起来可能比文档更直观一些··· 1.下载插件放到项目中 2.在jsp页面中引入下面JS和