前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >H5上传文件又双叒叕开测了!

H5上传文件又双叒叕开测了!

作者头像
ITester软件测试小栈
发布2019-10-17 17:54:06
1.7K0
发布2019-10-17 17:54:06
举报
文章被收录于专栏:全栈测试

需求背景:为了方便用户上传自己手机内的本地视频,同时提高视频的分发量,故支持在移动端H5页面增加上传视频、音乐、图片。

原型图:

1.首页&上传素材空页面:

2.上传素材(有素材)&分享素材:

H5首页:

1.访问H5登录页面,填写账号和密码,允许账号授权后登录到H5首页;

2.已登录的用户可访问H5首页,点击右上角头像,退出登录;

3.首页导航新增上传素材的“+”号按钮,点击按钮,进入上传素材页面;

4.在其他页点击logo,返回H5首页,在H5首页点击logo,仍在H5首页;

上传素材

一、H5与PC端的素材同步关系:

1.H5上传的素材页面只显示通过H5上传的素材,PC上传的素材不同步至H5,H5上传的素材实时同步至PC对应的素材Tab页;

2.PC上修改素材(图片、音乐、视频)的标题和视频描述,H5上同步修改;

3.PC上删除素材(图片、音乐、视频),H5也同步删除;H5上删除素材,PC上也同步删除;

二、上传素材-空数据页面:

1.H5上传素材页面为空页面时,展示默认文案“您可以选择视频、图片或音频素材进行上传”;

2.点击“上传”按钮,打开选择文件的页面,可访问手机本地文件(支持拍照、访问照片图库、浏览文件库);

3.选择本地文件后,在当前页面显示该文件上传的进度,上传完后自动刷新当前页面,正常展示到文件列表;

三、上传素材-有数据页面:

1.素材按照转码完成的时间顺序排列展示,上传中的展示在前,转码完成的展示在后;

2.每页加载20条数据,下滑页面加载新数据;

3.上传失败(非转码失败)的素材,在判断出上传失败后,toast提示“素材上传失败”,点击“编辑”-“删除”或刷新当前页面,将该素材从列表中删除;

4.转码失败的素材,在判断出转码失败后,在列表中显示“上传失败”的状态;

5.点击右上角“编辑”,上传完成和转码失败的文件前出现选择框:

(1)未选择文件时,“删除”按钮不可点击;

(2)勾选文件后,显示本次删除的文件数,点击删除时弹出删除的二次确认对话框;

(3)下滑刷新加载更多数据,支持勾选多个文件进行批量删除;

6.上传中的文件不能删除,上传完成和转码失败的文件可删除;

7.视频文件:

(1)上传完成的视频有”分享”按钮,其它类型各个状态下的文件无此按钮;

(2)视频素材在封面上标注“视频”及视频时长,右侧展示视频标题,上传时间,文件大小及“分享”按钮,点击“分享”按钮,进入视频分享页面;

(3)上传视频的文件标题显示两行,超过两行显示不下用...表示;

(4)视频文件支持上传avi、flv、mov、mp4、wmv格式文件;

8.音频文件:

(1)音频封面用默认图,封面上标注“音频”及音频时长,右侧展示音频标题,上传时间,文件大小;

(2)上传音频的文件标题显示两行,超过两行显示不下用...表示;

(3)音频文件支持上传mp3、wav格式文件;

9.图片文件:

(1)图片封面用实际上传的图片作为封面,封面上标注“图片”字样,右侧展示图片标题,上传时间,文件大小;

(2)图片获取不到封面时,用默认图代替;

(3)上传图片的文件标题显示两行,超过两行显示不下用...表示;

(4)图片文件支持gif、jpeg、jpg、png格式文件;

10.支持单个文件上传和最多批量上传5个文件,上传完后自动刷新当前页面,正常显示到文件列表;

11.上下滑动H5页面,加载新数据,顶部logo和“编辑”按钮应始终固定在顶部;

12.H5上传文件列表页及文件分享页在主流浏览器及客户端下访问,功能正常、页面显示正常:微信、微博、QQ、Safari浏览器、UC浏览器、QQ浏览器、搜狗浏览器、夸克浏览器、猎豹浏览器等;

13.上传素材时,断开网路,则中断上传,在当前页恢复网路,则继续上传;

14.选择非图片、视频、音频格式文件时,限制上传,提示“暂不支持上传该格式文件”;

四、分享视频到微博:

视频:

1.视频点击后可播放,支持前后滑动进度条查看或使用自带的组件快进/慢退15s;

2.视频快进或后退调整后,仍为原始的播放或暂停状态;

3.视频声音和画面正常,支持静音播放和取消静音播放;

4.支持上传视频封面,选择图片作为封面后,视频在未播放时默认使用上传的图片作为封面;

视频标题(必填):

1.不输入标题点击“分享”按钮,以红色字提示“标题不能为空”;

2.视频标题支持6-30个字符:数字、字母两个为一个字符,一个中文为一个字符;

3.视频标题填写处支持复制、粘贴文字;

博文(必填):

1.输入视频标题,不输入博文即点击“分享”按钮,以红色字提示“博文不能为空”;

2.博文字数不做限制,当博文填写栏输入的内容增多,输入框向下键入,支持上下滑动页面进行查看;

3.博文内容支持输入表情:点击键盘弹出表情键盘,可将表情填入博文中,再次点击则收起表情键盘;

微博账号:

1.打开选择账号窗口,默认勾选全部有效的账号,授权过期的账号置灰不可选,重新授权绑定后可选;

2.点击“全选”可全选所有账号,再次点击“全选”取消全选;

3.在单个账号后,点击选择框,可选择/取消选择;

4.勾选账号后,点击“取消”,取消操作;点击“保存”,则完成则保存所选账号的操作;

定时分享:

1.点击定时分享,则在指定时间将视频和博文分发到微博;

2.不选择定时分享,则立即将视频和博文分享到微博;

预览:

1.点击预览,跳转到新页面,在底部显示“生成预览中”,5秒后提示消失;

2.预览页面显示logo和用户头像及昵称,博文,视频,“复制预览链接”;

3.若视频上传了封面,则视频未播放时,预览页面默认展示封面;

3.在预览页支持播放视频,快进/慢放等操作;

4.点击“复制预览链接”,复制后可正常访问到预览页面;

分享:

1.点击“分享”按钮,显示分享进度,并提示“加载中,请稍后”,分享完成后toast提示“分享成功”,在PC-我的分发记录中可查看分发记录及分发状态;

2.成功分发后,分发的视频应支持播放,视频博文显示正常,可正常浏览和转发等操作;

以上

That's all.

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-09-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 ITester软件测试小栈 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 需求背景:为了方便用户上传自己手机内的本地视频,同时提高视频的分发量,故支持在移动端H5页面增加上传视频、音乐、图片。
相关产品与服务
访问管理
访问管理(Cloud Access Management,CAM)可以帮助您安全、便捷地管理对腾讯云服务和资源的访问。您可以使用CAM创建子用户、用户组和角色,并通过策略控制其访问范围。CAM支持用户和角色SSO能力,您可以根据具体管理场景针对性设置企业内用户和腾讯云的互通能力。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档