CSS滤镜视频但不是控件 [英] CSS filter video but not the controls

问题描述

正如此处所示： http://codepen.io/chriscoyier/pen/zbakI
您可以使用css过滤器将过滤器应用于视频。

您可以定义过滤器，稍后在将其应用于视频元素时引用它。 / p>

  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 =''; 
  

但是我怎样才能让过滤器不模糊视频的控制呢？ b $ b

解决方案

要做到这一点，您必须使用自定义视频控件。有很多资源解释如何实现它们，例如这个文章。

我在Google上找到了一个小提琴来演示这个：

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

我将一个简单的过滤器：blur（4px）; 添加到视频元素中，但是您可以在HTML中定义过滤器，并通过ID引用它们。你比较喜欢。

As is displayed here: http://codepen.io/chriscoyier/pen/zbakI you can apply a filter to videos using css filters.

You define the filter and then you refer to it later when applying it to the video element.

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='';

But how can i get the filter to not blur the controls of the video?

解决方案

To accomplish this, you will have to use custom video controls. There are lots of resources out there that explain how to implement them, for example this article.

I've edited a fiddle I found on Google to illustrate this:

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

I am applying a simple filter: blur(4px); to the video element, but you can define your filters in HTML and refer to them by ID if you prefer.

这篇关于CSS滤镜视频但不是控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！