SVG Video Demo

Chris Double has posted a SVG video tag demo that plays a port of a Silverlight demo. 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 […]

Chris Double has posted a SVG video tag demo that plays a port of a Silverlight demo.

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> 

As you watch videos playing, you can move, resize, and rotate the canvases. All via:

 <video id="svg_v1" src="http://www.bluishcoder.co.nz/video_svg_demo.ogg"></video> 

Bluish Coder

Video, Online video, Mozilla, Firefox, SVG