css - 在后台运行的视频顶部制作一个半透明的 div

Question

我正在使用以下代码在我的主页背景中播放视频:

 <video autoplay poster="videos/test.png" id="bgvid" muted>
        <source src="videos/test.webm" type="video/webm">
        <source src="videos/test.ogv" type="video/ogv">
        <source src="videos/test.mp4" type="video/mp4">
 </video>

我在它上面有一个 div，我试图让它变得半透明，同时模糊它后面的视频(与下图相同的效果)

我搜索了很多关于如何做到这一点的方法，有些人建议使用 css 过滤器，如:blur(5px)。我已经尝试过了，但没有得到如上图所示的结果。

然后我发现了一个非常酷的库，叫做 blur.js ( http://blurjs.com/ )；但是，它不适用于背景中的视频，只有当我有静止图像作为背景时才有效。

关于如何通过在后台运行的视频实现这种效果有什么想法吗？

Answer 1

您可以使用 <canvas>镜像背景视频的内容，对其应用一些 CSS 过滤器，最后将此 Canvas 包裹在 <div> 中仅显示您需要在框中显示的视频部分...我在这里做了一个例子: http://codepen.io/Tont/pen/HnLdj/

---

编辑:现在有一个更简单的方法 -> https://stackoverflow.com/a/58952257/4105190