Google HTML5體驗網站「The Wilderness Downtown」,101大樓長樹了!

玩樂家 | 8/31/2010 | | | | Share on Facebook
本文 由 玩樂部落格大全 發布!文章引用須遵守 引用須知 ,轉貼時請勿刪除本行! 「The Wilderness Downtown」(筆者我自己的中譯:市中心的荒野)這是Google為了展現H... 本文玩樂部落格大全發布!文章引用須遵守引用須知,轉貼時請勿刪除本行!
「The Wilderness Downtown」 google html5
「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服務的效果喔!

「The Wilderness Downtown」 google html5
2.
這時候「The Wilderness Downtown」就會開始準備影片所需要的街景與衛星影像。
影片中的街景與衛星影片都是使用了Google的相關服務,像是Google地圖。
「The Wilderness Downtown」 google html5
3.
如果「The Wilderness Downtown」準備好了話,就可以按下中間的PLAY FILM來播放影片。
「The Wilderness Downtown」 google html5

「The Wilderness Downtown」內容預覽
播放時會開啟很多視窗,這是很正常,但是也是滿吃電腦資源的,所以前面才會建議你關閉不必要的程式與軟體,這裡筆者我以Google瀏覽器來執行「The Wilderness Downtown」。如果你想要控制影片的播放,在螢幕的左下角有控制影片的小視窗,在視窗中有控制播放與控制聲音的按鈕。

注意!
播放時請勿用滑鼠點擊瀏覽器的視窗,否則會造成某些視窗無法顯示,這樣影片效果就不完整了。


「The Wilderness Downtown」 google html5



「The Wilderness Downtown」除了影片是展現元素之外,瀏覽器視窗同時也是元素喔!視窗會隨著影片內容來顯示或隱藏。如果你夠細心,還可以發現到最大的背景視窗會隨著跑者的光線作出陰暗的變化。
「The Wilderness Downtown」 google html5




這是使用到Google地圖的衛星影片,還滿有趣的。
「The Wilderness Downtown」 google html5





視窗有時會顯示出來,又會隱藏,如果不小心點到瀏覽器的視窗,可能會造成視窗無法主動顯示。
「The Wilderness Downtown」 google html5



街景地圖也出現了!
「The Wilderness Downtown」 google html5



隨著跑者的腳步可以觀看到不同方向的街景。
「The Wilderness Downtown」 google html5



這時候跑者停下腳步會開始旋轉周遭景色,衛星地圖與街景影像都會開始旋轉喔!筆者我都有點頭暈了.....
「The Wilderness Downtown」 google html5



猜到「台北市信義區市府路45號」是哪裡了嗎?可以再高一點~
「The Wilderness Downtown」 google html5



再高一點沒關係~
「The Wilderness Downtown」 google html5

就是台北101大樓!
「The Wilderness Downtown」 google html5


會出現互動式效果,只要先用滑鼠點一下中間較大的視窗。
「The Wilderness Downtown」 google html5

輸入文字,下面的三個小視窗的影片就會開始動喔!
「The Wilderness Downtown」 google html5


有一群鳥飛來了,可以看到這一群鳥會從左邊飛到右邊兩個小視窗,而且鳥的飛行路徑都接續著沒有斷掉。

使用HTML5就可以在網頁上,就不用Flash達成此效果。
「The Wilderness Downtown」 google html5

哇!101大樓長樹了!
「The Wilderness Downtown」 google html5

台北街道也長樹了!
「The Wilderness Downtown」 google html5

跑者跑阿!
「The Wilderness Downtown」 google html5

結束後,「The Wilderness Downtown」會主動關閉視窗,你看了是不是回味無窮,想要看專屬你的影片了?點這裡到「The Wilderness Downtown」體驗市中心的荒野奔跑的感覺!
「The Wilderness Downtown」 google html5

站外參考文章:
Official Google Blog: Arcade Fire meets HTML5



Share on Facebook

歡迎幫我們在玩樂家粉絲團點個讚!獲得最新好文!

玩樂家歡迎你加入我們,Google +1獲得最新好文!
Related Posts Plugin for WordPress, Blogger...