SVG Filters on HTML5 Video

index.html

<div class="flexbox-container">
	<div>
		<button>Current filter: <span>none</span></button>
	</div>
	<hr>
	<div>
		<video autoplay="true" id="vid" controls="controls" loop="loop">
  
<source src="http://www.noviceapp.com/videos/sia-chandelier.ogv" type="video/ogg"/>
<source src="http://www.noviceapp.com/videos/sia-chandelier.mp4" type="video/mp4"/>
</video>

<svg id='image' version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blurEffect">
<feGaussianBlur stdDeviation="4"/>
</filter>
<filter id="turbulence">
<feTurbulence baseFrequency=".01" type="fractalNoise" numOctaves="3" seed="23" stitchTiles="stitch"/>
</filter>
<filter id="blur">
<feGaussianBlur stdDeviation="10,3" result="outBlur"/>
</filter>
<filter id="inverse">
<feComponentTransfer>
<feFuncR type="table" tableValues="1 0"/>
<feFuncG type="table" tableValues="1 0"/>
<feFuncB type="table" tableValues="1 0"/>
</feComponentTransfer>
</filter>
<filter id="convolve">
<feConvolveMatrix order="3" kernelMatrix="1 -1  1 -1 -0.01 -1 1 -1 1" edgeMode="duplicate" result="convo"/>
</filter>
<filter id="convoblur">
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
<feConvolveMatrix order="3" kernelMatrix="1 -1  1 -1 -0.01 -1 1 -1 1" edgeMode="none" result="convo"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="convo"/>
</feMerge>
</filter>
<filter id="blackandwhite">
<feColorMatrix values="0.3333 0.3333 0.3333 0 0
                                 0.3333 0.3333 0.3333 0 0
                                0.3333 0.3333 0.3333 0 0
                                0      0      0      1 0"/>
</filter>
<filter id="convolve2">
<feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB" order="3" kernelMatrix="0 -1 0   -1 4 -1   0 -1 0" preserveAlpha="true"/>
</filter>
<filter id="offset" x="-10%" y="-20%" height="230%" width="140%" transform="translate(90,0)">
<feGaussianBlur stdDeviation="14"/>
<feOffset dx="0" dy="240" result="B"/>
<feMerge>
<feMergeNode in="B"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="myblur">
<feGaussianBlur stdDeviation="1"/>
</filter>
<filter id="myconvolve">
<feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB" order="3" kernelMatrix="0 -1 0   -1 4 -1   0 -1 0" preserveAlpha="true"/>
</filter>
<filter id="displacement" x="0%" y="0%" height="100%" width="100%">
<feDisplacementMap scale="100" in2="SourceGraphic" xChannelSelector="G"/>
</filter>
<filter id="bluefill" x="0%" y="0%" width="100%" height="100%">
<feFlood flood-color="blue" result="A"/>
<feColorMatrix type="matrix" in="SourceGraphic" result="B" values="1   0  0  0 0  
                           0   1  0  0 0   
                           0   0  1  0 0   
                           1   1  1  0 0
                  "/>
<feMerge>
<feMergeNode in="A"/>
<feMergeNode in="B"/>
</feMerge>
</filter>
<filter id="noir">
<feGaussianBlur stdDeviation="1.5"/>
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 .5 1 1"/>
<feFuncG type="discrete" tableValues="0 .5 1"/>
<feFuncB type="discrete" tableValues="0"/>
</feComponentTransfer>
</filter>
</defs>
</svg>
</div>
</div>
</div>

script.js

var video = document.querySelector('video'),
 button = document.querySelector('button'),
 current = document.querySelector('button span'),
 filters = ['blur','inverse','convolve','convoblur','offset','convolve2','blackandwhite','noir','bluefill','displacement'],
 i = 0;

button.addEventListener('click',function(){
  
  current.innerHTML = filters[i];
  video.style.webkitFilter='url(#'+filters[i]+')';
  video.style.mozFilter='url(#'+filters[i]+')';
  video.style.filter='url(#'+filters[i]+')';
  
  i++;
  
  if (i>=filters.length) i=0;
  
}, false);

style.css

body {
  padding: 20px;
}

video {
  max-width: 100%;
  filter: url(#blurEffect);
}
.flexbox-container {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;

	align-items: center;
}

SVG-Filters-on-HTML5-Video.markdown

SVG Filters on HTML5 Video

Demo from http://www.paulirish.com/2010/svg-filters-on-html5-video/

Forked from Chris Coyier's Pen SVG Filters on HTML5 Video.

A Pen by @rafszul on CodePen.

License.