您現在的位置是:電腦技術吧?>? 組裝維修 ??>??吳亦凡,吳亦凡個人資料??>??正文詳情

吳亦凡,吳亦凡個人資料

首婉柔2019-12-02 11:22:15 人圍觀
簡介吳亦凡在追娜扎創意總是一個命題作文。在項目的早期階段,團隊了解到:1。吳一凡簽署的全國攻勢將是一場立體完整的戰役,品牌團隊希望tgidas能通過在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 登場了。

文檔解釋是:當播放位置改變時(比如當用戶快進到媒介中一個不同的位置時)運行的腳本。

  邏輯就是只要有視頻播放的時候,這個事件就會不斷地被觸發。

當有了播放時間(currentTime0)了,就說明已經播放過了,然后暫停它。

等著再次被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; 等到播放的時候再設置成全屏的寬高。

版權聲明:本文由 首婉柔 整理編輯。

原標題:吳亦凡發福,吳亦凡趙麗穎

轉載注明出處:http://www.dn9ww09s.icu/assemble/14980.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 什么是數據庫索引,數據庫索引怎么用

    什么是數據庫索引,數據庫索引怎么用 相關圖片SQL數據庫介紹了indexeddb是一個HTML5 web數據庫,它允許html5web應用程序在用戶瀏覽器中存儲數據。Indexeddb非常強大,對應用程序非常有用。它數據庫...

  • 小王子粘土,輕粘土小王子教程

    小王子粘土,輕粘土小王子教程 相關圖片超輕粘土小王子教程視頻你好,我是Erwa,騰訊tgidas的動畫師。我很榮幸能參加與小王子電影聯合推出的游戲版《小王子的愛情消除》的H5世界觀推廣活動。同時,我們還制作了另一個版...

  • 中外廣告差別,什么是好廣告

    中外廣告差別,什么是好廣告 相關圖片哪個國家的廣告好在網絡傳播領域,我一直在探索與用戶更好的溝通和信息傳遞!在解釋H5廣告與傳統廣告的區別時,筆者試圖用一幅圖片來概括一種內容,讓看護者更簡單地理解其內涵...

  • 案例精選,成功策劃案例精選

    案例精選,成功策劃案例精選 相關圖片商業策劃案例精選這項審查于7月初完成。一方面,我的“廣告愛看!“騰訊十大最佳HTML5廣告”出人意料地在業內大受歡迎。另一方面,有傳聞稱,公眾評論HTML5的代理公司不再制作H保...

  • 三角箭頭,三角箭頭圖標

    三角箭頭,三角箭頭圖標 相關圖片三箭頭使用CSS制作不帶圖片和箭頭的div box(此代碼更適合追求純代碼的人)這種效果也可以用圖片背景實現,代碼將更加簡潔CSS代碼:CSS代碼將內容復制到剪貼板d箭頭...

  • 全方位了解,全方位

    全方位了解,全方位 相關圖片如何全方位了解公司這是一個adobe建議:CSS區域,它提供了一種在多個不同元素中排列內容的方法。首先,需要為內容容器的flow屬性聲明一個唯一的字符值,然后使用from()函數全方面...

  • qt安裝教程及配置,plsql安裝教程及配置

    qt安裝教程及配置,plsql安裝教程及配置 相關圖片tomcat9的安裝與配置Cobbler是一種快速網絡安裝的Linux服務,經過調整還可以支持windows的網絡安裝。這個工具是用Python開發的,它小巧輕便(只有15K行Pythotomcat的安裝與配置...

  • 響應式的,什么是響應式

    響應式的,什么是響應式 相關圖片網頁響應式在整個網站的發展過程中,圖片的管理難度很大。請注意,圖片應在各種設備上平滑顯示。他們會遇到的問題是:適當優化和縮小圖片尺寸,注意不要浪費帶寬(網站加載速...

  • Java編程,g代碼編程詳解

    Java編程,g代碼編程詳解 相關圖片宏程序編程一百例隨著CSS的發展,CSS具有語義命名約定和CSS層的分離,這將有助于CSS的可擴展性、性能改進和代碼管理。在我之前的文章中討論過的許多CSS問題可以通過使用適當編程初...

  • 百分比是單位嗎,百分比怎么算

    百分比是單位嗎,百分比怎么算 相關圖片計算百分比視區單位視區單位是相對單位,這意味著它們沒有客觀尺寸。它們的大小由視區的大小決定。這里有四個與視區相關的單位。我會把重點放在前兩個單元上,因為它們更有可...

熱評文章

  • 七夕秀恩愛,七夕怎么樣秀恩愛

    七夕秀恩愛,七夕怎么樣秀恩愛 相關圖片情人節秀恩愛的說說七夕節的愛情也取決于時間。不能早也不能晚。因為愛的表露遲早會有報應的,所以我們選擇了周五中午,這也可以讓牛郎和織女的鵲橋更加堅固耐用。接下來,讓...

  • 平面設計怎么提升自己,平面設計提升方法

    平面設計怎么提升自己,平面設計提升方法 相關圖片平面設計提升培訓機構現在H5廣告非常流行,平面設計師必須想辦法提高自己。今天,我想總結一些平面設計自我完善的經驗。設計行業變化很快。它可以分為三個部分:內容、表演技巧...

  • 平面設計師,什么叫平面設計師

    平面設計師,什么叫平面設計師 相關圖片平面設計師職責隨著HTML5的普及,平面設計師該怎么做?今天,epub360從設計內容、表現技巧和理念三個方面,來談談平面設計師如何在這股浪潮中成功站穩腳跟。文章附有大量的實平面...

  • ol標簽,ol標簽怎么設置

    ol標簽,ol標簽怎么設置 相關圖片ol值定義和使用ol標記定義一個序列表。HTML 4.01和HTML 5的區別在html4.01中,不支持start屬性,html5中允許這樣做。在HTML4.01中ol標簽可以居中嗎...

  • 秦淮八絕,秦淮八艷

    秦淮八絕,秦淮八艷 相關圖片熱愛祖國的古詩八句一。選擇!生活微信電影宣傳推送廣告(上線時間:2014年11月)。坦白地說,我第一次沒有看到這個廣告,但我是通過搜索找到的。與2014年大量簡單互動的初級H5廣...

  • html5空格,html多個空格

    html5空格,html多個空格 相關圖片空格html代碼為遇到這樣的朋友,在編譯HTML代碼時,兩個字之間有空格,他沒有在兩個字之間加空格,就沒有代碼。在這種情況下,很難找出問題時,HTML編碼沒有使用太多或熟練。查看...

  • 生存曲線繪制,roc曲線怎么繪制

    生存曲線繪制,roc曲線怎么繪制 相關圖片奈奎斯特曲線繪制步驟帆布二維曲線法是近年來研究的一種三維柔體計算方法,在一定程度上填補了一些知識。它往往涉及到數值分析的某些方面,主要是曲線的各種插值算法。我突然...

  • 平面設計師,什么叫平面設計師

    平面設計師,什么叫平面設計師 相關圖片平面設計師職責如上所述,由于互聯網行業的介入,零售、金融、房地產、汽車、通信、旅游等眾多行業作為各行業中下游的一個崗位,其一貫規律發生了變化,無論是受客戶老板的強...

  • 情懷時代,不同的時代不同的情懷

    情懷時代,不同的時代不同的情懷 相關圖片有一種情懷叫一。微信電影宣傳上線時間及“選擇!生活”:2014年11月,坦白說,我第一次沒有看到這個廣告,但我是通過搜索找到的。與2014年大量簡單互動的初級H5廣告相比,新時代...

  • 真實案例,典型案例

    真實案例,典型案例 相關圖片每日一案例在國內HTML5發展勢頭強勁之際,國外同行也不甘示弱。在今天選定的5個HTML5案例中,甲方是一家優秀的公司,寶馬、阿迪達斯、寶潔等,作品質量無與倫比。如果有差案例網...

關注微信

变脸官网查询