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

吳亦凡,吳亦凡個人資料

邱小夏2019-11-23 16:21:31 人圍觀
簡介吳亦凡在追娜扎創意總是一個命題作文。在項目的早期階段,團隊了解到: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/14106.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • win10精簡版怎么升級專業版,win10升級專業版要錢嗎

    win10精簡版怎么升級專業版,win10升級專業版要錢嗎 相關圖片win10家庭版添加gpedit在安裝win10的過程中,很多用戶選擇了個人版和旗艦版。但是,有些用戶需要安裝win10 professional版本。如果他們是win10系統,他們需要升級專dell家庭版升級專業版...

  • 網頁排版,網頁排版模板

    網頁排版,網頁排版模板 相關圖片網頁排版設計軟件為了讓您了解CSS的作用,以及為什么要使用CSS而不是HTML表來進行web頁面布局,下面是一個向您解釋的示例。其中一個頁面用HTML格式化,另一個用CSS格式網頁顯示排版不...

  • 派派怎么用,派派有啥用

    派派怎么用,派派有啥用 相關圖片派派是做什么用的黃金失手是送寶游戲中的道具。只要你有足夠多的金幣,你就可以把它們換成獎品。那么如何利用派系的黃金魅力呢?派系的黃金魅力有什么用?接下來,超人軟件編...

  • css樣式表,css樣式表能實現的是

    css樣式表,css樣式表能實現的是 相關圖片什么是css為什么序言有這篇文章?很容易談論的是,很容易將CSS代碼的內容復制到剪貼板。還有什么,蘇艾?我一直認為你一定比我聰明得多。但是當我在微信上瀏覽一個頁面時,修改...

  • 抖音新人上熱門技巧,抖音6元1000粉絲

    抖音新人上熱門技巧,抖音6元1000粉絲 相關圖片抖音怎樣將同城改為關注最近,很多小伙伴都說自己在玩顫音,但是怎么拍也不能流行。那么,自助餐怎么受歡迎呢?現在,超人軟件編輯將為您介紹自助餐版iPhone的相關內容,希望您...

  • 鄉村小神醫全文免費閱讀,鄉村小神醫吳能免費版

    鄉村小神醫全文免費閱讀,鄉村小神醫吳能免費版 相關圖片下載手機閱讀《鄉村醫生》是作者繆武創作的一部奇幻小說。它講述了一個在山谷里的窮孩子的故事,他得到了長壽的神秘公式,并做了很多桃花下載:http://a.crxz鄉村小神醫林小天...

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

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

  • 變形計里有個叫麗姐,關于麗姐的變形計

    變形計里有個叫麗姐,關于麗姐的變形計 相關圖片麗姐變形計主人公李潔是女主人公在農村的妹妹的外號。在社會的幫助下,李潔冷酷無情的形象引起了很多人的關注。接下來,超人軟件編輯為您帶來變形的吉利妹妹表情包大全,有需...

  • 網頁編程代碼,excel宏代碼編寫教程

    網頁編程代碼,excel宏代碼編寫教程 相關圖片編程入門基礎教程一。啟動Dreamweaver cs52。單擊左上角的“文件”“新建”。三。在“新建文檔”界面中選擇一個空白頁。四。選擇“HTML”作為“頁面類型”,選擇“無”HTML教程...

  • 是卡,視視

    是卡,視視 相關圖片酷視卡套餐能不能升級近日,不少網友表示看到有人買月亮。如果你想賺錢,你可以先把你的帳戶升級到月球,然后再賣掉它。那么,如何升級呢?接下來,超人軟件編輯將為您介紹大...

熱評文章

  • win10 任務欄透明,win10任務欄不能透明

    win10 任務欄透明,win10任務欄不能透明 相關圖片win10任務欄親愛的win10用戶,您厭倦了傳統的桌面位置嗎?win10系統的任務欄如何啟動透明效果?現在,超人軟件編輯器將為您介紹win10任務欄的透明設置方法,并抓緊時間win10任務欄透明...

  • html鼠標懸停,html鼠標懸停顯示圖片

    html鼠標懸停,html鼠標懸停顯示圖片 相關圖片html鼠標懸停事件代碼如下:a href=?title=這里是顯示的文本hello/a將鼠標懸停在hello上時,這里將有文本顯示的文本。html鼠標懸停事件hover...

  • 領取高溫補貼條件,高溫補貼怎么發放

    領取高溫補貼條件,高溫補貼怎么發放 相關圖片高溫補貼發放時間炎炎烈日下,美甲官方發起了一項針對用戶和朋友的高溫補貼活動。用戶領取高溫補貼后可退出。我怎樣才能拿到指甲的高溫補貼?指甲高溫補貼怎么退?現在,超人...

  • 背景設定,kenshi背景設定

    背景設定,kenshi背景設定 相關圖片人物背景一。一般來說,flash動畫的背景色只能從216種網頁安全色中選擇。如果要使用網頁的安全色以外的顏色作為動畫的背景色,可以使用以下方法:1。在動畫中畫一個矩形(如何修...

  • 2019小咖秀怎么刪除作品,小咖秀2700部合集

    2019小咖秀怎么刪除作品,小咖秀2700部合集 相關圖片小咖秀怎么找以前作品小嘎秀是一款非常有趣的短片拍攝軟件。很多小朋友喜歡用它來拍攝搞笑視頻,但他們不知道如何刪除小嘎秀的作品。現在,超人軟件小編想介紹一下如何玩Andr...

  • win10邁克菲怎么關閉,邁克菲卸載后影響

    win10邁克菲怎么關閉,邁克菲卸載后影響 相關圖片window10怎么卸載邁克菲最近,許多小型合作伙伴報告說,他們的win10 McAfee無法卸載。那么什么不能卸載win10 McAfee?接下來,超人軟件編輯器將介紹如何卸載win10 邁克菲如何卸載干凈...

  • 用即時貼做得邊框,怎么用藤蔓做邊框

    用即時貼做得邊框,怎么用藤蔓做邊框 相關圖片如何用ps做一個邊框你自己試試吧。你也可以嘗試其他效果1。導入圖片,添加蒙版2。畫一個橢圓路徑,邊羽化20 3。剪切到遮罩的橢圓路徑(剪切橢圓Ctrl X,選擇遮罩Ctrl V p用ps做邊框...

  • 月輪加速器,月輪加速器怎么樣

    月輪加速器,月輪加速器怎么樣 相關圖片好用的加速器月輪加速器是一款實用的網絡游戲加速器。即使是國外的網絡游戲也能起到很好的加速和減少游戲延遲的作用。然而,我的一些朋友發現,他們下載后無法正常使用月球車...

  • 如何制作響應式網站,響應式網站的制作

    如何制作響應式網站,響應式網站的制作 相關圖片一個簡單的響應式網頁我寫了一篇關于使用響應式設計創建移動導航欄的教程。現在我找到了一種不用JavaScript實現響應菜單的新方法。它完全使用整潔的語義HTML5標記,菜單可以左對可...

  • 月輪加速器,月輪加速器怎么樣

    月輪加速器,月輪加速器怎么樣 相關圖片好用的加速器一些用戶會提示不能使用加速服務,因為在使用月球加速器期間沒有安裝虛擬網卡。虛擬網卡是用軟件模擬網絡環境。在這個虛擬局域網中,可以執行所有的物理局域網操...

關注微信

变脸官网查询