WebKit HTML5 video support with GStreamer
What do you get when you take WebKit/GTK+, add GStreamer and finish off with a sprinkling of code from Clutter?
I’ve been working together with Pierre-Luc Beaudoin on a GStreamer-based media backend for WebKit.
Last week, we landed this work (#16145), which adds support for the WHATWG HTML5 video/audio specification allowing streaming media to be embedded in web pages without the need for plug-ins.
The last couple of days, I’ve been integrating this media backend with our Cairo-based graphics pipeline (#16356). The result is that streaming web video can now be CSS transformed, embedded in SVG, bounced around the page and generally manipulated with JavaScript.
And the screenshot? It’s a video (one of many GUADEC flicks rescued by Thomas Wood) of Federico talking about Sabayon, played back natively in Epiphany at an angle of 45° and with an alpha value of 0.6.
The semi-transparent user controls superimposed on the video are defined entirely in HTML/CSS complete with animated transition effects (WebKit-only right now, other browsers will fall back gracefully).
Exciting stuff!
Where are you sprinkling the clutter, for the actual rendering ?
Realtime semi-transparent controls on top of the video container on the browser?
Looks awesome 😉
Great work Alp!
Maybe I should really look into porting Pyro. Where can I look for the hooks into the cairo pipeline?
Screen shot looks very cool.
Can you give any indication when the webkit version of Epiphany is completed for normal use.
Can we use every audio and video codex in html 5 that is supported by Gstreamer.
Is there also work on integrating webkit into evolution. The html engine that they now use looks horribly in allot of HTML base email.
Thanks for the great work you are doing for the open source community
mallum: The sprinkling of Clutter is basically just the video sink out of clutter-gst right now. There’s a lot to learn from Clutter, especially if we go ahead implement the 3D canvas. WebKit has its own infrastructure for animation and timelines so straight-up use of Clutter probably won’t ever make sense though.
Alex: Dude, you have been mentioning Pyro/WebKit since GUADEC 🙂 There are a couple of strategies we can take here. Either dump a list of requirements for us to support (what kind of API do you need?) or hang out on #webkit-gtk on Freenode and get actively involved. The widget’s API design right now is like GtkTextView on steroids but there’s plenty of scope for graphics hooks and custom rendering.
dr88dr88: Right now, I’d say Epiphany/WebKit isn’t suitable as a day-to-day browser for someone who isn’t actively working on the project. I think we’ll have something usable in the GNOME 2.22 time-frame.
I’ve was digging around Evolution’s code yesterday. GtkHtml has become quite a complicated widget, and supporting a good chunk of its features may take a month or two. I’ll definitely blog when I have some patches here. I have no dialogue with the Evolution hackers yet — that would definitely help.
[…] del contenido multimedia (audio/video), por parte del equipo de desarrollo de WebKit. Ahora tenemos más noticias acerca de esta integración. Las imagenes y el video muestran lo que podemos hacer con esta implementación. Compártelo # […]
Hi,
great work !
Do you plan to use the fatsight plugin with this or is ti only for streaming media ? This could enable videoconferencing in an html5 page !
Thanks
Wow, cool stuff!
Hi Alp
This stuff looks great.
Any idea when the code will hit the webkit repository? (At least (#16356)!)
[…] great to see Alp doing similar work in WebKit for Linux. The question that I have is will Apple, who is by far the […]
Where is the video about the effect ? Probably I’m not able to read, but I can’t see …
Zom: There’s no video for this feature, ironically. You’ll have to take my word that it’s really an Ogg video, that it’s playing at a good framerate and that it’s both CSS-transformed and CSS-animated.
I’m on the lookout for a good screencast program for GNOME actually.
[…] Future of Video is Here! Jump to Comments WebKit/GTK+ is adding support for <video> and integrating it with CSS and Javascript. Goodbye Silverlight. Goodbye […]
m5penc3r: Should be up tonight. Been busy dealing with a bunch of other patches and forgot to attach the patch the other day.
This is cool stuff. Webkit is gaining more and more momentum – that’s good to see.
[…] least, check out the totally wicked screenshot of Epiphany/WebKit with HTML 5 media support that Alp made: Leave a […]
[…] and GStreamer, Alp Toker did a GStreamer sink for Cairo that completes the work. You can see the screenshot on his […]
Nice. I can’t wait until the video portions are integrated and no plugins necessary as they have proven time and time again to be security risks.
[…] standard HTML5 media tags, adding support for the standard to Internet Explorer and extending the capabilities of WebKit-based browsers like Safari and Epiphany. A cunning plan, one might say! Share […]