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單元進來呈現… 等等)就不再額外提了。
但是真的是從這案子吸收到不少經驗。
最近為了這個案子傷了不少腦袋。
這是一個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單元進來呈現… 等等)就不再額外提了。
但是真的是從這案子吸收到不少經驗。
