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 Vukićević 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
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.
Categories: firefox, ogg
Vladimir Vukićević 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>. A screen cast of this running is available (in various file formats):The videos being played are:
<div xmlns="http://www.w3.org/1999/xhtml">
<video src="myvideo.ogg"/>
</div>
</foreignObject>
- 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.
Categories: firefox, ogg
Labels: mozilla
posted by Chris Double at 12:19 PM
22 Comments:
really impressive... I'm gonna digg this.
digged
great demo.
I hope the video element support can be ready in time for inclusion in Firefox 3.
Absolutely amazing.
Sweet!
Are the beeps assertions, indicating that this demo was done in a debug build? Performance must be great in an opt build!
Jesse, yep those are a bunch of assertions firing and it was a debug build. And one with a fair amount of console logging.
Okay, you can do this is SVG. How does its complexity compare to Silverlight?
Unfortunately I don't know much silverlight. Any at all actually. I went to a demo in Auckland and saw some code and it looked quite like 'svg with javascript'. Not surprising given it's an xml markup language combined with a scripting language. That said, the demos were awesome. Very nice.
For the complexity of the SVG you can see the source in photos.svg.
I believe the silverlight source is available and I'd be interested in seeing it - anyone got a pointer?
Just to clarify, when I say 'silverlight source' I mean 'silverlight source to the demo'. I've no interest in the actual source to Silverlight :)
From what I gather (without having had a close look) Silverlight 1.0 is mostly an XML-UI (think XUL, just incompatible) + XML-Graphics (think SVG, just incompatible) + JavaScript.
In fact Microsoft is driving down the road of deprecating Win.Forms and replacing it with XML. Microsoft sorta got the THERE IS ONLY XUL thingie - but of course they're doing it their own way.
Silverlight 1.1 will see the possibility to use any .net language for Silverlight stuff, so it'll be able to deploy "real" applications. Think of Java applets in a recent and fast JRE (and don't think of Java applets like seen in the Netscape days).
Maik Merten
Cool demo, but I wish that it would validate. According to SVG 1.1 and DOM core specs there is no document.location if the document is an SVGDocument, which should be the case here, right?
Runs fine in Opera 9 too when those non-standard calls are removed. If you think that the interface SVGDocument should inherit from HTMLDocument, please make that request to the SVG WG.
To respond to myself: It seems HTML5 sorts this issue out, so fair enough, at least the example might be valid according to some specification in the future :)
I'm guessing you're referring to Vlad's photos.svg file since the video version definitely can only conform to a future specification since it uses the video element :-)
Glad to see another implementation of the VIDEO element!
Chris: Most of the videos examples work in the Windows build of Opera with VIDEO enabled, ( released in march/april ). Check it out in A call for video on the web.. Also I guess you know that the VIDEO element has been proposed for standardization to the WHAT WG.
Mathieu, great to hear that the examples work on the Opera build too. Yep, I know about the WHATWG specification for video - that's what I'm implementing. Opera did a good thing getting the ball rolling on this.
Hopefully more browsers will come to the party!
Can http://www.xml.com/pub/a/2004/10/13/sacre.html work with your build as well ?
Impressive, but how much code was needed vis-a-vis something in Silverlight? Also, I really doubt general performance can ever dream of coming anywhere near what Silverlight should be able to offer since that runtime can utilize DirectX directly.
Looks great! How can I try video.svg?
You said that will put it here. But i can't find it there
Mozilla/5.0 (X11; U; Linux i686 (x86_64); en-US; rv:1.9a9pre) Gecko/2007100113 Minefield/3.0a9pre
Debian lenny i486 with the amd64 kernel and the free nv driver
The bads a fix for which is obviously planned already, I think:
- 100% CPU usage.
- no preloading like the YouTube things do.
Other bads:
- crashes after playing some of the video embedded in this post.
- uses /dev/dsp (OSS), which is not enabled here, and has only been left as emulation… maybe I should find a way to enable it, though.
This post has been removed by the author.
Congratulations on the work with SVG + SMIL. It really does look promising, and with decent resource usage aswell.
With just a bit more time and effort, SVG may just be _the_ operating system independent multimedia platform.
--Sam
Post a Comment
<< Home