【IT168 技術】直到現在，仍然不存在一項旨在網頁上顯示視頻的標準。
今天，大多數視頻是通過插件(比如 Flash)來顯示的。然而，並非所有瀏覽器都擁有同樣的插件。
HTML5 規定了一種通過 video 元素來包含視頻的標準方法。如：
<video src="movie.ogg" controls="controls">
</video>
Canvas+Video
HTML5中引入新的元素canvas，其drawImage 方法允許在 canvas 中插入其他圖像( img 和 canvas 元素) 。
drawImage函數有三種函數原型：
drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
第一個參數image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作為參數。
dx和dy是image在canvas中定位的坐標值;dw和dh是image在canvas中即將繪製區域(相對dx和dy坐標的偏移量)的寬度和高度值;
sx和sy是image所要繪製的起始位置，sw和sh是image所要繪製區域(相對image的sx和sy坐標的偏移量)的寬度和高度值。
所以這使酷炫播放體驗有了實現的可能。
理解canvas.translate和canvas.scale
很多人對於canvas.translate(x,y)的理解有的錯誤，之前一直以原點(0,0)為基準點，作用就是移動原點，默認的原點(0，0)是在屏幕左上角的，你可以通過translate(x，y)把點(x，y)作為原點，就一直以為這個(x,y)就是新的坐標原點。但看一下API就會知道，這種理解是不對的，
不過API確實容易誤導大家：
view plain
public void translate (float dx, float dy)
Since: API Level 1
Preconcat the current matrix with the specified translation
Parameters
dx The distance to translate in X
dy The distance to translate in Y
其實是原來的原點分別在x軸和y軸偏移多遠的距離，然後以偏移後的位置作為坐標原點。也就是說原來在(100,100),然後translate(1，1)新的坐標原點在(101,101)而不是(1,1)
canvas.scale：
canvas.scale提供了放大縮小倒置等功能。比如Y倒置：canvas.scale(1，-1)
核心代碼
canvas.setAttribute('height', Math.floor(video.height));
canvas.setAttribute('width', Math.floor(video.width));
ctx.translate(0, canvas.height );
ctx.scale(1, -1);
ctx.globalAlpha = 0.3;
ctx.drawImage(video, 0, 0, video.width, video.height, 0, -canvas.height/2, canvas.width, canvas.height);
對於這個包裝類來說，最關鍵還是MyHttpAsyncResult的實現，它是異步模式的核心。
ASP.NET 異步頁的實現方式
從上面的異步HttpHandler可以看到，一個處理流程被分成二個階段了。但Page也是一個HttpHandler，不過，Page在處理請求時， 有著更複雜的過程，通常被人們稱為【頁面生命周期】，一個頁面生命周期對應著一個ASPX頁的處理過程。 對於同步頁來說，整個過程從頭到尾連續執行一遍就行了，這比較容易理解。但是對於異步頁來說，它必須要拆分成二個階段， 以下圖片反映了異步頁的頁面生命周期。注意右邊的流程是代表異步頁的。