Web Plugin with overlay DIV

[tienhn]

Hi All,
I am trying to build a web page with a video DIV contains a VLC EMBED plugin element. I could use either Firefox, Google Chrome, or Chromium and I would like the page to work on Windows, Linux, and Mac OSX.
For the video plug in, I stalled the latest VLC and its web plug in, and the video is working fine. However, one thing that I wish to do is to have another DIV overlay on top of the video plugin so that I can draw text or other graphics using Javascript. I use the z-index value to enforce the layer order. Here is where I got into trouble.
On the Mac OSX, the video and overlay work great on Google Chrome and Safari the plugin obey the z-index order so I can write stuffs on top of the video. On the Linux platform, I used Firefox and the video plugin is always on top no matter how I specified the z-index.
Anyone had experience with this issue and any pointers to the right direction? Greatly appreciate!

[da2424]

Do you use the windowless mode of the plugin?

Example:

Code: Select all

<embed type="application/x-vlc-plugin" windowless="true" />

[tienhn]

No I did not, should I?
Oh I guess I should try that option according to this. https://wiki.videolan.org/Documentation ... attributes

I have tried this:

Code: Select all

<div style="background-color:transparent; position:absolute; z-index:-100; width:1280px; height:320px; left:6px; top:0" id="pano1"> <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2" id="vlc1" width="1280" height="320" windowless="true" text="Waiting for Video..." toolbar="false"> </embed> </div>

Yet the z-order is still wrong, the plugin video will be always on top.
This is on Firefox, Linux (Ubuntu), VLC plugin version 2.0.8 TwoFlower

Thanks,

[tienhn]

I pulled the latest source for npapi-vlc plugin from here: http://git.videolan.org/git/npapi-vlc.git
./autogen.sh
./configure
make
sudo make install

It's all good now!!!

Still need to have windowless="true"

Thanks,

[da2424]

No I did not, should I?

Yes, because you can use, for example, some css styles and z-index, you can find some examples on http://git.videolan.org/?p=npapi-vlc.gi ... ml;hb=HEAD
Without windowless mode, z-index will not work very reliable, because in windowed mode the plugin is mostly on top.

Try it with this code:

Code: Select all

<div style="width:500px; height:400px; position:relative;"> <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2" id="vlc1" style="z-index:-1; position:absolute; left:0px; top:0px; width:100%; height:100%" windowless="true" text="Waiting for Video..." /> <div style="z-index:0; position:absolute; left:0px; top:0px; width:100%; height:100%; color:white" id="pano1"> Overlay </div> </div>