「The Wilderness Downtown」(筆者我自己的中譯:市中心的荒野)這是Google為了展現HTML5效果的網站，使用大量的HTML5來展現互動式效果，而且影片中加入大量的Google服務元素了喔!像是Google地圖中的街景與衛星影像。影片故事內容的主角是「自己」，只要你輸入你家的地址，就會自動展現一段影片，內容會有此地址的街景、衛星影像，並且以此為影片內容來播放。而且播放時還會有互動式內容，可以讓使用者融入影片之中，非常地有趣喔!
網站:The Wilderness Downtown(中譯:市中心的荒野)
玩樂心得
「The Wilderness Downtown」這是Google為了HTML5可以展現的多媒體效果而設計的網站，內容豐富而且精彩有趣，由知名導演-Chris Milk 與樂團Arcade Fire一起跟Google合作，打破傳統的瀏覽思維，真的非常有創意!但是同時也是考驗硬體與軟體，首先當然要有支援HTML5的瀏覽器，然後網站也提醒你要關閉不必要的程式與軟體，避免造成電腦執行變慢、甚至當機，不過在筆者我從工作管理員上來看，記憶體與CPU效能倒是沒有提高多少，所以只要有適合的瀏覽器，並且關閉不必要的程式，相信大家可以順利地體驗HTML5帶來的視覺效果!
注意!
瀏覽器必須支援HTML5，請點這裡觀看瀏覽器清單進行更新或是取得支援HTML5的瀏覽器。
執行時請關閉不必要的程式與軟體，避免電腦效能不足。
「The Wilderness Downtown」使用說明
1.
首先點這裡進入「The Wilderness Downtown」，輸入你想要讓影片抓取的街景與衛星影像的地址，筆者我以「台北市信義區市府路45號」作為範例，你可以猜看看這是哪裡，如果Google街景地圖或是衛星影片在此地址沒有資料的話，就會顯示「Your address doesn't contain enough Street-View and/or Google Maps data to 100% enjoy this experience.」，影片就無法顯示相關用到Google服務的效果喔!
2.
這時候「The Wilderness Downtown」就會開始準備影片所需要的街景與衛星影像。影片中的街景與衛星影片都是使用了Google的相關服務，像是Google地圖。
3.
如果「The Wilderness Downtown」準備好了話，就可以按下中間的PLAY FILM來播放影片。
「The Wilderness Downtown」內容預覽
播放時會開啟很多視窗，這是很正常，但是也是滿吃電腦資源的，所以前面才會建議你關閉不必要的程式與軟體，這裡筆者我以Google瀏覽器來執行「The Wilderness Downtown」。如果你想要控制影片的播放，在螢幕的左下角有控制影片的小視窗，在視窗中有控制播放與控制聲音的按鈕。注意!
播放時請勿用滑鼠點擊瀏覽器的視窗，否則會造成某些視窗無法顯示，這樣影片效果就不完整了。
「The Wilderness Downtown」除了影片是展現元素之外，瀏覽器視窗同時也是元素喔!視窗會隨著影片內容來顯示或隱藏。如果你夠細心，還可以發現到最大的背景視窗會隨著跑者的光線作出陰暗的變化。
這是使用到Google地圖的衛星影片，還滿有趣的。
視窗有時會顯示出來，又會隱藏，如果不小心點到瀏覽器的視窗，可能會造成視窗無法主動顯示。
街景地圖也出現了!
隨著跑者的腳步可以觀看到不同方向的街景。
這時候跑者停下腳步會開始旋轉周遭景色，衛星地圖與街景影像都會開始旋轉喔!筆者我都有點頭暈了.....
猜到「台北市信義區市府路45號」是哪裡了嗎?可以再高一點~
再高一點沒關係~
就是台北101大樓!
會出現互動式效果，只要先用滑鼠點一下中間較大的視窗。
輸入文字，下面的三個小視窗的影片就會開始動喔!
有一群鳥飛來了，可以看到這一群鳥會從左邊飛到右邊兩個小視窗，而且鳥的飛行路徑都接續著沒有斷掉。
使用HTML5就可以在網頁上，就不用Flash達成此效果。
哇!101大樓長樹了!
台北街道也長樹了!
跑者跑阿!
結束後，「The Wilderness Downtown」會主動關閉視窗，你看了是不是回味無窮，想要看專屬你的影片了?點這裡到「The Wilderness Downtown」體驗市中心的荒野奔跑的感覺!
站外參考文章:
Official Google Blog: Arcade Fire meets HTML5
沒有留言 :
張貼留言