HTML and CSS Reference
In-Depth Information
NOTE
Find out about Chris Double's efforts with HTML5 video and SVG at http://www.bluishcoder.co.nz/
2007/08/svg-video-demo.html . Access the video/SVG demo at http://double.co.nz/video_test/
video.svg . Note that the demo only works in Firefox and Opera.
An SVG document is XML, which means we have to make sure our attribute values are
quoted, our tags are closed, and values assigned to boolean attributes. HTML within SVG
documents is added using a specialized element, foreignObject. When you add an HTML
block to an SVG document, you're telling the user agent not to process the contents as
SVG, but as HTML. Typically the block is added as a body element, complete with HTML
namespace.
Why would you include video within an SVG document? One reason is to make use of the
more sophisticated graphics available with SVG. For instance, you could provide a more in-
teresting frame for the video element. Example 4-5 shows an SVG document with an embed-
ded video, nested within a rectangle with a pink background and a green dashed border.
Example4-5.HTML5 video embedded in an SVG document
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="510px" height="300px" viewBox="0 0 510 300">
<rect x="10" y="10" width="490" height="280"
stroke="green" stroke-width="10" stroke-linejoin="round"
stroke-dasharray="5,3,2" fill="pink" />
<g id="videoobj">
<foreignObject viewBox="0 0 480 270" width="480px"
height="270px" x="15" y="15">
<body xmlns="http://www.w3.org/1999/xhtml"
style="margin: 0; padding: 0">
<video controls="controls" width="480" height="270">
<source src="videofile.mp4" type="video/mp4" />
<source src="videofile.ogg" type="video/ogg" />
</video>
</body>
</foreignObject>
</g>
</svg>
Search WWH ::




Custom Search