Can't find any event related to user hovering over the UI in web player

Support
, ,
1

Hello,

We are trying to implement some custom buttons to overlay the player UI , but we can’t find any event that will trigger when the user activates the player controls when mouse hovering over the player to show these buttons (and leaving the player too to hide them).

Using web player v 8.90.

When looking at UserInteractionEvents we only find play, pause, seek, set volume, etc. but nothing to do with hovering.

Are we looking at the wrong place?

Thanks!

2

Thanks for getting in contact !
You could use CSS in order to detect when the mouse is hovering an element, and build some logic around it.

Example with the Play button :

document.getElementsByClassName('bmpui-ui-playbacktogglebutton')[0]
.addEventListener("mouseover", function(){
  console.log("mouse over the play button")
});

In this example, some text will be printed in the console each time the mouse is over the small play button (bottom left of the UI).

You can use our CSS class reference in order to get a list of all the available classes.
Please let me know in case you have questions.

3

Hey Ludovic,

Thank you for your response.
We tried this solution but this results in ‘out of sync’ behaviour between the custom UI and the Bitmovin UI that we are using together. As best as we could we set the same time delay to hide the controls, but we still couldn’t get an exact sync.

You can see this in the following video: Screencastify

Do you have any idea how we can fix this?

In the past we worked with JWplayer and Theoplayer, and both had an event that was triggered when the UI was active and this was really useful for custom UI use cases. Maybe it is worth considering adding this in future releases.

Thanks!

4

Another approach that may solve the ‘out of sync’ issue is to subscribe directly to the show/hide events from the controlUI. These events are not exposed by default so first you should instantiate the bitmovin default UI manually - We call this approach externally managed UI.

  1. Disable the internal built-in UI first,
const config = {
  ...,
  ui: false, // disable the built-in UI
};
  1. Instantiate the default UI externally instead - through the UImanager
  var uiManager = bitmovin.playerui.UIFactory.buildDefaultUI(player);
  1. Suscribe to the hide/show events
  uiManager.currentUi.onControlsShow.subscribe(() => console.log('show'));
  uiManager.currentUi.onControlsHide.subscribe(() => console.log('hide'));

Please, be sure to add the proper sources in order to access to the UI externally

    <script src='//cdn.bitmovin.com/player/web/8/bitmovinplayer-ui.js' type='text/javascript'></script>
    <link href='//cdn.bitmovin.com/player/web/8/bitmovinplayer-ui.css' rel='stylesheet'>

Please, let us know if this works