七牛云上传视频并截取第一帧为图片(js实现)

本文出自APICloud官方论坛,

感谢论坛版主 东冥羽分享。

七牛云上传视频并截取第一帧作为视频的封面图。

使用js上传,模块videoPlayer截取第一帧(有专门的截图模块,但是我使用的有点问题,可能是视频源的问题;canvas也能截取,但是有点小bug,比如会截成黑色或白色的图片)。

上传一个和上传多个视频

demo运行点这里

需要参数:token值,七牛云域名

*逻辑:

上传一个视频:

点击上传按钮,获取token值,选中视频后开始上传。input file会获取文件的大小,文件名等信息,需要的信息会在页面显示,获取时间戳作为七牛云上传视频的文件名(避免重复)。

上传有三个状态:上传中、上传失败、上传成功。使用变量控制三个状态中各个参数的具体数值,从而控制页面中显示的内容样式,内容等。

因为只上传一个,在视频开始上传时就将上传按钮隐藏,禁止继续上传。(若上传失败借鉴上传多个视频,让按钮重新显示)

视频上传完成后,使用videoPlayer模块截取视频的第一帧(此刻视频源为七牛云的网络视频),把截取到的图片上传到服务器后赋值给封面图和视频表示图在页面显示。

上传多个视频:

点击上传按钮,把用到的标签属性添加到一个数组【videoInfo】中,数组的长度表示一共上传了多少个视频。body中遍历这个数组,不同的属性值显示上传状态不同的变化。

戳作为七牛云上传视频的文件名(避免重复)。

在上传时,始终获取并变化数组【videoInfo】中最后一个数据的各个属性:默认只有上次视频上传完成才能进行下个视频的上传操作。

上传完成后,若未成功则可进行删除操作,成功后使用模块截取视频第一帧并上传服务器。此时通过判断是否为第一个视频从而决定是否进行总封面图的赋值。

*提醒:代码运行时请把接口请求地址以及七牛云地址添加成自己的,目前代码上的接口地址和七牛云地址都为空

原文地址:https://www.cnblogs.com/APICloud/p/11492353.html

时间: 2024-08-05 19:14:51

七牛云上传视频并截取第一帧为图片(js实现)的相关文章

七牛云上传视频如何有效做到节省空间

在上传视频的时候,我们通常会保存到第三方[七牛云]平台.不过大多数程序员在系统后台上传视频后,一般都是保存到了本地,如果视频非常多或者视频容量特别大的情况下,那么我们的服务器迟早有一天会满,为了节省空间,下面教大家再上传视频时,如何以有效的节省服务器空间,一般情况下会把这些文件存到第三方,也就是需要我们下载qiniusdk,把qiniusdk放如Vendor目录下. 这里我们以课程视频为例子,实现的hmtl源代码如下:<tr> <td class="text">

七牛上传视频添加到队列时视频大小是否添加

最近在做视频分析的项目,遇到了一些关于七牛上传视频文件的问题. 当 选择的视频文件 大于 本地剩余空间 时,则取消上传. 'FilesAdded': function(up, files) { plupload.each(files, function(file,index) { //重点在这里 var fileSize=0; for(var i=0;i<files.length;i++){ fileSize+= Math.ceil(files[i].size/1024/1024); }; //

七牛云上传工具

三年前刚接触七牛云的时候,由于官方没有客户端上传工具,就用 Java 写了一个图形化的上传工具,纯属个人兴趣.后来公司项目使用了七牛云,就重新调整了一下代码,分享给有需要的人. 一.开发初衷 看到 Mac 上有几个不错的支持七牛上传的工具,发现 Windows 下并没有,而且七牛官方有现成的 API,就想自己尝试做一个出来,正好自己是安卓开发,就用 Java 写了一个,不管什么系统,只要装了 Java 即可运行. 软件是一个 jar 包,拖拽上传,很适合产品和设计的同学上传开发素材. 系统要求:

kindeditor 加入七牛云上传

七牛云上传主要有两种: 服务端上传 前端上传,前端又分两种返回方式: 1).重定向返回,可以解决ajax跨域的问题 2).回调返回,七牛云先向服务端要返回数据,再由七牛云返回前端,解决不支持重定向的请求方式,比如小程序上传 本次使用的是 七牛云 php sdk: composer require qiniu/php-sdk 在Kindeditor/php 下添加 config.php 主要是配置参数 <?php error_reporting(0); defined('ROOT_PATH') |

七牛上传视频并转码

/// <summary> /// 上传视频到七牛并转码 /// </summary> /// <param name="saveKey"></param> /// <param name="localFile"></param> public static void UpLoadVideo(string saveKey, string localFile) { Mac mac = new Ma

关于使用elementUI直传七牛云上传 and 下载踩坑

这几天一直研究七牛云的,,由于本人对elementUI框架的不熟悉,,踩了很多坑. 首先需要注册一个七牛云,最近快赶上双十一,所以七牛云新用户价格低廉500G*6个月只用了一分钱,废话不多说直接上代码. 先说说上传 前端使用elementUI的<el-upload>组件: <el-upload action="http://upload-z2.qiniup.com" :http-request="sliderRequest" :name="

thinkphp 中 使用七牛云上传

利用七牛云私有空间存储文件 第一步,注册七牛云,创建空间,将空间设为私有 需要记下的东西: AK,SK,bucket 第二步配置ThinkPHP 在config.php添加 'UPLOAD_SITEIMG_QINIU'=>array( 'maxSize'=>5*1024*1024,//文件大小 'rootPath'=>'./', 'saveName'=>array('uniqid',''), 'driver'=>'Qiniu', 'driverConfig'=>arra

iOS 七牛云上传并获取图片----【客户端】

       最近做了七牛云存储的有关内容,涉及到与后台交互获取验证的token,无奈,后台自命清高,不与理会,没办法呀,于是自己搞呗.首先呢在在七牛上注册一个账号,然后呢添加一个存储空间这时候空间名是用来识别存储空间的位置,而地区的选择则是设置存储七牛服务器的位置,那么选择一个公开空间免费试用就可以了~~        创建好账号就是查看官方文档编写demo的流程了,顺便附带一个下载地址:http://developer.qiniu.com/code/v7/sdk/objc.html    下

PHP阿里云OSS,七牛云 上传文件

来源:http://my.oschina.net/rain21/blog/477019 七牛云 PHPSDK下载:http://pan.baidu.com/s/1o69TGcM 7.X版本: DEMO: <?php require_once './vendor/autoload.php';   use Qiniu\Auth; use Qiniu\Storage\BucketManager; use Qiniu\Storage\UploadManager;   $accessKey = 'acce