本文出自APICloud官方论坛,

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

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

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

上传一个和上传多个视频

demo运行点这里

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

*逻辑:

上传一个视频:

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

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

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

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

上传多个视频:

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

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

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

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

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

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

  1. 七牛云上传视频(后端获取tolen)

    参照网址 https://developer.qiniu.com/kodo/sdk/1242/python #pip install qiniufrom qiniu import Auth #需要填写 ...

  2. Laravel-admin 七牛云上传文件到七牛云出现卡顿失败情况

    由于所做项目需要管理后台众多,所以选择了Laravel-admin后台框架进行开发.节省了权限控制以及页面处理等问题的时间 Laravel-admin文档地址 http://laravel-admin ...

  3. Go --- 七牛云 上传文件 & Token demo

    package main import ( "bytes" "crypto/hmac" "crypto/sha1" "encodi ...

  4. 通视频URL截取第一帧图片

    为了方便直接给UIImage加个类别,以后什么时候使用可以直接调用. #import <UIKit/UIKit.h> @interface UIImage (Video) /** 通过视频 ...

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

           最近做了七牛云存储的有关内容,涉及到与后台交互获取验证的token,无奈,后台自命清高,不与理会,没办法呀,于是自己搞呗.首先呢在在七牛上注册一个账号,然后呢添加一个存储空间这时候空间名 ...

  6. thinkphp 中 使用七牛云上传

    利用七牛云私有空间存储文件 第一步,注册七牛云,创建空间,将空间设为私有 需要记下的东西: AK,SK,bucket 第二步配置ThinkPHP 在config.php添加 'UPLOAD_SITEI ...

  7. iUploader 2.0 七牛云上传工具

    iUploader 软件介绍: iUploader主要功能将文件上传至七牛云,返回 Markdown 格式的链接到剪贴板 功能介绍: 图片本地压缩 图片右键上传 图片截取上传 图片复制上传 图片拖拽上 ...

  8. laravel中的文件上传到本地+七牛云上传

    首先在filesystems.php 配置好上传的文件的目录起名为upload 在Storage/目录下面 目录下面的app/upload 如果没有这个文件会自动创建 这里的名字upload名字是跟控 ...

  9. thinkphp3.2使用七牛云上传文件

    最近项目中用到了七牛云服务,来分享一下thinkphp使用七牛云来进行文件上传 1.首先在七牛云创建一个空间,例如空间名为test.获取secrectKey,accessKey 2.在thinkphp ...

随机推荐

  1. 洛谷P1809 过河问题 经典贪心问题

    作者:zifeiy 标签:贪心 题目链接:https://www.luogu.org/problem/P1809 我们假设第 \(i\) 个人过河的耗时是 \(t[i]\) ,并且 \(t[i]\) ...

  2. 《Netty权威指南》(一)简单的时间服务器P69

    由于该书是基于Netty5编写的样例代码,而Netty5已经被官方废弃. 目前基于推荐版的4.1.12.Final在学习过程中,可能会出现个别接口不一致的情况.所以记录可在4.1.12下编译通过的代码 ...

  3. H3C 寻找邻居

  4. Linux创建用户、设置密码、修改用户、删除用户命令

    与大家分享下Linux系统中创建用户.设置密码.修改用户.删除用户的命令,希望对你有所帮助. useradd testuser  创建用户testuserpasswd testuser  给已创建的用 ...

  5. python模块之序列化模块

    序列化 """ 序列--字符串 序列化--其他数据类型转化为字符串数据类型 反序列化--字符串转化为其他数据类型 """ json模块 &q ...

  6. tf.reduce_sum()

    #axis 表示在哪个维度进行sum操作,不写代表所有维 #keep_dims 是否保留原始数据维度 reduce_sum( input_tensor, axis=None, keep_dims=Fa ...

  7. 51nod 1832 前序后序遍历

    思路:设只有一颗子树的节点有ans个设前序边历数组为pre[100],后序遍历数组为pos[100]:前序遍历的第二个元素是A的一个子节点左右节点不知,设ax-ay表示一个树的前序遍历,bx-by表示 ...

  8. ASP.NET MVC4.0+EF+LINQ+bui+网站+角色权限管理系统(7)

    今天将使用Simplemembership进行权限控制 我们使用mvc的AuthorizeAttribute来实现对Controller and Action权限控制 看如下标为红色的代码片段: // ...

  9. 快排java代码

    定一个基准位,递归左右两边排序. public void fun(){ int arr[] = {2,3,4,5,6,7,822,3,4,5,8,6,5,4,2,1}; //System.out.pr ...

  10. [Linux] 利用tcpdump和strace进行debug

    比如说要查看所有的sql查询语句,数据库的端口是3306 tcpdump -i any port 3306 -l -s 0 -w -|strings|grep -A 5 select 要查看所有的调用 ...