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

本文介绍如何使用JS上传视频至七牛云,并利用videoPlayer模块截取视频第一帧作为封面图。覆盖单视频及多视频上传流程,包括获取token、上传状态控制、封面上传至服务器等细节。

本文出自APICloud官方论坛,
感谢论坛版主 东冥羽的分享。

七牛云上传视频并截取第一帧作为视频的封面图。
使用js上传,模块videoPlayer截取第一帧(有专门的截图模块,但是我使用的有点问题,可能是视频源的问题;canvas也能截取,但是有点小bug,比如会截成黑色或白色的图片)。
上传一个和上传多个视频
七牛云上传视频并截取第一帧为图片(js实现)

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

demo运行点这里

需要参数:token值,七牛云域名
逻辑:
上传一个视频:
点击上传按钮,获取token值,选中视频后开始上传。input file会获取文件的大小,文件名等信息,需要的信息会在页面显示,获取时间戳作为七牛云上传视频的文件名(避免重复)。
上传有三个状态:上传中、上传失败、上传成功。使用变量控制三个状态中各个参数的具体数值,从而控制页面中显示的内容样式,内容等。
因为只上传一个,在视频开始上传时就将上传按钮隐藏,禁止继续上传。(若上传失败借鉴上传多个视频,让按钮重新显示)
视频上传完成后,使用videoPlayer模块截取视频的第一帧(此刻视频源为七牛云的网络视频),把截取到的图片上传到服务器后赋值给封面图和视频表示图在页面显示。
上传多个视频:
点击上传按钮,把用到的标签属性添加到一个数组【videoInfo】中,数组的长度表示一共上传了多少个视频。body中遍历这个数组,不同的属性值显示上传状态不同的变化。
七牛云上传视频并截取第一帧为图片(js实现)

戳作为七牛云上传视频的文件名(避免重复)。
在上传时,始终获取并变化数组【videoInfo】中最后一个数据的各个属性:默认只有上次视频上传完成才能进行下个视频的上传操作。
七牛云上传视频并截取第一帧为图片(js实现)
上传完成后,若未成功则可进行删除操作,成功后使用模块截取视频第一帧并上传服务器。此时通过判断是否为第一个视频从而决定是否进行总封面图的赋值。
七牛云上传视频并截取第一帧为图片(js实现)

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值