吴亦凡入伍广告是用什么软件做的 H5技术怎么实现
2015-9-9
“吴亦凡即将入伍”的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%。实现代码如下:
第二个就是两个视频连续播放的问题(中间不需要触发)。
android下视频播放是需要用户主动触发的。用户主动触发行为比如:touch、click(注意:zepto的tap是触发不了),类似setInterval此类 或者touch之后setTimeout再播放,都是行不通的。
网友评论