HTML and CSS Reference
In-Depth Information
ric
filter, which applies a matrix transformation on the RGBA color and alpha values of each
pixel in the original element, in this case a video. The matrix structure is as follows:
| R' | | a00 a01 a02 a03 a04 | | R |
| G' | | a10 a11 a12 a13 a14 | | G |
| B' | = | a20 a21 a22 a23 a24 | * | B |
| A' | | a30 a31 a32 a33 a34 | | A |
| 1 | | 0 0 0 0 1 | | 1 |
The actual value passed to the grayscale filter effect is:
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
Example 4-6
has a complete page with HTML video and applied SVG filter. Pay particular
attention to the fact that no JavaScript is used to create the effect.
Example4-6.Applying an SVG filter to an HTML5 video within an HTML document
<!DOCTYPE html>
<head>
<title>Video</title>
<meta charset="utf-8" />
<style>
video { filter:url(#blackandwhite); border: 2px solid red;}
</style>
</head>
<body>
<video controls poster="poster.jpg" autoplay>
<source src="videofile.mp4" type="video/mp4" />
<source src="videofile.webm" type="video/webm" />
</video>
<svg id='image' version="1.1">
<defs>
<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>
</defs>
</svg>
</body>
Figure 4-6
shows the video playing in Firefox…the only browser that supports the effect.
