HTML and CSS Reference
In-Depth Information
NOTE
If you have the same size image and video, you could also just use an absolutely positioned PNG ele-
ment and get much the same effect, as demonstrated by Chris Mills at
http://people.opera.com/cmills/
Applying SVG Filters to Video Files within HTML
An interesting use of SVG and HTML5 video together is to apply SVG filters or masks or
other graphical devices to the
video
element.
SVG filters are highly sophisticated effects that can be used individually or combined into
more complex presentations. These filters are declarative effects that can be applied to SVG
elements, but can also be applied to any HTML, including HTML media elements.
To use an SVG filter with an HTML5 video element within an HTML5 document, we'll have
to add an SVG block to the same HTML file that has the video:
<!DOCTYPE html>
<head>
<title>SVG filter effects with video</title>
<meta charset="utf-8" />
</head>
<body>
<video controls poster="poster.jpg">
<source src="videofile.mp4" type="video/mp4" />
<source src="videofile.webm" type="video/webm" />
</video>
<svg id='image' version="1.1">
</svg>
</body>
Filters are created within a
defs
(definitions) element, and given unique identifiers. To apply
the filter to the video, the filter identifier is used within a CSS style setting:
<style>
video { filter:url(#filtername); }
</style>
The CSS filter property takes one value, the
url
function, passing in the filter's identifier.
To demonstrate, we'll create one of the simpler filter effects: a filter that takes a color video
and converts it to black and white. This particular effect is created using the
feColorMat-
