QtWebkit实现视频透明区域

来源：互联网发布：人工智能自然语言理解编辑：程序博客网时间：2024/05/01 21:09

今天，想在页面上开一个区域来播放视频，因为当前的图形层叠在视频上上面，

想要让视频露出来，就不能有任何的图形东东挡在上面。

首先，我在页面上设计了一块div区域来显示视频，这块区域被设置成全透明：

注意最后一个opacity，设置为0的话，就表示该div区域就是全透明了，webkit支持这一个属性。

加载该页面，发现这个区域的确是透出来了，但不符合我们要求，因为，这个区域透明出来以后，就显示页面的背景色了。

视频被背景色挡住了，自然是显示不出来的，看来要把页面的背景也透掉。

把<body>也加上opacity:0? 悲剧了，这个属性加上以后，整个页面只显示背景色，其它内容都没了，原来body的opacity是让

页面上所有的东东都消失啊，显然不能这样。

把<body>的背景色设置成#00000000, 就是把前2位（argb的a位）填0。结果是白底，马上想到webview是建立在mainwindow上，

应该是mainwindow未透明的原因吧。于是设置mainwindow为透明：

QMainWindow window;

QWebView *view = new QWebView(&window);

window.setAttribute(Qt::WA_TranslucentBackground, true);

结果还是悲剧，仍然是白底。

问题应该还是出在webview上面，为body设置background的a没有起作用。

不管，试试调色板，用QT的QPalette来设置一个透明调色板来看看。

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

搞定了! 视频终于透出来了。

总结下，要想在页面上挖个显示视频的洞，要做如下工作：

1. <div style='opacity:0;'></div>

2. <body style='background:#00000000;'>

3. 透明palette:

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

4. webview在mainwindow之上的话，还必须让mainwindow透明

window.setAttribute(Qt::WA_TranslucentBackground, true);

Over!

0 0