如何隐藏 JWPlayer 控制栏？答案

【问题标题】：How to hide the JWPlayer control bar?如何隐藏 JWPlayer 控制栏？
【发布时间】：2018-07-18 17:28:04
【问题描述】：

我的 JWPlayer 控制栏位置设置为“BOTTOM”

控制栏位置设置为“OVER”

时，隐藏控制栏很容易

但我的要求是：

当控制栏的位置为“BOTTOM”

时，当视频开始播放或鼠标悬停在播放器上时，控制栏应隐藏

是否可以在 JWPlayer 中执行此操作以在位置为 BOTTOM 时隐藏控制栏？

【问题讨论】：

标签： jwplayer

【解决方案1】：

我认为将控制栏设置为“底部”通常是为了让控制栏在播放器下方可见，并且为了防止它缩小您的视频，您需要为播放器添加额外的高度来补偿......让我觉得不可能隐藏它。如果您想隐藏它并将其保持在底部，则将控制栏保持在“上方”并为视频添加额外的高度 - 这应该将其放在播放器下方并隐藏它。

【讨论】：

【解决方案2】：

用 jwplayer 5 完成。

您必须处理玩家的onBeforePlay、onPause、onComplete 和onReady 事件。

播放器是使用 jwplayer.setup 嵌入到这个 HTML 中的。

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

这是我使用的 jwplayer 处理类的摘录：

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();
};

【讨论】：

【解决方案3】：

它会隐藏javascriopt/react jwplayer中的控制栏

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


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

【讨论】：