<video> 顶部带有淡入淡出的画布

Question

我正在使用this 代码来创建衰减轨迹。它使用context.fillStyle = 'rgba(0,0,0,0.12)'; 来创建淡入淡出。问题是我想在 <video> 元素上使用渐变轨迹，而渐变隐藏了 <video> 元素。

有没有办法在 <video> 上添加一个淡入淡出的画布而不隐藏它？

Answer 1

您可以将视频元素绘制到画布上，而不是使用全局 alpha -

更新

要启用淡出，您也可以使用修改后的代码（演示使用按钮触发淡出，但您可以从任何设置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()。