需求背景：为了方便用户上传自己手机内的本地视频，同时提高视频的分发量，故支持在移动端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.

快来星标 置顶 关注我

T ester