Skip to content

Instantly share code, notes, and snippets.

@rafszul

rafszul/SVG-Filters-on-HTML5-Video.markdown

Created February 25, 2015 23:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rafszul/a6f28a0e4b912dd7c18b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rafszul/a6f28a0e4b912dd7c18b to your computer and use it in GitHub Desktop.
Download ZIP
SVG Filters on HTML5 Video
Raw
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>
Raw
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);
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment