Javascript 动态视频上的磨砂玻璃效果

我想为视频播放器创建一个媒体控制栏，使控件模糊背景。目前，我可以得到玻璃般的外观，但我不能得到模糊的工作。 我试着遵循这个指南：但它似乎只适用于静态图像

下面是我想要的一个例子：

---

我还看到了webkit背景过滤器，它看起来很完美，但它只在safari上稳定，所以我不能使用它。对于动态视频中的磨砂玻璃有什么建议吗？

我可以通过将视频的底部复制到

画布

的每一帧，并通过CSS模糊

画布

来实现这一点。它似乎在Chrome中运行良好，但在Firefox中有时会闪烁。在

canvas

中使用类似的编程方式进行模糊处理可能会更有效，但这是另一天的实验。也许明天吧

函数初始化控件（播放器、半径、控制高度、视频宽度、视频高度）{
//将播放器裁剪为视频大小
让video=player.querySelector（'video'）；
videoWidth=videoWidth | | video.clientWidth；
videoHeight=videoHeight | | video.clientHeight；
player.style.width=videoWidth+'px'；
player.style.height=videoHeight+px；
//裁剪控制条到视频大小
让controlBar=player.querySelector（'.controlBar'）；
controlBar.style.width=videoWidth+'px'；
controlBar.style.height=controlHeight+'px'；
//画布需要比显示的稍微高一点
//模糊
让canvas=player.querySelector（'canvas'）；
canvas.width=视频宽度；
canvas.height=2*blurRadius+controlHeight；
canvas.style.filter=`blur（${blurRadius}px）`；
canvas.style.top=-2*blurRadius+'px'；
//将视频复制到画布
设ctx=canvas.getContext（'2d'）；
让videoCropY=videoHeight-canvas.height；
函数updateCanvas（）{
ctx.drawImage(
视频
0，videoCropY，canvas.width，canvas.height，
0，0，canvas.width，canvas.height
);
}
//仅在必要时更新画布
让悬停=错误；
函数renderLoop（）{
updateCanvas（）；
如果（悬停&&！video.paused）{
requestAnimationFrame（renderLoop）；
}
}
//渲染到看不见的画布没有意义
player.addEventListener（'mouseenter'，（）=>{
悬停=真；
renderLoop（）；
});
addEventListener（'mouseleave'，（）=>{hovering=false；}）；
video.addEventListener（'play'，renderLoop）；
}
document.addEventListener（'DOMContentLoaded'，事件=>{
//施展魔法
initControls（document.querySelector（'.player'）、4、50、320、240）；
//基本播放按钮功能
document.querySelector（“.play按钮”）.addEventListener（'click'，event=>{
设v=event.target.closest（'.player'）.querySelector（'video'）；
如果（v.end）v.currentTime=0；
如果（v.暂停）{
v、 play（）；
}否则{
v、 暂停（）；
}
});
});
/*模糊控制背景所需的样式*/
.玩家{
位置：相对位置；
}
.player>视频{
保证金：0；
显示：块；
}
.控制栏>画布{
保证金：0；
显示：块；
左：0；
位置：绝对位置；
}
.控制杆{
保证金：0；
溢出：隐藏；
位置：绝对位置；
底部：0；
/*控制栏的高度是用javascript指定的，对此很抱歉*/
}
/*简单的控制隐藏机制；其他方法也有效*/
/*javascript依靠mouseover和mouseout来决定是否更新画布*/
.player>控制栏{
显示：无；
}
.player:hover>。控制栏{
显示：块；
}
/*设计实际控制；适应口味*/
.播放按钮{
高度：30px；
线高：30px；
宽度：100px；
颜色：白色；
边框：1px纯白；
位置：绝对位置；
顶部：10px；
左：50%；
左边距：-50px；
文本对齐：居中；
}

播放/暂停
我对同样的事情做了一些研究，得出结论认为这几乎是不可能的。所有磨砂玻璃演示都使用参考图像进行模糊。我们必须等待背景过滤器得到支持。如果有人能证明我是错的，我会很高兴的。是的，我花了几个小时寻找并尝试在静态解决方案上添加变体。但令人惊讶的是，这种感觉相当普遍