ariya.io About Talks Articles

HTML5 video with reflection

2 min read

Poor Tor Arne. After his super-secret project is leaked, our HTML5 Media ninja has no other choice but to reveal all his cards. HTML5 video/audio, important for next-gen web content, will be available in Firefox, Opera, and Safari, is finally supported in QtWebKit, thanks to Tor Arne. As he wrote there, basically we use Phonon, the multimedia API available from Qt 4.4 onwards.

Since WebKit (thus also QtWebKit) already supports CSS reflections, I decided to combine both the video and the reflection effect. Of course, it just works (click-to-enlarge):

HTML5's Media element with reflection

(As a new WebKit hacker, my skill is only at cranking HTML+CSS like this. Credits should go to Tor Arne and other WebKit chaps for doing the real work).

If you have sharp eyes, you can see that the following HTML snippet is all you need:

<video src='"videofile.ogg"' controls='"true"' style='"-webkit-box-reflect:below'></video>

More info on the video tag is available elsewhere. Bear in mind that this probably does not work in many common browsers like Firefox 2. You need the next-gen web browsers, try Safari 3.1. You can even use Arora, if you build it against WebKit trunk.

Note that all the bleeding-edge features are available only in WebKit trunk. Unless you want to experience the hassle of building QtWebKit yourself (hint: it is not that difficult actually), the best bet is of course to wait for the Qt 4.5. With the recent addition of NSAPI plugin support (yes, you can watch YouTube using QtWebKit) and now HTML5 Media element, I am excited to see the what kind of plasmoids will show up. But likely within the frame of KDE 4.2, if not 4.3. So, yes, it will take time. Once it is there, however, the sky is the limit. Using both Flash and Media element, imagine all the QtWebKit-based plasmoids deliver the best of YouTube videos, the highest rated movie trailers from the theaters in your neighborhood, some webcam views from your upcoming holiday destination, hand-picked favorite Internet radios and podcasts, etc etc to your desktop.

♡ this article? Explore more articles and follow me Twitter.

Share this on Twitter Facebook