h5怎么做的相关视频?
H5制作视频或交互式视频H5是属于比较受欢迎的H5的玩法,方法很多,下面我们介绍如何使用 意派Epub360 H5页面制作工具制作出视频H5的效果
视频制作尺寸
手机屏幕尺寸型号如此繁多,如何确保一致的用户体验,尺寸控制是一个关键因素。现在提供了两种尺寸供大家参考,可以根据实际需要二选一。
官方建议尺寸1:制作750*1200px尺寸大小的视频,调整画布尺寸为微信PLUS画布,把视频拉伸成375*603px(内框尺寸,编辑器里视频变形不影响)。
尺寸2:制作符合画布(外框)大小的视频,即844*1496px(这是画布尺寸,注意内容尽量放在安全内框)
视频来源:《大哥,一起洗澡吗》by三人游创意坊
视频格式标准
前期需要制作视频,没有视频素材的派友也可以下载本次案例的视频体验一把。在制作时候要注意,视频的清晰度会受到编码频率,格式,帧速率(每秒多少帧),比特率,视频的体积,画质,视频的尺寸等因素的影响,这里就不讲解太多了,主要是针对我们编辑器上传本地视频来说明一下。
这里是视频制作软件AE的设置参数,需要注意的几点:
视频格式:MP4
视频编码:H.264(AAC音频)
视频尺寸:750*1200(官方建议)或740*1136
帧速率:25帧
画质:8
视频体积:20MB左右
比特率编码:VBR,2次
视频在AE里的布局
压缩视频
一定要对视频进行压缩处理,建议使用格式工厂,根据经验,建议整个视频不超过50M。
请使用编码为H.264压缩标准的MP4,且文件应该压缩后上传,这也是为了同时兼容各手机平台、各种桌面浏览器播放视频的需要,以下是常用视频压缩工具格式工厂的截图。
注意:不建议使用AVI/WMV等其他视频格式
注意事项
(1)其中编码和格式是固定的H.264 MP4(AAC音频),其余的参数值都不是固定的,只是提供一个大概范围,具体的是可以根据你的实际场景进行小的调整。
(2)在其他参数值一样的情况下,帧速率越大,画质越高,尺寸越大越清晰,相对的体积也会越大
6.视频在意派Epub360编辑器里的布局
在不同机型中的适配情况如图
视频预处理
针对之前视频类H5经常出现视频无法播放的问题,Epub360做出进一步优化,现将所有用户上传到Epub360素材库的视频进行预处理。视频上传素材库成功后,编辑器做视频预处理,需一定时长,待处理完毕后,才可以插入到编辑器当中。
如果想了解更多细节,可以戳说明了解《关于视频上传后预处理(必看)》。
组件用法
基本用法
1.播放设置
(1)点击本地视频组件
(2)弹出视频素材窗口,上传或选择要添加的视频
(3)视频拉伸成内框的尺寸
(4)如果需要视频在苹果手机上一打开就自动播放,要勾选微信苹果首页自动播放
注意:由于微信升级,安卓系统的视频播放必须用手势触发,不建议使用页面触发器(如切换到当前页时)、动画开始或结束时的触发器。
高级用法
1.点击其他元素,播放视频
2.如何做好视频播放前后的过渡衔接
(1)播放前过渡
虽然使用的是视频,但我们不希望别人看出来是视频,这就需要点击播放过渡自然一点。
当视频很大,加载需要很长时间时,点击播放可能出现“闪屏”的现象。可以用伪视频封面的方法,当视频开始播放的时候隐藏伪视频封面图,就可以很大程度上避免这个问题,通过视频设置封面选项,默认用视频首页截图作为视频封面图,点击小预览图可以替换视频封面。
(2)播放完过渡
视频播放结束后一般是跳转到宣传公司或是活动信息的页面上,这里我们需要在设置视频结束播放后跳转页面,切换效果选择【无】,下一页背景图最好是视频的最后一帧,这样就可以实现无缝跳转了。
3.补充:如何区分苹果安卓系统
有的用户问,苹果和安卓用户怎么区分呢?总不能做两个作品苹果版和安卓版吧?这里我们添加一个系统参数组件和一个按钮,按钮设置初始隐藏,当用户为安卓机型时显示按钮,按钮上设置激活时播放音视频即可。
(1)点击添加系统参数
(2)系统参数设置,当系统参数判断到H5打开设备的系统时,就显示播放视频的按钮。
4.其他视频设置:点击播放按钮及控制条播放
(1)上传本地视频之后,勾选右侧显示播放图标,视频上会显示一个默认的视频播放按钮,点击按钮可播放视频;也可以不勾选。
(2)勾选显示播放控制条,会在视频播放的时候显示,如图:
(3)苹果、安卓可以跳出微信实现全屏播放,只需要勾选下图中的选项即可:
5.视频在指定区域内播放
如果希望视频在指定的区域播放,针对安卓系统特殊说明一下:《小尺寸视频在安卓机指定区域内播放说明》
5在电脑端可以实现打开后自动播放,全屏播放,只需勾选下图中的:
免费的h5页面制作工具有哪些?
意派Epub360是一款专业的h5页面制作工具,区别于一般的模板类平台,专业的h5组件可以做出复杂、炫酷的效果,灵活度炒鸡高,做商业案例得心应手,界面有点类似ppt,这可以帮助用户快速上手,提高制作效率,缩短交付时间,还有很多优质的h5模板可以套用,短短几分钟就可以做出一个高端的h5作品。
H5页面如何快速制作
在我们工作生活中遇到大小节日,活动,会议,聚会等,需要给他们发送创造性的邀请函,通知书等就需要用到H5,那么如何快速制作一个H5页面呢,一起看看吧。
工具/原料
- MAKA
方法/步骤1
最好下载一个pc端保证兼容性,右键打开应用:
2
你可以点击最上方的创建作品进行制作,对待新手我建议进行模板更改:在左侧菜单栏中找到H5商店。
3
在搜索中输入你需要的文件关键字,如年会,婚礼邀请函等等:
4
在模板中找到适合更改的,点击“马上使用”:
5
进入使用页面,左侧可以方便你上传素材和输入文本等设置,在页面中点击不同的元素,在右侧进行图片或者动作的更改,一页一页更换内容:
6
编辑完成后点击右上角可以扫描预览,也可以转发给他人提建议再进行修改。
如何制作关于测试的H5页面
- 如何制作关于测试的H5页面
- HTML5页面制作工具,大体分为两类:基于HTML5的网站工具和手机APP工具
如何轻松的制作炫酷的H5页面案例分享
- 轻松又要炫酷挺难得,我的建议是有几点你要想清楚1、你的页面分享针对人群是谁2、分享你是想达到什么目的3、分享后你是否要收集数据进行分析至于制作的问题又分为2层1、炫酷类的一般都得专业团队能做因为牵涉到创意、交互、文案、设计、开发、测试等很多环节;但是存在几个问题 a:制作周期长 b:价格不菲 C:每次活动都得重新做、每次活动都得重新做2、如果不复杂你可以找第三方的制作工具,特点是 A:上手快、简单易操作 B:自主性强,可持续连贯使用 C:省去很多中间环节万能页可以帮你做到,你可以去试试!