3.本地视频制作规范及如何适应画布【付费功能·基础版及以上】

小E发表于:2017年06月02日 11:20:50更新于:2018年09月10日 15:54:37

一.经典视频H5案例效果预览

_王小艺的朋友圈推文二维码封面.jpg

二.素材准备(点击进入)


三.在Epub360编辑器中的设置方法


关于视频上传后预处理(必看)

1.视频尺寸及位置(适配)

手机屏幕尺寸型号如此繁多,如何确保一致的用户体验,尺寸控制是一个关键因素。这次针对视频和图片组件,特别增加了尺寸自适应功能,来确保这一点。

尺寸1:制作750*1200官方建议尺寸)尺寸大小的视频,把视频拉伸成320*480(内框尺寸,编辑器里视频变形不影响),同时勾选视频启用尺寸自适应,勾选四边即可。

编辑版式文档_-_后台管理系统 5.png

视频来源:《王小艺的朋友圈》by夏文

尺寸2:制作符合画布(外框)大小的视频,即740*1136px(这是画布尺寸,注意内容尽量放在安全内框)

编辑版式文档_-_后台管理系统 3.png

视频来源:《大哥,一起洗澡吗》by三人游创意坊


2.如何播放


注意:由于微信升级,安卓系统的视频播放必须用手势触发。但苹果系统放在H5第一页的视频可以自动播放。不建议使用页面触发器(如切换到当前页时)、动画开始或结束时的触发器。

方式一:视频在苹果系统微信首页可以实现自动播放,但是在安卓上还是需要添加一个按钮,设置点击时播放,所以在优化的功能中,自动播放这一项已经被去掉。

在苹果系统微信首页可以实现本地视频的自动播放,我们这里拆解为五个步骤:

1.作品首页添加使用本地视频组件,导入制作好的视频

2.视频拉伸成内框的尺寸

3.勾选微信苹果首页自动播放

4.缩放以填充,基准点居中(看具体情况)

5.启用尺寸自适应,并点击四边

image.png

补充:如何区分苹果安卓系统

有的用户问,苹果和安卓用户怎么区分呢?总不能做两个作品苹果版和安卓版吧?这里我们添加一个系统参数组件一个按钮,按钮设置初始隐藏,当用户为安卓机型时显示按钮,按钮上设置激活时播放音视频即可。

image.png


方式二:点击播放按钮控制条播放

上传本地视频之后,勾选右侧显示播放图标,视频上会显示一个默认的视频播放按钮,点击按钮可播放视频;也可以不勾选,通过添加图片,设置触发器触发视频播放。

image.png

勾选显示播放控制条,会在视频播放的时候显示,如图:

image.pngimage.png

视频优化:苹果、安卓可以跳出微信实现全屏播放,只需要勾选下图中的选项即可:

image.png


注意:如果希望视频在指定的区域播放,针对安卓系统特殊说明一下:《小尺寸视频在安卓机指定区域内播放说明》


在电脑端可以实现打开后自动播放,全屏播放,只需勾选下图中的:

image.png

3.如何做好过渡衔接

①播放前过渡

虽然使用的是视频,但我们不希望别人看出来是视频,这就需要点击播放过渡自然一点。

当视频很大,加载需要很长时间时,点击播放可能出现“闪屏”的现象,可以用伪视频封面的方法,当视频开始播放的时候隐藏伪视频封面图,就可以很大程度上避免这个问题,新增视频封面设置选项,默认用视频首页截图作为视频封面图,点击小预览图可以替换视频封面。

image.png        image.png

具体方法:

选中视频,设置视频开始播放时——隐藏伪视频封面图及提示

081C8DA03C04A89B06A8DFDAD33158A3.jpg

②播放完过渡

视频播放结束后一般是跳转到宣传公司或是活动信息的页面上,这里我们需要在设置视频结束播放后跳转页面,切换效果选择无(none),下一页背景图最好是视频的最后一帧,这样就可以实现无缝跳转了。

999E5A270DFF438E849F08306EF78E76.jpg

4.微信中使用视频须知

①无法自动播放

从微信6.5.1版本之后,苹果(ios)微信客户端已经不支持自动播放,这是微信X5内核浏览器决定的,详情见腾讯浏览服务指南

腾讯浏览服务直达链接:http://x5.tencent.com/tbs/technical.html#/detail/web/1/1db76644-6da6-46d4-8708-3cd10927a7c6


②可能会出现广告

部分安卓的机型可能视频播放完会出现广告,这些广告并不是平台植入的,而是腾讯植入进去的,详情见腾讯浏览服务指南,屏蔽广告请勾选视频右侧面板的“安卓微信全屏”

腾讯浏览服务直达链接:http://x5.tencent.com/tbs/technical.html#/list/web/8976e4c9-81d6-4d1a-9c97-832464be6d55/视频/音频

4BA32EAF567077B2016A33A3505AAF4F.jpgDFF9E231D008D62913C3DDC49799D5CA.jpg

③可能会弹出全屏播放

我们测试的部分安卓机型会全屏播放。


四.案例教程演示(点击进入)


五.不同视频尺寸在多种机型上的适配

我们这里提供750*1200和740*1136两种视频尺寸在多种机型上适配情况,大家可以通过比对,选择适合自己的视频尺寸(待更新)。

尺寸一:750*1200

苹果视频不同机型的显示.png


回复(2)