Chapter 5: HTML5 Media and SVG - Examples

  1. Listing 5-1/5-2: Styling a video using an external SVG resource as a mask
  2. Listing 5-3: Two SVG masks as used by Firefox with "objectBoundingBox"
  3. Listing 5-4: Manipulating inline SVG with JavaScript in Firefox
  4. Listing 5-5/5-6: Styling a video using an external SVG resource as a mask
  5. Listing 5-7: Running your own controls in SVG (html, xhtml)
  6. Listing 5-8: A SVG mask with a gradient
  7. Listing 5-9: A SVG mask with a pattern
  8. Listing 5-10/5-11: A SVG clip-path used with the controls (html, xhtml)
  9. Listing 5-12: A SVG defined blur filter applied to a video
  10. Listing 5-13: Several SVG filter definitions
  11. Listing 5-14: Several composite SVG filter definitions
  12. Listing 5-15: An animated circle in SVG
  13. Listing 5-16: A motion animation in SVG used as a mask
  14. Listing 5-17: Inline SVG with a video element in XHTML (html, xhtml)
  15. Listing 5-18: Inline SVG with a video element in XHTML and a circular mask (html, xhtml)
  16. Listing 5-19: SVG code for a video reflection (html,xhtml)
  17. Listing 5-20: SVG code for edge detection