HTML and CSS Reference
In-Depth Information
It's that simple! If you want to have
some fun, refer back to the canvas
transformations in chapter 3 and try
them on frames of a video.
The other thing you learned about in the previous chapter was SVG
in particular applying SVG effects such as transforms, clips, and masks
to HTML content with <foreignObject> . Because the <video> element is
HTML content just like any other, those same effects can be applied.
The following screenshots show a <video> element clipped to appear
inside some text and then animated.
Here's the content of the SVG embedded into the HTML . Note that the
SVG has HTML embedded into it in turn:
<clipPath id="img1" clipPathUnits="userSpaceOnUse"
width="320" height="200">
<text x="0" y="70" font-family="sans-serif"
font-size="80" font-weight="bold">
<tspan x="5" y="134" font-size="85">VIDEO</tspan>
<tspan x="5" y="186" font-size="70">ROCKS!</tspan>
<g clip-path="url(#img1)">
<foreignObject x="0" y="0" width="320" height="200">
<video id="myvideo" width="320" height="200"
Clip path to
use on video
Text used to
clip video
in SVG
Search WWH ::

Custom Search