顛覆網路 35 天 (2b): 為影片添點情調

為影片添點情調，我略譯一下：

這個範例利用了 Canvas、Video 標籤以及 SVG 遮罩，計算影片的色彩平均值後動態調整邊框顏色。整個看起來還挺有意思的。不過，在觀賞範例前有幾項事情要先說明：

1. 這個範例吃 CPU 吃很大，電腦心臟不強的可以考慮直接觀看 mov 影音檔瞧瞧效果就好
2. 你需要安裝 Firefox 3.5 preview (beta99) 以上的版本才能正確瀏覽，Beta 4 中有個 Bug 會讓影音資料無法複製到 Canvas 上。如果你有了 Beta 4、請點選「說明 > 檢查更新」以便更新

準備好了嗎？Go!

• 電腦心臟強的勇士請走這裡 (記得，只有 Firefox 3.5 beta99 以上可以用)
• 心臟不強不打緊，可以看看 Screencast 過乾癮： ogg 格式, mov 格式

怎麼做到的呢？開頭其實就描述過原理，首先要把影格畫到 canvas 上，並順手計算色彩的平均資料：

var canvas = document.getElementById('canvas');
var video = document.getElementById('video');
var context = canvas.getContext('2d');
 
// push frame to canvas
context.drawImage(video, 0, 0, canvas.width, canvas.height);
 
// get image data for color calculation
var data = context.getImageData(0, 0, canvas.width, canvas.height);

接著以 YUI animation 動態變更計算後的色彩值就完成變化的部份。

為什麼影片周圍可以有柔邊的效果？事實上 Firefox 3.5 允許你將 SVG 遮罩特效套用到某個網頁元素上 ，在此我們先於同一網頁中定義 SVG 遮罩 (當然，也可以用另一個檔案來完成)，然後利用這樣的 CSS 規則即可：

#video {
    mask: url(index.html#m1);
}

這就是混合使用網際標準的有趣之處 :) 連影片都被當成網頁的一部份對待，不需要透過外掛就可以直接操作、與網頁其他部份互動。