2007-10-01
SVG Video Demo
Update 2007-10-01: Patch 5 for the video element support can run this SVG demo. Binaries and SVG source available here.
Vladimir Vukicevic ported a Silverlight demo to SVG. The photos.svg file runs in Firefox and you can move, resize and rotate the photo's using a nice interface. It demonstrates that the types of things that Silverlight is being used for can also be done using open standard technologies like SVG.
I took Vladimir's work and modified it to work with the HTML video element support I'm adding to Firefox. With this version you can resize, rotate and move video files while they are playing. The topmost video in the z-order has the audio track played. Performance is pretty reasonable considering I haven't done any optimisation of it.
The magic of including the HTML video element inside SVG is done using <foreignObject>. Something like
<foreignObject>
<div xmlns="http://www.w3.org/1999/xhtml">
<video src="myvideo.ogg"/>
</div>
</foreignObject>
A screen cast of this running is available (in various file formats):
The videos being played are:
- Open Road Trip interview
- A Scanner Darkly movie trailer
- Video of Pitcairn Islanders making Molasses
To get this working I had to make a few changes to the video element code, some of which are in the git repository already. The rest will be pushed soon, along with the source to the SVG demo which I'll add to the list of test/demo files I use.
If you have a browser with support for <video> you should see the option to play it below.
