CSS过滤视频但不是控件答案

【问题标题】：CSS filter video but not the controlsCSS过滤视频但不是控件
【发布时间】：2015-01-09 14:42:57
【问题描述】：

如下所示：http://codepen.io/chriscoyier/pen/zbakI 您可以使用 css 过滤器对视频应用过滤器。

您定义过滤器，然后在将其应用于视频元素时引用它。

var blur_name='the_blur';
master_video.style.webkitFilter='url(#'+blur_name+')';
master_video.style.mozFilter='url(#'+blur_name+')';
master_video.style.filter='url(#'+blur_name+')';

var blur_name='';
master_video.style.webkitFilter='';
master_video.style.mozFilter='';
master_video.style.filter='';

但是我怎样才能让过滤器不模糊视频的控件？

【问题讨论】：

标签： javascript css filter controls blur

【解决方案1】：

为此，您必须使用自定义视频控件。有很多资源可以解释如何实现它们，例如 this article。

我编辑了一个在 Google 上找到的小提琴来说明这一点：

http://fiddle.jshell.net/td8Lao79/

我将一个简单的filter: blur(4px); 应用于视频元素，但您可以在 HTML 中定义您的过滤器，如果您愿意，可以通过 ID 引用它们。

【讨论】：