與淡入淡出的畫布<video>

Question

我正在使用this代碼創建淡入淡出的線索。它使用context.fillStyle = 'rgba(0,0,0,0.12)';來創建淡入淡出。問題是我想要在<video>元素的頂部使用淡出軌跡，而淡入淡出元素隱藏了<video>元素。

有沒有辦法在沒有隱藏它的情況下在<video>之上放置一個褪色的畫布？

Answer 1

可以代替使用全球阿爾法繪製視頻元素到畫布 -

更新

爲了使淡出，以及你可以使用這個修改後的代碼（該演示使用一個按鈕來觸發淡出，但你可以從任何地方設置fade = true）啓動它：

ONLINE DEMO

var fade = false; 
var fadeVal = 1; 

ctx.globalAlpha = 0.2; //adjust as needed 

function loop() { 

    /// draw frame from video at current global alpha 
    if (video1) ctx.drawImage(video1, 0, 0, w, h); 

    /// if fade = true start fade out 
    if (fade === true) { 

     /// we need to make opaque again or the black box 
     /// will be transparent resulting in none-working effect 
     ctx.globalAlpha = 0.2 + (1-fadeVal); 

     /// set fill color for black box 
     ctx.fillStyle = 'rgba(0,0,0,' + (1 - fadeVal) + ')'; 

     /// draw on top of video 
     ctx.fillRect(0, 0, w, h); 

     /// speed of fade out 
     fadeVal -= 0.02; 
    } 

    /// when faded out, stop loop (stop video too, not shown) 
    if (fadeVal >= 0) requestAnimationFrame(loop); 

} 
loop(); 

這將從先前繪製的幀留下視頻軌跡，並允許您淡入視頻以保持軌跡。

這只是一個裸露的例子，只是許多人做這種事情的一種方式 - 根據您的需求進行調整。

要重新啓動視頻，您需要設置fade = false,fadeVal = 1並調用loop()。