Simple Video Mask Using Svg
by muthu[ Edit ] 2014-04-01 12:15:01
http://mirrorblender.top-ix.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_stereo.ogg
Simple Video Mask Using Svg
------------------------------------------DEMO------------------------------------------------
------------------------------------------HTML5 SVG--------------------------------------------
<h1>SVG Video Masking</h1>
<video id="video_target" src="http://mirrorblender.top-ix.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_stereo.ogg" type="video/ogg" autoplay></video>
<svg>
<mask id="video_mask" maskUnits="userSpaceOnUse">
<text x="300" y="190">Muthujoo</text>
</mask>
</svg>
------------------------------------------CSS3------------------------------------------------
body { background:#00a2ff; }
video { display:block; }
text { font-family:Arial Black, sans-serif; font-size:120px; text-anchor: middle; letter-spacing:1px; fill:#fff; }
#video_target { mask: url(#video_mask); }
h1 { color:#FFF; font-family:Arial Black, sans-serif; }
