Search code examples
javascriptc++domnpapibrowser-plugin

NPAPI: modify plugin object's CSS properties

I'm programming an NPAPI plugin for an embedded browser based on WebKit. One of the objects handled by this plugin is a video frame that I want to be resizeable through its javascript properties, width and height.

So, in my C++ implementation of the plugin, I expose these two properties (width and height) via the NPAPI NP_Class function pointers (which map to HasProperty / GetProperty / SetProperty methods in my case).

Now, what bothers me is that when the Javascript in the webpage doesn something like this:

<object id="video" type="video/myPluginMimeType" style="height:150px;"></object>
<script>
var video = $('video');
video.height = 250; // all happens here
</script>

It successfully goes into my C++ code an performs the video resizing (in my embedded platform, it goes directly to the video driver).
BUT, right after that, I get called by the browser through the NPN_setWindow() function, giving me back the original dimensions of the video object (150px heightin this example).

Since this NPP_setWindow is also directly mapped to the video driver, I only see my video with 250px height during the blink of an eye. I suspect this is all due to the browser taking only the original "style" attributes as the ones that count.

So, questions:

  • Can I make the browser update its width/height (even style?) properties somehow through the NPAPI?
  • Should I simply ignore the NPP_setWindow calls and perform the resizing uniquely based on the initial call to NPN_New() (which gives me the style properties of the object) and subsequent calls to video.height through the NP API?

I admit I'd prefer the first version, since it lets the browser decide when to redraw and this way I can have a pretty much stateless video plugin.
Also, this first version gives the webpage the ability to change the CSS properties of the plugin DOM object, which will automatically be reflected through the NPP_setWindow call.

Solution

  • Ok, I found the solution(s), so I'll leave this here for other guys:

    1. I set the width in aboslut values ( object.style.width = 150; ) instead of using a length value (as stated here: http://www.w3.org/TR/css3-values/ ). The correct javascript code needed to be like this: object.style.width = 150 + "px"; // or "150px" directly

    2. Overall, my real problem was that I didn't know how to affect my object's CSS properties from the plugin C++ code. I found the solution here: you have to use NPN_GetValue( my object ) / NPN_GetProperty( "style" on my object) / NPN_SetProperty( "width" on the style property) to do that.