DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 交互式視頻設計分析:交互式視頻工具和案例
交互式視頻設計分析:交互式視頻工具和案例
編輯:關於網頁技巧     

最近紅辣椒樂隊( The Red Hot Chili Peppers )推出了新單曲 Look Around ,讓作為交互設計師的我愛上加愛的是他們給這支單曲制作了交互版的 MV !這個交互式視頻在演藝界和科技界都引起了不小反響,相信未來有更多的藝人會采用互動視頻的方法來提升歌迷的參與度!

觀看地址: http://redhotchilipeppers.com/videos/47-look-around-interactive

拖動鼠標,可以選擇觀看 4 個樂隊成員在不同場景裡的表演,通過點擊房間裡的家具,還能觀看樂隊成員拍攝 MV 時的現場照片。據說有歌迷為了看到 4 個人的完整表演和所有圖集,前後看了 6 遍……

其實,交互式視頻概念的出現已經有些年頭了,但是交互的方式各不相同。不斷創新的交互體驗完美迎合了大眾對新鮮感的貪婪追求,對於這樣一個活力四射的交互媒介,有必要對其研究一下。

1. 何為交互式視頻?

交互式視頻,是指通過各種技術手段,將交互體驗融入到線性的視頻的新型視頻。它的風靡起源於 2005 年,隨著當時寬帶接入速度的提升和多媒體播放技術的成熟(主要是 flash ),交互式視頻越來越多。最初主要是由廣告商贊助的廣告視頻,借用各種新奇的交互方式來吸引人們點擊觀看,增加產品的曝光度,可以認為是病毒營銷一種。發展到如今,已經誕生了各種專門設計制作交互式視頻的公司,甚至個人也可以很方便的在 YouTube 上制作交互式視頻。

2. 交互式視頻的種類

交互式視頻可以大致分為 3 類:

第一類:可定制式

這一類的互動視頻(指交互式視頻,下同)允許用戶在觀看時調整一些視頻的變量元素,但是視頻本身仍然是線性的,這使得每個人看到的視頻都一樣,又都不一樣。開頭所提到的 Look Around 交互版 MV 就是這一類的代表(音樂視頻不會隨著用戶點擊而改變段落,它一直播放著,只是每個人看到的房間不同)。最基礎的體驗是在視頻觀看時,鼠標移到某物件上能顯示該物件信息的 tag ,這招最常見的就是被用作服裝導購。

第二類:會話式

指用戶可以類似會話的方式直接參與改變視頻的順序甚至結果,視頻可以不再是線性的了,視頻的設計者准備好多個結局和段落,讓觀看者自行選擇。舉個例子,假設 Windows 是一段視頻,那它就是會話式的,我們與 Windows 的交互都是通過會話窗口進行的。

第三類:探索式

顧名思義,探索式的互動視頻一般只提供很少提示(甚至不提示),讓用戶在視頻中自行摸索可交互的點和交互方式。這類視頻一般會采用現實生活中的場景(讓人更容易產生代入感),在用戶操作前,會一直循環播放場景,直到用戶發現了交互點,才會繼續。

3. 交互式視頻的實現工具與案例

工具 1 : YouTube

YouTube 上已經誕生了不少商業的與非商業的交互式視頻,基本都屬於會話式交互。得益於 YouTube 強大的在線視頻編輯功能,設計者可以在視頻中加入帶有超鏈接的注釋,在視頻的播放過程中,先根據劇情內容設計好注釋出現的時間,再在觀看者選擇時鏈接到相應的視頻,就大功告成了,非常簡單,效果可以很贊。

(關於注釋的操作: http://www.youtube.com/t/annotations_about

一個利用注釋制作交互式視屏的案例:http://www.youtube.com/watch?v=m3MT59zc6Ms ,實則是心理咨詢中心的廣告

工具 2 : Flash

Flash 相信大家都很熟悉, Flash 視頻嵌入技術據說在 HTML5 淫威下已經日漸沒落了,但是所謂"瘦死的駱駝比馬大", Flash 在交互式視頻方面幾乎占據了 100% 的市場份額,這歸功於它極強的拓展性,多平台的兼容性,制作的簡易和靈活性。( YouTube 的視頻編輯器使用的也是 FLash技術 )

這裡向大家推薦的是宅男(目測)設計師 Olivier Otten 設計的多達 22 個 Flash 交互式視頻片段。全部都是探索性互動視頻,很有樂趣。也許糅合其中幾個點子,就能制作出一段完整的交互式視頻了。

http://www.selfcontrolfreak.com/

工具 3 : Creative coding

軟件工程師可以拯救世界,這句話不是隨便說說的。萬能的 Coding 能實現各種令人意想不到的互動效果。最近工程師 PetrosVrellis 用 openFrameworks (一種開源的 C++Toolkit )實現了一段互動版的梵高名作《星空》( Starry Night ),效果很震驚,令我五體投地。視頻中的演示是在觸摸屏幕上運行的,很期待最終能它能以 App 的形式出現供大家欣賞把玩。

觀賞地址: http://v.youku.com/v_show/id_XMzUxMzcxMDc2.html

關於這段技術的實現, Petros介紹到 : "我開發了一個能生成"流動"效果的算法,約有 8 萬個點能隨之運動速度場不是由電腦自動生成的,我不得不手動設置,要做到恰到好處非常困難…我在 1920 × 1080 的分辨率下獲得了每秒 30 幀的畫面,用的是 intel i5-2500K 的 CPU 以及 geforce GTX560 的顯卡多點觸控跟蹤借助了 ofxKinect 和 ofxOpenCV 背景音樂花了很多心血,也有不少的運氣成分" (翻譯 by36 氪)

工具 4 :混合式

混合式也就是將以上所有提到的方法和類型自由組合進行創作的方法了,這常常能獲得 1+1>2 的效果。

YouTube 上非常有名的一段廣告"獵人與熊"( A hunter ___a bear )就是采用了定制式結合會話式, YouTube 注釋再加 Flash 動畫的手法。

http://www.youtube.com/watch?v=4ba1BqJ4S2M

還有更高科技的, 360 °全景體驗式互動視頻,類似視頻版的街景地圖,讓人有種掉進了鄧布利多的冥想盆的感覺,有木有?

體驗地址:http://im360.immersivemedia.com/watch/im360/

該網站還制作了 iOS 版應用,下載體驗地址: http://itunes.apple.com/us/app/nimmo-bay-360/id476439088?mt=8

4 .交互式視頻的錢前景

正如文章開頭所說,最早的交互式視頻來自廣告創意,所以商業市場上的應用前景自然是大大的看好。事實證明用戶很買這類互動體驗的賬,投資方經常能做到小成本大產出,相比傳統媒體,它更容易將觀眾轉化成你的顧客。

在美國,已經興起了一批專業制作交互式視頻的公司,在這裡提供給大家學習參考,他們的客戶中不乏知名電視台,全球五百強和頂級奢侈品公司。

http://www.videoclix.tv

http://www.clikthrough.com/

http://www.wirewax.com/

由於各種眾所周知的原因,國內在線視頻行業尚未達到如此發達的地步。但是以互聯網發展的經驗來看,中國市場對交互式視頻制作的需求將會逐步提升,期待各界的創意工作者、設計師、工程師們的發力。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved