吴亦凡入伍广告是用什么软件做的 H5技术怎么实现

2015-9-9hs0

“吴亦凡即将入伍”的H5广告之前可说是刷爆了朋友圈,不少同学看完后第一反应就是——好牛(哔),那么这种效果用H5技术怎么实现呢?感兴趣的小伙伴不妨和嗨客小编一起来学习下~

首先温习下这个高大上的广告吧

关于这个H5大概的实现原理,网上已经有人分析的很详细,我这里就不多做介绍了。

这次要分享是在兼容android下遇到的难点和兼容的思路:

第一个问题就是为了实现 Page1中里面图片中的人物要突然动起来,然后走出页面,那么video在初始化的时候就不能出现播放的icon,在IOS下设置一个poster就好了, 但在android下video对poster支持不是那么友好,加上会有千奇百怪的初始化播放效果:

在不设置controls下,video初始化android各平台的效果 (如下图)

吴亦凡入伍广告是用什么软件做的 H5技术怎么实现图片1

解决方法其实很简单,就是在video上面覆盖一张图片(图片为视频的第一帧),当开始播放的时候,再隐藏这个图片来达到模拟poster的效果。这样做就引发另外一个问题,这个页面的video的宽度是自适应,意思就是宽度和高度会随着屏幕的宽度等比缩放,那么覆盖在video上面这个的高宽也不能是固定的,也要跟着video等比缩放。


这里我们就会用到保持元素宽高比的技巧,为元素添加的padding-top百分比值。因为padding取值百分比时候,是相对于包含块的宽度而定的。我们的视频1比例是580X386,所以padding-top的值为386/580=66.55%。实现代码如下:

吴亦凡入伍广告是用什么软件做的 H5技术怎么实现图片2

第二个就是两个视频连续播放的问题(中间不需要触发)。

吴亦凡入伍广告是用什么软件做的 H5技术怎么实现图片3

相关软件

相关文章

10.23-10.29一周新游推荐 网侠神奇周四05.25

猜你喜欢

盖楼回复X