header_v1.7.40

关于“吴亦凡入伍”H5背后的故事!

2年前发布

原创文章 / 平面 / 教程
腾讯游戏TGideas 原创,如需商业用途或转载请与腾讯游戏TGideas联系,谢谢配合。

早上一睁眼,朋友圈被吴亦凡入伍的H5刷屏,创意受到了广泛的关注,很多人开始找到我了解创作背景,有恭喜的,有质疑的,也有各种分析的。既然火到这个程度,我就借着热度还没有过去,说说团队创作这个H5创意的完整过程。


早上一睁眼,朋友圈被吴亦凡入伍的H5刷屏,创意受到了广泛的关注,很多人开始找到我了解创作背景,有恭喜的,有质疑的,也有各种分析的。既然火到这个程度,我就借着热度还没有过去,说说团队创作这个H5创意的完整过程。



创意永远是命题作文,项目初期团队了解到:


1.吴亦凡签约全民突击将会是一个立体完整的campaign,品牌团队希望TGideas在H5这个模块,通过出彩的创意引爆话题

2.没有任何素材,吴亦凡只能在拍戏间歇给出1个小时的时间来录制一些内容

3.因为这段时间吴亦凡在拍古装戏,他的头发没了......


种种条件限制下,只能用巧劲解决问题,在悬念设计上需要有一个能抓住人的点,吴亦凡简短了头发风格变得犀利,全民突击又是一款军事题材的游戏,,那参军入伍这件事情结合上述条件貌似巧妙的合情合理,在大众,特别是粉丝眼里,自己喜爱的明星参军这是一件大事,一定会引起关注和讨论。确认这个概念之后,剩下就是形式的问题,一篇娱乐新闻一定会引起广泛的关注,所以我们提出用新闻页的形式,来做创意落地。

这个案例有趣的地方是:大部分人真的会用读一条新闻的心态来关注这个新闻,但突然动起来,并跑出画面的吴亦凡,一定会超出用户对内容的固有预期,于是创意中最重要的一个引爆点就此形成。相信很多人转出来,都希望他的朋友也能够“吓一跳”(后来看到很多分析贴说鬼节当天出这个创意太犀利,其实我想说素材本来是打算在今天12点再发的,无奈有人提前在朋友圈做了曝光...)

至于视频通话的创意概念,其实并不是什么新鲜的玩法,在这之前这种形式的案例也非常多,这个模块的关键点在于:与明星面对面的沟通,这是一个很核心的粉丝向内容,喜欢吴亦凡的人一定会看着心爱的明星和自己近距离对话,所以这里就是用用户熟悉的形式,道出了广告内容的真像而已。


刨去创意模块,其实在我看来更关键的还是执行,做到比想到更重要。


TGideas内部临时组成了项目小队,由视觉,前端,开发,创意,多媒体的小伙伴快速开始就执行难点进行评估。

技术方面,视频如何流畅播放?HTML5在ios,Android,微信,手Q,微博,腾讯新闻客户端打开时浏览器的兼容问题如何解决?大量技术问题,到现在我们的前端攻城狮们仍在优化解决。设计方面,新闻页打开后什么时候让视频自动播放?整个体验过程如何能制造惊喜?如果用户再PC端看到这个消息,点开后的PC页面展示形式如何,能否依然有互动乐趣?我们的设计狮也还在迭代优化中。素材的筹备方面,为了让吴亦凡在1个小时内快速的完成素材的录制,TGideas的设计师亲自上阵,输出了完整交互原型之后,还输出了完整的互动demo,方便吴亦凡能够快速理解创意点,并在拍摄过程中全程跟进监制。整个过程中也有外部伙伴积极配合艺人拍摄的协调和执行,以及文案的最终润色。

 


(图1,原型稿的设计)

 


(图2,TGideas设计师为了方便吴亦凡理解,自己表演输出了demo)



(图3,创意同期输出PC版,确保多端体验)



移动互联网时代,优质的传播素材是核心引爆点,创意与技术有效结合,就会有奇妙的化学反应。

回想起来,这次的吴亦凡入伍案例,就是以前PC端富媒体广告创意形式在移动终端上的巧妙再现而已。其实是一个严苛条件命题下执行比较到位的小聪明,想必行业里做互动的伙伴们一定也会这样认为。

不过我想这个案例一定也会有一些价值,对于一只专注创意和设计的inhouse团队来说,比起获奖,我们更关注和用户的有效沟通。很开心在移动端互动广告的模式里抛出了一个石子儿,期待他能够引起足够大的涟漪,让我们看到更多精彩的创意。


—前端篇—


在"吴亦凡入伍"的H5在朋友圈刷屏之后,看到网上不少同学对背后的技术感兴趣,正好借着机会跟大家分享(吐槽)一下。如果你正好也遇到在android下视频自动播放和两个视频连续播放(中间不需要触发)的问题,希望本文会对你有所帮助。


关于这个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%。实现代码如下:


<div class="video-box">
 <div class="video">插入video...</div>
 <div class="bg-poster"></div>
</div>

.video-box{position: relative;width: 100% }
.video{width: 100%; height: 100% }
.bg-poster{width:100%; padding-top: 66.55%; position: absolute; top:0; left:0; 
background: url(./bg_poster.jpg) no-repeat 0 0; background-size: cover }


第二个就是两个视频连续播放的问题(中间不需要触发),被这个问题折腾了好久。



android下视频播放是需要用户主动触发的。用户主动触发行为比如:touch、click(注意:zepto的tap是触发不了),类似setInterval此类 或者touch之后setTimeout再播放,都是行不通的。


我们的需求是用户进到页面,当页面滚动一定高度之后,开始播放视频1,视频1播放完毕,不需要用户手动触发接着播放视频2。


转化到前端的逻辑就是说:用户滚动页面一定高度之后,要连续播放视频1,2 中间用户是没有用户触发行为的。

所以当时的解决思路这样的: 当用户有触发行为时,就同时初始化视频1和视频2,给视频1添加ended事件,视频1播放完毕后就直接播放视频2 [v2.play()]


$(document).one("touchstart", function() {
$("#v1")[0].play();
setTimeout(function() {$("#v1")[0].pause() }, 200);
$("#v2")[0].play();
setTimeout(function() {$("#v2")[0].pause() }, 200);
});

 

然而现实却很残酷(在android下会提示解析错误或者弹框让你选择文件打开方式) 


既然上面的方法不行,那就用另外一种方法:当用户第一次触屏页面的时候去初始化视频2,然后等用户滚动页面一定高度的时候再去播放视频1,当视频1播放完毕,在回调里面直接播放视频2:


//第一次触屏 初始化 视频2$(document).one("touchstart",function(){
	$("#v2")[0].play();
	$("#v2")[0].addEventListener("canplay",function(evt) {
		$("#v2")[0].pause();
	});

});//滚动页面到一定距离播放视频1var isPlay;
$(document).on("touchmove",function(){	if (isPlay) return;	var d = $("#v1")[0].getBoundingClientRect().bottom;	if (d < 120) {
		$("#v1")[0].play();
		isPlay = true;
	}
});//视频1 播放完毕回调里播放视频2$("#v1")[0].addEventListener("ended",function(evt) {
	$("#v2")[0].play();
});


但这样还是会报错,我在想是不是canplay的事件发生的时候,video还没有初始化完成,但文档里面又找不到video初始化完成的API。


于是把逐个看似跟video初始化完成差不多的事件全都试了个遍(感谢2w陪我试各种API)。包括oncanplaythrough oncanplay onplay onplaying onprogress onreadystatechange ontimeupdate... 结果统统都不行,不行... 先不说了,我得先去给我的android测试机充会儿电~


但自己承诺过的需求,含着泪也要完成~ (其实我会告诉你我当时已经开始暗想,当视频1播放完了,我要设计师给加一个按钮,提醒用户去点击,然后播放视频2么.)


后来经过反复调试和测试,发现一个规律,把视频2在自带的控制条上手动触发播放,等开始播放之后,再手动暂定,然后再播放1,等视频1结束后调用视频2 是正常的,也不会报错。很神奇有木有!


基本上可以总结成一个规律:只要视频2已经播放过,哪怕一帧就行,这样当视频1播放完毕之后再play视频2,就是正常的!


好既然找出规律来,那么就好办了,怎么监视视频播放过呢?由于没有现成的api.只能用别的事件来控制了~

因为在之前已试过video的N多事件,这时候该 timeupdate 登场了。 文档解释是:当播放位置改变时(比如当用户快进到媒介中一个不同的位置时)运行的脚本。


逻辑就是只要有视频播放的时候,这个事件就会不断地被触发。当有了播放时间(currentTime>0)了,就说明已经播放过了,然后暂停它。等着再次被play();


var v1= $("#v1")[0];var v2= $("#v2")[0];//第一次触屏播放初始化视频2$(document).one("touchstart",function(){
	v2.play();
});//视频1播放完成,回调播放视频2v1.addEventListener("ended",function(evt) {
	v2.currentTime = 0;
	v2.play()
});//视频2添加事件 监听如果已经播放,就暂停function initVideo(){
	if (v2.currentTime){
		v2.pause();
		v2.removeEventListener("timeupdate", initVideo, false);
	}
}
v2.addEventListener("timeupdate", initVideo, false);//滚动页面到一定高度播放视频1var isPlay;
$(document).on("touchmove",function(){	var d = v1.getBoundingClientRect().bottom;	if (isPlay) return;	if (d < 120) {
		v1.play();
		isPlay = true;
	}
});


OK了~ 费了九牛二虎之力总算是能兼容android了,心好累。还在继续优化中,试试不能不能只需要一次滚屏事件就完成这个交互,不过又掉进android里面的touchmove  touchend的坑里面去了...待续~


总结: android下  1.不能存在两个初始化的video,会报错   2.没有用户主动触发行为,play()执行是无效的,但在该视频在已经被播放的情况下是可以不用用户主动触发直接Play()是可以的(必须是已经播放过,即使初始化完成,直接Play()也是不行的)。


最后关于兼容腾讯新闻app和IOS自带浏览器的问题在这里就不细说了。另外在某些iphone5和5S在safari下,如果当前页面的后面有全屏的视频,即使不显示,位置也不在视窗内。点击页面时会出现“点透”的BUG,页面上的任何触屏事件都捕获不到,就是触屏事件全被看不到的video抢去(感谢sonic帮忙定位bug)解决方法就在video隐藏的时候设置 width:1px; height:1px; 等到播放的时候再设置成全屏的宽高。


作者:LAVA、Nic

420

    文章信息

    Hello PM 意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功