本文出自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. C 盘的不速之客

      C 盘的报告内容既然上GB的空间 操作系统版本 原来是微软这个查找解决异常关闭解决方案生成的报告   参考 How To Disable Vista Error Reporting Feature ...

  2. angularJs

    学了差不多一个礼拜,感觉这个库还是很不错的,在应用中一些小笔记,其实这些笔记现在来看确实很基础,但是把这个博客当成我自己的一个记录历程,所以我也把这点笔记拿上来: 1.是一个js框架,是一个以js语言 ...

  3. SQL语言概述

    功能概述 DDL,数据库定义语言,创建,修改,删除数据库,表,视图,索引,约束条件等 DML,数据库操纵语言,对数据库中的数据进行增,删,改,查 DCL,数据库定义语言,对数据库总数据的访问设置权限 ...

  4. 汉诺塔III

    题目描述: 约19世纪末,在欧州的商店中出售一种智力玩具,在一块铜板上有三根杆,最左边的杆上自上而下.由小到大顺序串着由64个圆盘构成的塔.目的是将最左边杆上的盘全部移到右边的杆上,条件是一次只能移动 ...

  5. Ubuntu中VisualBox无法识别USB设备

    解决方法 安装Oracle VM VirtualBox Extension Pack( https://www.virtualbox.org/wiki/Downloads ) 执行sudo /usr/ ...

  6. 接口interface、实现接口implements

    接口实现类的多重继承,即一个类有多个父类. interface定义接口: interface 接口名 [extends 父接口名列表]{ 变量: 方法: } implements实现接口: class ...

  7. linux下如何使用gdb调试

    gdb是linux下非常好用的一个调试工具,虽然它是命令行模式的调试工具,但是它的功能强大到你无法想象,这里简单介绍下gdb下常用的命令. 首先编译生成可执行文件(这里的test.c是一个简单的求前n ...

  8. python学习笔记12-深浅拷贝

    以上为浅拷贝. .copy()函数 赋值:数据完全共享(=赋值是在内存中指向同一个对象,如果是可变(mutable)类型,比如列表,修改其中一个,另一个必定改变 如果是不可变类型(immutable) ...

  9. 贪心问题:区间覆盖 POJ 2376 Cleaning Shift

    题目:http://poj.org/problem?id=2376 题意:就是 N 个区间, 输入 N 个区间的 [begin, end],求能用它们覆盖区间[1,T]的最小组合. 题解: 1. 首先 ...

  10. 20155225 实验一《Java开发环境的熟悉》实验报告

    20155225 实验一<Java开发环境的熟悉>实验报告 一.命令行下Java程序的开发 按照老师提供的步骤,运行程序如下: 二.IDEA下Java程序开发.调试 设置条件断点如下: 三 ...