[WEB]透明吧！長頸鹿！

一個不小心就快要一個多月沒寫Blog了
果然只要工作一忙 惰性就會通通跑出來
為了提振士氣 來換個方向寫好了!!(其實是因為懶)
在這個"跨平台"三個字當道的時代 就是要來講講WEB

================分隔線=============

今天主要是在介紹一個在使用網頁開發上好用的東西, 透明影片
透明影片在一個快速開發的專案下, 是非常好用的道具
可以省掉很多程式去做視覺動態的工, 又能得到非常不錯的呈現效果
一般透明影片的作法有下面幾種：
(1) 連續png
(2) 原始影片 + 遮罩影片
(3) 含Alpha channel的影片格式


(1)的缺點在於麻煩, 解析度小還能全部先載到記憶體, 不然就只能考慮自己寫緩衝的機制
(2)雖然可以靠GPU去加速, 但就得處理影片播放同步的問題
似乎也有人是把兩支影片併在一起來解決同步, 但這樣等於影片會放大一倍
(3)是我最常用方法!!
真要講起來問題也不少, 光是只有mov支援這點就已經讓人很反感了, 不過因為我是用OF所以還算愉快
不過, 當到了WEB環境時還有作法(3)可以用嗎!?
答案是有的!!也就是WebM格式[1]!!

老樣子, 看Demo吧!!(p.s.似乎不是所有瀏覽器都有支援WebM, 目前我只在chrome下測試過)


這次Source Code其實沒什麼好講的, 只要會用"video"這個Tag的我想應該都會用
我想最核心的會是在怎麼產生WebM吧?
目前我的作法都是透過FFmpeg來將連續的png去匯出成webm[2][3]
也歡迎各位可以提供其他透明影片的作法!

=好寶寶Reference=
[1]Wiki WebM
[2]Alpha transparency in Chrome video
[3]WebM Web Video Encoding Tutorial With FFMpeg