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

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

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

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

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

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

在不设置controls下，video初始化android各平台的效果 （如下图）

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

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

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