七牛云上传视频并截取第一帧为图片(js实现)
本文出自APICloud官方论坛,
感谢论坛版主 东冥羽的分享。
七牛云上传视频并截取第一帧作为视频的封面图。
使用js上传,模块videoPlayer截取第一帧(有专门的截图模块,但是我使用的有点问题,可能是视频源的问题;canvas也能截取,但是有点小bug,比如会截成黑色或白色的图片)。
上传一个和上传多个视频
demo运行点这里
需要参数:token值,七牛云域名
*逻辑:
上传一个视频:
点击上传按钮,获取token值,选中视频后开始上传。input file会获取文件的大小,文件名等信息,需要的信息会在页面显示,获取时间戳作为七牛云上传视频的文件名(避免重复)。
上传有三个状态:上传中、上传失败、上传成功。使用变量控制三个状态中各个参数的具体数值,从而控制页面中显示的内容样式,内容等。
因为只上传一个,在视频开始上传时就将上传按钮隐藏,禁止继续上传。(若上传失败借鉴上传多个视频,让按钮重新显示)
视频上传完成后,使用videoPlayer模块截取视频的第一帧(此刻视频源为七牛云的网络视频),把截取到的图片上传到服务器后赋值给封面图和视频表示图在页面显示。
上传多个视频:
点击上传按钮,把用到的标签属性添加到一个数组【videoInfo】中,数组的长度表示一共上传了多少个视频。body中遍历这个数组,不同的属性值显示上传状态不同的变化。
戳作为七牛云上传视频的文件名(避免重复)。
在上传时,始终获取并变化数组【videoInfo】中最后一个数据的各个属性:默认只有上次视频上传完成才能进行下个视频的上传操作。
上传完成后,若未成功则可进行删除操作,成功后使用模块截取视频第一帧并上传服务器。此时通过判断是否为第一个视频从而决定是否进行总封面图的赋值。
*提醒:代码运行时请把接口请求地址以及七牛云地址添加成自己的,目前代码上的接口地址和七牛云地址都为空
七牛云上传视频并截取第一帧为图片(js实现)的更多相关文章
- 七牛云上传视频(后端获取tolen)
参照网址 https://developer.qiniu.com/kodo/sdk/1242/python #pip install qiniufrom qiniu import Auth #需要填写 ...
- Laravel-admin 七牛云上传文件到七牛云出现卡顿失败情况
由于所做项目需要管理后台众多,所以选择了Laravel-admin后台框架进行开发.节省了权限控制以及页面处理等问题的时间 Laravel-admin文档地址 http://laravel-admin ...
- Go --- 七牛云 上传文件 & Token demo
package main import ( "bytes" "crypto/hmac" "crypto/sha1" "encodi ...
- 通视频URL截取第一帧图片
为了方便直接给UIImage加个类别,以后什么时候使用可以直接调用. #import <UIKit/UIKit.h> @interface UIImage (Video) /** 通过视频 ...
- iOS 七牛云上传并获取图片----【客户端】
最近做了七牛云存储的有关内容,涉及到与后台交互获取验证的token,无奈,后台自命清高,不与理会,没办法呀,于是自己搞呗.首先呢在在七牛上注册一个账号,然后呢添加一个存储空间这时候空间名 ...
- thinkphp 中 使用七牛云上传
利用七牛云私有空间存储文件 第一步,注册七牛云,创建空间,将空间设为私有 需要记下的东西: AK,SK,bucket 第二步配置ThinkPHP 在config.php添加 'UPLOAD_SITEI ...
- iUploader 2.0 七牛云上传工具
iUploader 软件介绍: iUploader主要功能将文件上传至七牛云,返回 Markdown 格式的链接到剪贴板 功能介绍: 图片本地压缩 图片右键上传 图片截取上传 图片复制上传 图片拖拽上 ...
- laravel中的文件上传到本地+七牛云上传
首先在filesystems.php 配置好上传的文件的目录起名为upload 在Storage/目录下面 目录下面的app/upload 如果没有这个文件会自动创建 这里的名字upload名字是跟控 ...
- thinkphp3.2使用七牛云上传文件
最近项目中用到了七牛云服务,来分享一下thinkphp使用七牛云来进行文件上传 1.首先在七牛云创建一个空间,例如空间名为test.获取secrectKey,accessKey 2.在thinkphp ...
随机推荐
- 析构函数 p157
析构函数 确保对象的各部分被正确的清除,及做一些用户指定的其他清理工作. 当对象超出它的作用域时,编译器将自动调用析构函数:手动用new在堆上分配的对象空间,需要调用'delete 对象地址'进行手动 ...
- Python--day40--全局解释器锁
1,起一百个线程和起一百个进程所花的时间对比(开启效率的较量): import time from threading import Thread from multiprocessing impor ...
- Python--day39--进程池原理及效率测试
#为什么要有进程池的概念 #效率 #每次开启进程都要创建一个属于这个进程的内存空间 #寄存器 堆栈 文件 #进程过多 操作系统调度进程 # #进程池 #python中的 先创建一个属于进程的池子 #这 ...
- 2018-2-13-wpf-使用-Dispatcher.Invoke-冻结窗口
title author date CreateTime categories wpf 使用 Dispatcher.Invoke 冻结窗口 lindexi 2018-2-13 17:23:3 +080 ...
- 1625 - Color Length——[动态规划]
题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...
- H3C CIDR
- HDU 1358 Period(KMP next数组运用)
Period Problem Description For each prefix of a given string S with N characters (each character has ...
- 2019-5-31-SharpDx-进入全屏模式
title author date CreateTime categories SharpDx 进入全屏模式 lindexi 2019-5-31 9:5:36 +0800 2019-5-30 20:1 ...
- 三、解析class文件
一.class文件 https://blog.csdn.net/tyyj90/article/details/78472986 https://blog.csdn.net/sinat_38259539 ...
- 【python安装】错误——“User installations are disabled via policy on the machine”
报错界面: 解决方法一: 1.在运行里输入gpedit.msc; 2.计算机配置管理>>管理模板>>windows组件>>windows Installer&g ...