Simple Video Mask Using Svg

by muthu 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------------------------------------------------
video_mask.jpg
------------------------------------------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; }
590
like
0
dislike
0
mail
flag

You must LOGIN to add comments