[webkit-qt] WebView with Transparent Background

benjamin.poulain at nokia.com benjamin.poulain at nokia.com
Fri Nov 12 14:47:15 PST 2010

I think the video of VLC widget is rendered on another window surface reparented to the Qt Widget. If you want transparent window surface on top of eachother, it is window compositing, not regular rendering. You should check the hierarchy of XWindow, or of Windows Window to see if you have more than one native window per Qt Window.


PS: Sorry for top posting, it is the Webmail.

From: webkit-qt-bounces at lists.webkit.org [webkit-qt-bounces at lists.webkit.org] on behalf of ext Michael Ditum [mike at mikeditum.co.uk]
Sent: Friday, November 12, 2010 10:52 PM
To: webkit-qt at lists.webkit.org
Subject: Re: [webkit-qt] WebView with Transparent Background

On Mon, Nov 8, 2010 at 7:27 PM, Michael Ditum <mike at mikeditum.co.uk<mailto:mike at mikeditum.co.uk>> wrote:
On Mon, Nov 8, 2010 at 7:21 PM, Ariya Hidayat <ariya.hidayat at gmail.com<mailto:ariya.hidayat at gmail.com>> wrote:
> I'm currently trying to get a webkit widget with a transparent background so
> that if, in an HTML document, the html and body nodes are styled to have
> their background-color set to transparent then the Widgets behind the
> WebView Widget are visible through.

Here is what I wrote a looong time ago (still the first hit of
googling for 'transparent qwebview'):


See if it works for you.

Thank you that's exactly what I wanted, works brilliantly! Turns out my google-fu is not as strong as I thought.


I've been playing with this a bit more and have come across another problem which has stumped me. I'm trying to have the QWebView render on top of a video window rendered with vlc so the video is visible through the transparent elements. However the QWebView is obstructing the video. If I swap the QVlcPlayer for a QTextEdit then it displays fine so it must be something with my custom widget but I'm lost to even know where to start looking. Any help would be greatly appreciated!

Here's my Qt VLC code in QVlcPlayer.h...


#include <vlc/vlc.h>
#include <QWidget>

class QVlcPlayer : public QWidget
libvlc_instance_t *_vlcinstance;
libvlc_media_player_t *_mp;
libvlc_media_t *_m;

QVlcPlayer(QWidget *widget = 0) : QWidget(widget)
const char * const vlc_args[] = {
"-I", "dummy", "--ignore-config", "--extraintf=logger", "--verbose=2", "--plugin-path=plugins"
_vlcinstance=libvlc_new(sizeof(vlc_args) / sizeof(vlc_args[0]), vlc_args);
_mp = libvlc_media_player_new (_vlcinstance);

libvlc_media_player_stop (_mp);
libvlc_media_player_release (_mp);
libvlc_release (_vlcinstance);

public slots:
void playFile(QString file)
_m = libvlc_media_new_location (_vlcinstance, file.toAscii());
libvlc_media_player_set_media (_mp, _m);
#if defined(Q_OS_WIN)
libvlc_media_player_set_hwnd(_mp, this->winId()); // for vlc 1.0
#elif defined(Q_OS_MAC)
libvlc_media_player_set_agl (_mp, this->winId()); // for vlc 1.0
#else //Linux
libvlc_media_player_set_xwindow(_mp, this->winId()); // for vlc 1.0
libvlc_media_player_play (_mp);

and my main.cpp code...

#include "QVlcPlayer.h"
#include <QApplication>
#include <QWebView>
#include <QWebSettings>

int main(int argc, char *argv[])
QApplication a(argc, argv);

QWidget window;
window.resize(1280, 720);

QVlcPlayer player(&window);
player.setGeometry(0, 0, 1280,720);

QWebView *view = new QWebView(&window);

QPalette pal = view->palette();
pal.setBrush(QPalette::Base, Qt::transparent);

view->setAttribute(Qt::WA_OpaquePaintEvent, false);
view->setGeometry(10, 10, 1260, 680);


return a.exec();

Thanks in advance!


More information about the webkit-qt mailing list