Introduction
This document describes two ENABLE Javascript API calls that handle the z-order of the ENABLE player object, relative to the webview (browser) layer.
The ENABLE.player.getZOrder() API is used to retrieve the z-order of an ENABLE player object.
The ENABLE.player.setZOrder(zIndex) API can be used to set the z-order of an ENABLE player object.
For details on mutliple player instance support please reference to EnableJS Multiple Player Instance support.
Usage guidelines
To retrieve the z-order of a player instance, use the following code:
let player = new ENABLE.player(); // create a ENABLE player object called "player"
let zOrder = player.getZOrder();
By default, the first created player instance has a z-order value of 0, and subsequent player instances have z-order values that are 1 higher than the current highest player's z-order.
To set the z-order of a player instance, use the following code:
let player = new ENABLE.player(); // create a ENABLE player object called "player"
let zIndex = 101; // or any non-negative number
player.setZOrder(zIndex);
Player instances with higher z-order values are stacked on top of player instances with lower z-order values. If two or more player instances have the same z-order value, the order of their appearance in the is determined by the order in which they were created.
Note that previous examples assume only one ENABLE player object was created. When multiple player objects are created, it is important to specify which player object should be targeted by the z-order API. To do this, use the "getInstance()" method of the ENABLE player object to obtain a reference to the desired player object, and then call the z-order API on that object. This ensures that the z-order change is applied to the desired player object, for example:
ENABLE.player.getInstance(1).getZOrder();
ENABLE.player.getInstance(1).setZOrder(101);
The first ENABLE player object created has a instance number value of 0, and subsequent player instances have instance values that are 1 higher than the one created before it. Therefore in the example above, we are getting and then setting the z-order value of the 2nd ENABLE player object that was created, to 101.
Finally, it is important to mention that webview layer (webpage) has a z-order value of 100. Therefore by setting z-order of an ENABLE player object to a z-order value > 100, the player will sit on top the webview layer. If it is necessary to place the ENABLE video object in between two graphics layer, please refer to the workaround described in the article, H200 How to make video pane to appear to exist between 2 static graphics panes.