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

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

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

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

4348ef276086b44eabade10f4a0c9e87.png

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

c0b2575741fb228641c6c96efcee6624.png

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

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

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

8bc8876236a76ab2cde397ee709033ad.png

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

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

2. 滴滴打车H5:丈母娘的账,你敢算么?

4ae7cd315338274d1ddf056babbb6162.png

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

e4fa680f83d2b71640522ae3cbc77334.png

从技术角度讲,该项目的互动方式非常值得参考。整个页面分为几个相对独立的场景,每个场景的交互方式基本类似,通过横轴按钮的左右拖动来播放不同的动画

43b7c121fa5104b682c40fb4fbb8d1e5.gif

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

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

这些细节都是在开发过程中需要格外注意的。从页面代码中可以看出,动画的实现是通过分帧图片的方式,顺序播放完成后,最后几帧不断循环。

c3d746cd504ed9e2937952931c1734e4.png

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

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

475f4484cc3a842c584bb6a212673f02.png

9秒的loading时间并非不可接受,但如果能够做一些更加有趣的小动画,可能用户会更愿意等待。此外,如果把这些动画换成视频(或者是gif),都可以极大减少资源加载量,让页面的浏览更加顺畅一些。

当然,不同的资源文件格式,其控制方法和逻辑都需要做出相应的改变

3. 网易考拉:轻松瘦

1b44bce9e83a7144e09d355101b8ff91.png

该项目是网易考拉瘦身产品专场的推广,关注“瘦身”这个永恒的话题。整个页面的核心就是一段视频,但是在视频的播放和交互方式上非常新颖。

236daf9205a860c2952a0a65d68bcd95.png

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

d83d17d757f2af1a49f33509b8bd138d.png

页面通过CSS控制视频的宽度为手机屏幕宽度的两倍,播放时用户只能看到一半的视频内容,另一半则隐藏在屏幕之外,而这也恰恰是这种交互方式的核心。如果不加操作,用户看到的是上半部分的疲惫瘦身模式内容。

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

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

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

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

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

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


众创科技是一家专注于创意实现的互动营销技术供应商,我们为您提供最全面的互动技术服务,更为您提供面向业务的技术方案选择和排雷服务。如需了解我们的服务内容,请访问我们的官网www.masscrunch.com

03e1ebaf5b5534c2b7a7fcb110f538a0.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/519671.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安排!活动素材的亿级用户精准投放

1.背景 随着闲鱼用户快速增长,运营活动越来越趋于精细和个性化,运营会根据用户偏好为其投放合适的活动,如下图所示在闲鱼首页商品展示时,会在商品的列表中插入活动Banner,通过这些活动banner引导用户进入到相应活动会场…

mysql计算年增长率

数据库格式如下: SELECTt1.YEAR,t1.quantity / t2.quantity increase_rate FROMyear_sales t1INNER JOIN year_sales t2 ON t1.YEAR - 1 t2.YEAR结果如下

云+X案例展 | 传播类:九州云 SD-WAN 携手上海电信,助力政企客户网络重构 换新颜

本案例由九州云腾投递并参与评选,CSDN云计算独家全网首发;更多关于【云X 案例征集】的相关信息,点击了解详情丨挖掘展现更多优秀案例,为不同行业领域带来启迪,进而推动整个“云行业”的健康发展。随着网络技术快速发展…

刚刚,阿里开源 iOS 协程开发框架 coobjc!

刚刚,阿里巴巴正式对外开源了基于 Apache 2.0 协议的协程开发框架 coobjc,开发者们可以在 Github 上自主下载。 coobjc是为iOS平台打造的开源协程开发框架,支持Objective-C和Swift,同时提供了cokit库为Foundation和UIKit中的部分A…

zookeeper 单机和集群搭建(windows环境+linux环境)

文章目录一、单机操作1. 下载2. 解压3. 修改配置文件4. 启动二、集群操作2.1. zoo.cfg添加集群配置2.2. 在3台zk数据目录下面创建myid文件2.3. 分别启动3台zk三、伪集群操作3.1. zk-01 配置3.2. 把zk-01复制2份3.3. zk-02配置3.4. zk-03配置3.5. 创建zk数据目录3.6. 在3个zk数据…

天线接收功率计算公式_对讲机天线到底有多重要?通信效果好不好全靠它了!...

天线是任何一个无线电通信系统都不可缺少的重要组成部分。各类无线电设备所要执行的任务虽然不同,但天线在设备中的作用却是基本相同的。任何无线电设备都是通过无线电波来传递信息,因此就必须有能辐射或接收电磁波的装置。所以,天线的第一个…

Java List集合转换相关操作

1、List转换为String字符串&#xff0c;并且指定分隔符 ArrayList<String> keyList new ArrayList<>();keyList.add("name");keyList.add("id");String keys StringUtils.join(keyList.toArray(), " , ");System.out.println(keys…

基于Blink构建亲听项目以及全链路debug项目实时响应能力

案例与解决方案汇总页&#xff1a;阿里云实时计算产品案例&解决方案汇总 本文全面总结了大数据项目组在亲听项目以及全链路debug项目上进行的实时流处理需求梳理&#xff0c;架构选型&#xff0c;以及达成效果 一、背景介绍 1.1亲听项目 亲听项目专注于帮助用户收集、展…

腾讯启动“SaaS技术联盟”联合行业制定互联互通标准

近日&#xff0c;腾讯宣布正式启动“SaaS技术联盟”&#xff0c;联合金蝶、用友、有赞、微盟、销售易、六度人和、道一、肯耐珂萨(KNX)等外部SaaS厂商&#xff0c;以及企业微信、腾讯会议、企点等腾讯内部SaaS产品共建技术中台&#xff1b;同时&#xff0c;工信部信软司相关领导…

WINDOWS 如何关闭3306端口

关闭windows中被占用的端口 1.查找到端口的PIDnetstat -aon|findstr "3306"TCP 0.0.0.0:3306 0.0.0.0:0 LISTENING 4736 打开任务管理器

mysql innodb索引原理

聚集索引&#xff08;clustered index&#xff09; innodb存储引擎表是索引组织表&#xff0c;表中数据按照主键顺序存放。其聚集索引就是按照每张表的主键顺序构造一颗B树&#xff0c;其叶子结点中存放的就是整张表的行记录数据&#xff0c;这些叶子节点成为数据页。 聚集索…

jsp文字上下居中显示_微信朋友圈又有骚技巧,一键设置居中签名,好友傻眼了...

今日推荐&#xff1a;微信朋友圈签名居中适用&#xff1a;安卓、苹果大家好我是小雷&#xff0c;又来给大家安利微信小技巧了&#xff0c;今天给大家分享如何让你的朋友圈签名居中显示。熟悉微信的朋友都知道&#xff0c;在微信设置了个性签名之后&#xff0c;往往会同步到朋友…

云+X案例展 | 传播类:k3s基于逾百台工控机的应用实践

本案例由Rancher投递并参与评选&#xff0c;CSDN云计算独家全网首发&#xff1b;更多关于【云X 案例征集】的相关信息&#xff0c;点击了解详情丨挖掘展现更多优秀案例&#xff0c;为不同行业领域带来启迪&#xff0c;进而推动整个“云行业”的健康发展。随着国家政策的导向&am…

从大山走出的阿里首席通信科学家,这次要重返课堂

阿里巴巴首席通信科学家谢崇进与学生们交流 “我是一位没上过大学的科学家”&#xff0c;谢崇进在公益课堂上说。讲台下&#xff0c;是450位将要面临高考的乡村学生。 不久前&#xff0c;阿里巴巴首席通信科学家谢崇进通过网络视频的方式开课&#xff0c;向广东省汕头市潮南区…

MySQL 8.0.26 图形化安装教程 (windows 64位)

文章目录mysq8 比mysql5.7快2倍mysql8官网&#xff1a; https://dev.mysql.com/downloads/windows/installer/8.0.html 双击安装mysql-installer-community-8.0.21.0.msi

8s存储最佳方案_MaxiDi, 意大利:自动化物流解决方案

Maxi Di是Selex商业集团的成员&#xff0c;该集团在意大利拥有2500多家门店&#xff0c;是意大利最大的零售商之一。 由于公司的快速发展&#xff0c;其中央仓的存储容量很快面临饱和&#xff0c;公司不得不租用多个外部仓库以满足供应链的需求。 这导致高昂的租金成本以及库存…

程序员如何让自己 Be Cloud Native - 配置篇

前言 这是《程序员如何让自己 Be Cloud Native》系列文章的第二篇&#xff0c;从第一篇的反馈来看&#xff0c;有些同学反馈十二要素太形式主义&#xff0c;不建议盲目跟从。作者认为任何理论和技术都需要有自己的观点&#xff0c;这些观点是建立在个体知识体系逐渐锻炼出来的…

云+X案例展 | 传播类:南方报业数据中台建设,助力“智媒”飞跃发展

本案例由百分点投递并参与评选&#xff0c;CSDN云计算独家全网首发&#xff1b;更多关于【云X 案例征集】的相关信息&#xff0c;点击了解详情丨挖掘展现更多优秀案例&#xff0c;为不同行业领域带来启迪&#xff0c;进而推动整个“云行业”的健康发展。南方报业传媒集团在半个…

读取扫码枪输入_为何超市“扫码枪”这么强?不输密码钱就没了,现在知道还不晚...

点上面蓝色字免费关注!随着互联网的产生&#xff0c;我们的生活也发生了很大的变化&#xff0c;不仅变得更加便利&#xff0c;生活也变得丰富多彩一些&#xff0c;而有了网络之后&#xff0c;移动支付也应运而生&#xff0c;我们的支付方式也发生了很大的改变。如今只要携带一部…

助力深度学习!阿里开源可插拔 GPU 共享调度工具

根据 Gartner 对全球 CIO 的调查结果显示&#xff0c;人工智能将成为 2019 年组织革命的颠覆性力量。对于人工智能来说&#xff0c;算力即正义&#xff0c;成本即能力&#xff0c;利用 Docker 和 Kubernetes 代表云原生技术为 AI 提供了一种新的工作模式&#xff0c;将 GPU 机器…