Display controlbar only when mouseover - Jwplayer 7.1.1

Question

I want to display the controlbar only on mouseover event. I was able to achieve this in Jwplayer 7.0.3 using something like this:

var controlbarDiv = playerFrame.querySelectorAll('.jw-controls .jw-controlbar');
playerFrame.onmouseout = function () {
  playerFrame.className += ' ' + 'jw-flag-user-inactive';
}
controlbarDiv[0].onmouseover = function() {
  playerFrame.classList.remove('jw-flag-user-inactive');
}

The player (playerFrame) had its own mouseover to remove the user-inactive class, but now, in 7.1.1, the mouseover event is not triggered. If I add it to my playerFrame, it would behave very strange, but still won't display the controlbar. Any ideas to what change might cause this?

Thanks.

LE: I added these lines

playerFrame.onmouseout = function() {
  if (!playerFrame.classList.contains('jw-flag-user-inactive')) {
    playerFrame.className += ' ' + 'jw-flag-user-inactive';
  }
}
playerFrame.onmouseover = function() {
  if (playerFrame.classList.contains('jw-flag-user-inactive')) {
    playerFrame.classList.remove('jw-flag-user-inactive');
  }
}

This works in Chrome and Safari, but it doesn't in Firefox. In Firefox if I quickly move out and in again, my mouseover event does not trigger. If, however, I leave 2-3 seconds between events, the mouseover event triggers. Seems like the mouseover events in Firefox triggers only when hovering the controlbar.

Answer 1

While the update doesn't come with a plausible solution, we've got to make it work.

So, I did so:

var targetId = 'player';

$jwplayer(targetId).onReady(function(){

    this.onPlay(callbackOnPlay);

});

var callbackOnPlay = function(){

    var player = $('#' + targetId),
    controlbar = (player.length) ? player.find('.jw-controls') : $('.jw-controls');

    player.onPlay()

    if (player.length && controlbar.length) {

        //Delay 2s
        setTimeout(function() {
           controlbar.fadeOut();
        }, 2000);

        //Add hover event
        player.hover(
           function() {
              controlbar.fadeIn();
           }, function() {
              controlbar.fadeOut();
           }
        );

    }

};