2012年6月26日 星期二

[新案上線] TOYOTA 86


Toyota 86 (強列建議使用Chrome或Safari觀看…。)
http://www.toyota.com.tw/cars/86


 第一次完整獨立完成一個純js的商業案。
最近為了這個案子傷了不少腦袋。
這是一個html的網站,目標是要能在所有的裝置及瀏覽器上觀看,所以flash馬上被排除,但是又希望能做到像flash一樣精彩的效果,乍看之下其實沒什麼,就是播播影片而已嘛。
剛開始我參與會議時心裡也是這麼想的,應該沒什麼。

不過真正執行後就開始遇到一些問題了。

首先是影片的問題,整個網站的幾個主要大單元是由影片串場的,因為原本的需求是希望隨時能在影片中的某一個場景停下來(甚至是倒播),又希望整個串場個過程能夠順暢,因此評估之後我們採用了大量的連續圖檔來處理這一塊。
為了要讓影片播放順利,所以需要預先載入一定量的圖檔,這跟影片的buffer是一樣的道理,只不過在載入的過程中我發現電腦的記憶體使用量大量的爆增,直到整台電腦的記憶體都被吃光之後,載入的動作就會發生錯誤,這時即使再釋放記憶體,再重新載入新的圖片也會失敗,原因不明。
所以要在何時適放部份的記憶以及何時開始播放影片、何時載入新的圖檔,變成了這個案子最花工的地方…。
不過也因為這樣無意中發現了Chrome及Safari在記憶體的配置處理上真的比FF及IE厲害許多。

但礙於實在有太多圖檔無法適放,因此在部份電腦的FF及IE下,還是會發生記憶體不足的情況,因此只能說這仍然是個不完整的案子…。

另外一個問題就是手持裝置的效能問題。

原本我的寫法是用兩個div去輪流播放當下該出現的圖片,為什麼要用兩個?其中一個要墊在下面,先放入下一張圖,這樣才不會造成閃爍,這個概念好像叫做double buffer。
不過這樣的話,吃cpu似乎吃得還挺重的,在手機上(我個人是使用HTC Sensation)整個畫面跑起來非常吃力,一點都不流暢。
所以後來就在上線前我馬上改寫成canvas,但為了讓IE系列仍然能正常觀看,所以IE仍然是使用div來播放。
我想現階段這方面的效能也只能這樣調整了,至少部份的手機上跑起來雖沒有很快速但也可以接受。

再來就是音效的問題。

音效原本我是使用HTML5的Audio來處理,但是FF不吃mp3,只吃wav,這下子不得了,光背景音樂wav就要5mb,所以最後折衷,唯獨音效的部份使用了flash,放棄了行動裝置上的聲音效果。

開發心得大概是這樣,其它很多是比較細節的(解析度的調整、js的物件技巧、從外部load單元進來呈現… 等等)就不再額外提了。
但是真的是從這案子吸收到不少經驗。