H5里的“小心机”之全屏视频

小派今天就带大家扒一扒H5里的“小心机”——全屏视频!

在审美上大家应都有喜新厌旧的心理,那么在H5的创意执行层面,如果用一些“小心机”,比如遮罩、全屏视频、SVG动画、Cinemagraphic(会动的照片)这些新的,或者稍微高端点的表现形式,能分分钟提升作品逼格哦!

 

下面,小派就带大家扒一扒H5里的“小心机”——全屏视频!

 

1/5 GENTLE MONSTER

设计机构:只做设计

 

 

微信扫描二维码,立即感受

 

据“只做设计”的唐仲龙说:“这个项目是与韩国客户对接的,开始时候,客户只需要多个页面进行切换,难道是因为H5在韩国还不够火爆?本着复杂的设计简单做,简单的需求复杂做的原则,我们又开始挑战Epub360了。利用序列帧实现全屏连续播放,使整个画面瞬间活起来了。”

 

亮点技能:序列帧、预加载

 

2/5 全景视频Demo

设计师:害羞男孩

 

微信扫描二维码,立即感受

(安卓机可能无法体验)

 

这应该是Epub360平台上首个公开的全景视频作品,运用嵌入网页的方式将全景视频插入H5中,通过手指的滑动即可360度观看场景,很赞的说。不知派友们是否玩过前段时间很火的H5-《小爷吴亦凡,凡心所向》?其也运用了全景视频。

 

全景视频的拍摄制作成本较高,不过如果创意需要,预算不缺,也不妨试试。

 

亮点技能:嵌入网页

 

3/5 年味儿

设计师:Mr.u

 

微信扫描二维码,立即感受

 

 

打开作品,一盘饺子映入眼帘。再次操作时,却发现饺子冒热气了,饺子像是从屏幕里端出来似的,定睛细看,原来此处用了全屏视频。

 

除了开场前的全景视频,后面的图片与视频也组合的很好,墙裂建议大家前往“品味”!

 

亮点技能:视频组件,预加载

 

4/5 听,西安

设计师:Mr.u

 

微信扫描二维码,立即感受

 

我来到 你的城市 走过你来时的路 想像着没我的日子你是怎样的孤独 ……长按聆听并伴随着画面的逐渐清晰,你是否想起了曾经的那个他/她呢?


作品使用了Epub360在触发器里新增的“长按触发”功能,操作便捷,相信大家能分分钟上手!Mr.u的个人作品基本上全部能免费复制,体验完作品,赶快前往Epub360官网桌面端去复制学习吧!
亮点技能:长按播放
教程:案例解析-听,西安

 

5/5 雍福苑一个萌妹子的来电!

设计师:533陛下

 

微信扫描二维码,立即感受

 

该作品采用萌妹子打错视频电话这么一个梗,然后通过与用户的互动引发一系列的剧情。用幻灯片来模拟全屏视频通话、电梯邂逅等生活场景,很有真实感的说,小派已成功约到萌妹子,该你们啦!

 

亮点技能:幻灯片预加载

 

扒完上面H5里的“小心机”——全屏视频后,有没有觉得“她”的厉害呢?期待大家的“心机作”。在今后合适的时机,小派也会扒一扒H5里其它“小心机”,敬请期待~

 


关注更多H5设计、案例、资讯

 

10