這是該系列文章的第2篇，我們仍然會選擇三個互動營銷案例，從技術角度加以分析。這個系列并非為程序員而寫，因為這些內容就是我們的日常工作。我們的目標是讓更多的朋友能夠了解技術可以實現的效果，以及更重要的——不能實現的效果。

技術不是互動營銷的全部，但技術可以讓互動營銷更加精彩。

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

該項目是民生銀行與敦煌壁畫合作推出的定制卡面信用卡推廣，利用敦煌這一傳統文化符號來為信用卡產品增加新的賣點。

近幾年，隨著故宮文創的火熱，許多傳統的文化符號被不斷挖掘出來，并用于推廣各種競爭激烈的產品，敦煌作為佛教的重要標志，自然能夠在其中發揮重要的作用。說實話，我個人看過之后被轉化了……

該項目使用了全手繪風格的視頻，將敦煌壁畫的特色進行了較為完整的展示。視頻之后是敦煌系列信用卡的介紹，這里使用了知名的 swiper 控件來實現不同卡片的橫向切換。

每張卡片都有指向辦卡頁面的按鈕，方便用戶快速進入轉化環節。

從引用資源方式來看，該項目在開發過程中使用了 Vue 框架（關于什么是框架，我們之后會為大家介紹），這是一款優秀的 JavaScript 框架。該框架為H5的開發提供了眾多優秀的特性加成，例如按需加載/延遲加載等加載策略的方便調整，更加重視頁面邏輯的實現等等。

該頁面中使用了視頻和大量的圖片（設計風格要求），導致文件數量和尺寸都會相對較大，因此加載策略就變得非常重要。通過對文件的壓縮和加載策略的調整，可以保證用戶有更為流暢的瀏覽體驗。

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

該項目主要為推廣滴滴打車的代叫功能，與以往走溫情路線的方式不同，這支H5選擇了丈母娘和女婿這種看似有些“矛盾”的關系，并使用豐富的動畫和戲劇化的情節來表現其中的沖突，最后引出需要推廣的產品功能。

從技術角度講，該項目的互動方式非常值得參考。整個頁面分為幾個相對獨立的場景，每個場景的交互方式基本類似，通過橫軸按鈕的左右拖動來播放不同的動畫。

在用戶按鈕拖動過程中，通過程序實時監測按鈕所在的位置，并對上方左右分屏的動畫做放大和縮小的處理。判斷動畫是否開始播放的邏輯點是按鈕位置（最左或最右）和手指抬起的動作，這種交互方式交互非常自然。

但是在實際開發中，還需要考慮到一些特殊情況的處理，例如動畫播放未完成時，用戶拖動按鈕看另一段動畫，之前正在播放的動畫狀態需要重置到播放的起始點等等。

這些細節都是在開發過程中需要格外注意的。從頁面代碼中可以看出，動畫的實現是通過分幀圖片的方式，順序播放完成后，最后幾幀不斷循環。

我們從外部無法判斷采取這種方式的目的，但是可以確認的是，這種方式將導致頁面的資源量非常大。總計三個主場景加兩個小場景，每個主場景兩個動畫，每個動畫大概幾十張圖片，算上背景音樂等，需要加載的文件數量過百。

而從加載時間軸中也可以看出，大量的文件加載，導致前期loading的時間較長，這將很可能導致頁面跳出率偏高。

9秒的loading時間并非不可接受，但如果能夠做一些更加有趣的小動畫，可能用戶會更愿意等待。此外，如果把這些動畫換成視頻（或者是gif），都可以極大減少資源加載量，讓頁面的瀏覽更加順暢一些。

當然，不同的資源文件格式，其控制方法和邏輯都需要做出相應的改變。

3. 網易考拉：輕松瘦

該項目是網易考拉瘦身產品專場的推廣，關注“瘦身”這個永恒的話題。整個頁面的核心就是一段視頻，但是在視頻的播放和交互方式上非常新穎。

從頁面代碼和資源文件中可以看出，這是兩段視頻的合并，其內容有所不同，但完全同步播放。視頻的上半部分是疲憊瘦身模式，下半部分則是輕松瘦身模式。

頁面通過CSS控制視頻的寬度為手機屏幕寬度的兩倍，播放時用戶只能看到一半的視頻內容，另一半則隱藏在屏幕之外，而這也恰恰是這種交互方式的核心。如果不加操作，用戶看到的是上半部分的疲憊瘦身模式內容。

用戶長按屏幕時，將會觸發視頻位置的調整，視頻整體上移50%，用戶就看到了下半部分輕松瘦身模式的內容，上半部分內容則跳出了屏幕之外。

對于視頻切換的控制方法很多，如兩段視頻一段播放、另一段播放但隱藏，通過程序切換；或者兩段視頻在不同的層級，一段播放時會蓋住另一段，程序通過改變視頻層級來切換遮擋關系等等。

在選擇控制方法時，要考慮程序的執行效率問題。如果視頻過大（或者手機過舊），程序執行效率偏低，在進行視頻切換時就很可能出現不太流暢的情況，或因為加載問題導致視頻播放不同步等。

該案例使用視頻位置的切換方式，能夠最大程度地保證視頻內容的流暢切換，而兩段視頻合并成一段，也解決了同步播放的問題。

不能說這種方式一定好，但在該案例中，這種切換方式應該是最合適的。在其他的項目中，還應該根據實際項目的需求，和資源文件的制作難度來區別對待。

這一期的三個案例，我們刻意選擇了使用視頻、動畫并包含豐富交互功能的頁面，希望能為大家帶來一些啟發。

---

眾創科技是一家專注于創意實現的互動營銷技術供應商，我們為您提供最全面的互動技術服務，更為您提供面向業務的技術方案選擇和排雷服務。如需了解我們的服務內容，請訪問我們的官網www.masscrunch.com

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的qq互动视频页面加载失败_互动案例技术分析（2）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。