HTML on top of NPAPI plugin

Question

After I finished writing my browser plugin using FireBreath and OpenGL, and embedded the plugin using an object tag, I tried to overlay various HTML elements on top of the plugin. Unfortunately, the tag and plugin graphics always stayed on top of any other HTML element on the page, no matter what I tried.

As far as I know, the flash plugin allows HTML overlays as follows:

<param name="wmode" value="transparent">

Is there a general way to enable HTML overlays on or tags? If not, is there a way to enable overlays on NPAPI/ActiveX plugins, or does FireBreath somehow support this feature?

StackOverFlow has been my major resource since I started programming, so many thanks everyone!

Answer 1

There are two types of plugins; windowed and windowless. FireBreath does support windowless plugins (return true from the isWindowless function in your plugin class. If you do a windowless plugin then you can overlay HTML over the plugin. If you do a windowed plugin, then you can't.

However, it's not as easy as it sounds. If you read around you'll find that flash's performance with wmode=transparent is not nearly as good as it is with normal wmode, and the reason is that in order to draw windowless you have to draw only when instructed by the browser. Fortunately, you can ask the browser to tell you to redraw (in FireBreath by calling InvalidateWindow on the PluginWindowlessWin object that you'll get as your window).

Unfortunately, with windowless drawing mode you don't get a hWND -- just a hDC, and it's only valid for the duration of the draw event (RefreshEvent in FireBreath). As best I can determine, you cannot create an opengl drawing context on a hDC that could change or go away between draw calls, and so the only way I've seen an opengl plugin work with windowless drawing on Windows is to draw offscreen and then use GDI to blit the bits to the hDC.

Here is an example that will draw a raw bitmap using either type of drawing (windowed or windowless) that may help you solidify your understanding of what I've been trying to explain above: https://gist.github.com/1068352

Answer 2

Try this solution which worked perfect for me.

Place a dummy IFrame below the plugin and place your required html in a div just below it.

<object id="myPlugin" height="yourRequiredHeight" width="yourRequiredWidth"></object>

<div id="wrapperDiv">
  <iframe class="myClass" > </iframe>
  <div class="myClass" >  My html goes here. It will be placed over the plugin!  </div>

</div>

and the CSS

.myClass

{

position:absolute;
width:250px; // your required height and width for the overlay html
height:250px;
other css as per your style

}