The VideoLAN Forums

Posted: **13 Jun 2014 01:53**

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!

Posted: **13 Jun 2014 14:12**

Do you use the windowless mode of the plugin?

Example:

Code: Select all

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

Posted: **13 Jun 2014 17:47**

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,

Posted: **13 Jun 2014 19:38**

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,

Posted: **13 Jun 2014 21:03**

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>

The VideoLAN Forums

Web Plugin with overlay DIV

Web Plugin with overlay DIV

Re: Web Plugin with overlay DIV

Re: Web Plugin with overlay DIV

Re: Web Plugin with overlay DIV

Re: Web Plugin with overlay DIV