qq互动视频页面加载失败_互动案例技术分析（2）

这是该系列文章的第2篇，我们仍然会选择三个互动营销案例，从技术角度加以分析。这个系列并非为程序员而写，因为这些内容就是我们的日常工作。我们的目标是让更多的朋友能够了解技术可以实现的效果，以及更重要的——不能实现的效果。

技术不是互动营销的全部，但技术可以让互动营销更加精彩。

1. 民生信用卡 x 敦煌壁画

该项目是民生银行与敦煌壁画合作推出的定制卡面信用卡推广，利用敦煌这一传统文化符号来为信用卡产品增加新的卖点。

近几年，随着故宫文创的火热，许多传统的文化符号被不断挖掘出来，并用于推广各种竞争激烈的产品，敦煌作为佛教的重要标志，自然能够在其中发挥重要的作用。说实话，我个人看过之后被转化了……

该项目使用了全手绘风格的视频，将敦煌壁画的特色进行了较为完整的展示。视频之后是敦煌系列信用卡的介绍，这里使用了知名的 swiper 控件来实现不同卡片的横向切换。

每张卡片都有指向办卡页面的按钮，方便用户快速进入转化环节。

从引用资源方式来看，该项目在开发过程中使用了 Vue 框架（关于什么是框架，我们之后会为大家介绍），这是一款优秀的 JavaScript 框架。该框架为H5的开发提供了众多优秀的特性加成，例如按需加载/延迟加载等加载策略的方便调整，更加重视页面逻辑的实现等等。

该页面中使用了视频和大量的图片（设计风格要求），导致文件数量和尺寸都会相对较大，因此加载策略就变得非常重要。通过对文件的压缩和加载策略的调整，可以保证用户有更为流畅的浏览体验。

2. 滴滴打车H5：丈母娘的账，你敢算么？

该项目主要为推广滴滴打车的代叫功能，与以往走温情路线的方式不同，这支H5选择了丈母娘和女婿这种看似有些“矛盾”的关系，并使用丰富的动画和戏剧化的情节来表现其中的冲突，最后引出需要推广的产品功能。

从技术角度讲，该项目的互动方式非常值得参考。

整个页面分为几个相对独立的场景，每个场景的交互方式基本类似，通过横轴按钮的左右拖动来播放不同的动画。

在用户按钮拖动过程中，通过程序实时监测按钮所在的位置，并对上方左右分屏的动画做放大和缩小的处理。判断动画是否开始播放的逻辑点是按钮位置（最左或最右）和手指抬起的动作，这种交互方式交互非常自然。

但是在实际开发中，还需要考虑到一些特殊情况的处理，例如动画播放未完成时，用户拖动按钮看另一段动画，之前正在播放的动画状态需要重置到播放的起始点等等。这些细节都是在开发过程中需要格外注意的。

从页面代码中可以看出，动画的实现是通过分帧图片的方式，顺序播放完成后，最后几帧不断循环。

我们从外部无法判断采取这种方式的目的，但是可以确认的是，这种方式将导致页面的资源量非常大。总计三个主场景加两个小场景，每个主场景两个动画，每个动画大概几十张图片，算上背景音乐等，需要加载的文件数量过百。

而从加载时间轴中也可以看出，大量的文件加载，导致前期loading的时间较长，这将很可能导致页面跳出率偏高。

9秒的loading时间并非不可接受，但如果能够做一些更加有趣的小动画，可能用户会更愿意等待。

此外，如果把这些动画换成视频（或者是gif），都可以极大减少资源加载量，让页面的浏览更加顺畅一些。当然，不同的资源文件格式，其控制方法和逻辑都需要做出相应的改变。

3. 网易考拉：轻松瘦

网易考拉“轻松瘦”H5：《火锅精的A4腰秘密》

该项目是网易考拉瘦身产品专场的推广，关注“瘦身”这个永恒的话题。

整个页面的核心就是一段视频，但是在视频的播放和交互方式上非常新颖。

从页面代码和资源文件中可以看出，这是两段视频的合并，其内容有所不同，但完全同步播放。视频的上半部分是疲惫瘦身模式，下半部分则是轻松瘦身模式。

页面通过CSS控制视频的宽度为手机屏幕宽度的两倍，播放时用户只能看到一半的视频内容，另一半则隐藏在屏幕之外，而这也恰恰是这种交互方式的核心。

如果不加操作，用户看到的是上半部分的疲惫瘦身模式内容。用户长按屏幕时，将会触发视频位置的调整，视频整体上移50%，用户就看到了下半部分轻松瘦身模式的内容，上半部分内容则跳出了屏幕之外。

对于视频切换的控制方法很多，如两段视频一段播放、另一段播放但隐藏，通过程序切换；或者两段视频在不同的层级，一段播放时会盖住另一段，程序通过改变视频层级来切换遮挡关系等等。

在选择控制方法时，要考虑程序的执行效率问题。如果视频过大（或者手机过旧），程序执行效率偏低，在进行视频切换时就很可能出现不太流畅的情况，或因为加载问题导致视频播放不同步等。

该案例使用视频位置的切换方式，能够最大程度地保证视频内容的流畅切换，而两段视频合并成一段，也解决了同步播放的问题。

不能说这种方式一定好，但在该案例中，这种切换方式应该是最合适的。在其他的项目中，还应该根据实际项目的需求，和资源文件的制作难度来区别对待。

这一期的三个案例，我们刻意选择了使用视频、动画并包含丰富交互功能的页面，希望能为大家带来一些启发。

众创科技​www.masscrunch.com

众创科技是一家专注于创意实现的互动营销技术供应商，我们为您提供最全面的互动技术服务，更为您提供面向业务的技术方案选择和排雷服务。