CSS фильтр видео, но не элементы управления

Question

Как показано здесь: 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=''; 

Но как я могу заставить фильтр не размывать элементы управления видео?

Answer 1

Для этого вам необходимо будет использовать пользовательские элементы управления видео. Есть много ресурсов, которые объясняют, как их реализовать, например this article.

Я редактировал скрипку я нашел на Google, чтобы проиллюстрировать это:

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

Я применяю простой filter: blur(4px); к видеоэлементу, но вы можете определить фильтры в HTML и ссылаться на них по ID, если вы предпочитаете.