html5视频制作,iH5最专业的H5制作工具

H5的动画效果,到底应该用H5动画来实现还是应该做成视频直接插入?

上分析:

79f13591bb8a3891c2d0ab0efa0a6591.png

动画篇

1.动画加载时间短,不会消耗太多流量

动画是由多个平面素材组合(也就是多张图),而视频,就是视频了。两者相比,视频的容量会更大,所以也就需要更多时间和更多流量来加载。运气不好的视频型H5是这样的:点开链接,却出现一个“视频加载中”

2ce2e66390578305fb76198ee625ed71.gif

这无疑是一个“流量预警”:接下来要播放视频了,会用掉很多的流量。于是网速不好不想等的同学,流量不够的同学,流量够但是不想浪费的同学,都会在这一步默默地左上角退出。

而动画基本不会有这样的问题,几张图片(通常还是压缩好的),快速加载,然后就是漂亮的动画效果了。

2.可以添加更丰富的交互

这无疑是动画党最坚定的理由了。视频因为是一整个文件,除了暂停,继续播放,基本没有其他的交互效果。

而动画因为是多个元素的组合,每个元素都有进行下一步动作的可能,每一步动画都可以添加不同的手势交互,甚至可以控制动画双向播放。“交互”毕竟一直是H5的重头戏,缺少了交互效果的H5,似乎也少了那么点乐趣。

3.对流量党更加友好

这个应该不用多解释了,可能10个动画H5才能比得上1个视频H5的容量。而且由于视频都是从头到尾直接播放,所以如果出现卡顿或者网速问题,分分钟就是“重头再来”,这对于没WiFi也没有4G包年的流量党来说实在是太奢侈了。

4.平均制作成本较低

动画基本标配:平面设计+交互

视频基本标配:平面设计+交互+视频制作

嗯,就是这样。

视频篇

1.画面真实度高,细节更丰富

跟只用平面素材拼凑起来的动画比,用视频编辑软件各种加特效、甚至是直接高清拍摄的视频,展现出来的效果当然有更好的细节,而且看起来也会更连贯更真实。而动画如果加载不顺畅的话,那就成了PPT。。。

63e64a1b4728f63641d6639821215f9d.png

2.保证声画同步

动画只能额外加音乐,如果加载速度不一致(比如音乐快了点,画面慢了点),就可能会有声画不同步的现象。所以目前动画基本是只有背景音乐,最多是交互的时候产生音效。

而视频是画面连音乐一体的,就完全不用担心这样的问题啦。

3.降低对手机的要求

这一条看起来很奇怪吧哈哈,其实是这样,动画比视频的元素更“小”,视频比动画的元素更“少”。也就是说,只要网速ok,视频加载完了就可以直接播放。

但动画素材加载出来之后,还要手机不停地运算来驱动动画效果,不同型号的手机就要考虑不同的适配问题,差一点的手机遇上复杂的动画可能就卡成平面了。可以说,这就是很多H5中复杂的动画效果选择用视频来展示的重要原因。

4.安卓端的播放限制

这个问题是这样的,腾讯爸爸的微信和qq都自带内置浏览器(qq浏览器X5内核),而他们的内置浏览器都默认——安卓系统视频置顶!

e940c379764f14ca449197eab984d797.png

也就是说,只要你是安卓机,就会自动把视频弹到最顶端播放,还自动全屏。不仅会有个无法隐藏的进度条,而且所有的交互效果都——与你无关。

最可恶的是,部分安卓机型可能还会在视频播放结束后出现广告。只有点击手机上的返回键才会回到H5的界面。

f45fd96344f7e79a0c29f2190e87df89.png

关于这个问题,目前能给的建议就是:浏览器中打开。不过最近有用户反映,就算浏览器打开也没办法解决这个问题,那就。。。建议先不用视频吧

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值