How to hide the JWPlayer control bar?

My JWPlayer control bar position is set to "BOTTOM"

Its easy to hide the control bar when the position of the control bar is set to "OVER"

but my requirement is:

control bar should be hidden when the video starts playing or when the mouse is unhovered on the player when the posi开发者_运维百科tion of the control bar is "BOTTOM"

Whether its possible to do this in JWPlayer to hide the control bar when the position is BOTTOM ?

---

I think setting the controlbar to "bottom" is typically set to keep the controlbar visible below the player, and in order to keep it from shrinking your video, you need to add extra height to the player to compensate...which makes me think that it's not possible to hide it. If you wanted to hide it and keep it at the bottom, then keep the controlbar "over" and add the extra height to the video - that should put it below the player and hide it.

---

Done with jwplayer 5.

You must handle the onBeforePlay, onPause, onComplete and onReady events of the player.

Player is embedded using jwplayer.setup inside this HTML.

<div class="video_unique_id">
    <div id="container_unique_id">
    </div>
</div>

This is an excerpt from a jwplayer handling class I use:

var _self    = this;
var _timeout = null;
var _player  = jwplayer('container_unique_id');


// Set up the jwplayer (e.g. controlbar.position":"bottom")
_player.setup( ... );


/**
 * Fired when the player has initialized and is ready for playback.
 */
_player.onReady(
    function() {
        // Show controlbar while moving the mouse around
        $('.video_unique_id').mousemove(function() {
            if (_player.getState() === 'PLAYING') {
                _self.showControls();

                if (_timeout) {
                    window.clearTimeout(_timeout);
                }

                // Start timeout to hide controls but
                // only if playing a video
                _timeout = window.setTimeout(function() {
                    if (_player.getState() === 'PLAYING') {
                        _self.hideControls();
                    }
                }, 1500);
            }
        });

        // Show controlbar while entering player container
        $('.video_unique_id').mouseenter(function() {
            if (_player.getState() === 'PLAYING') {
                _self.showControls();
            }
        });

        // Hide controlbar while leaving player container
        $('.video_unique_id').mouseleave(function() {
            if (_player.getState() === 'PLAYING') {
                _self.hideControls();
            }
        });
    }
);

/**
 * Fired just before the player begins playing. Unlike the onPlay
 * and onBuffer events, the player will not have begun playing or
 * buffering when onBeforePlay is triggered. This event can be used
 * to prevent playback from occurring by calling the stop() function.
 */
_player.onBeforePlay(
    function() {
        _self.hideControls();
    }
);

/**
 * Fired when the player enters the PAUSED state.
 *
 * @param {Array} event Array with old and new player state
 */
_player.onPause(
    function(event) {
        _self.showControls();
    }
);

/**
 * Fired when the player has finished playing the current media.
 */
_player.onComplete(
    function() {
        _self.showControls();
    }
);

/**
 * Show all controls.
 *
 * @return void
 */
this.showControls = function()
{
    // Show control bar
    _player.getPlugin('controlbar').show();
};

/**
 * Hide all controls.
 *
 * @return void
 */
this.hideControls = function()
{
    // Hide control bar
    _player.getPlugin('controlbar').hide();
};

---

It will hide control bar in javascriopt/react jwplayer

<div class="video-player-wrapper" id="#hide-controlbar">
   <div id="container_unique_id">
  </div>
</div>


 #hide-controlbar {
    .jw-controlbar {
      display: none;
    }
  }