Question

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

当控制栏的位置设置为“OVER”

时，很容易隐藏控制栏

但我的要求是：

当视频开始播放时，或当控制条的位置为“BOTTOM”

时，播放器上的鼠标未被覆盖时，应隐藏

控制栏

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

Answer 1

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

Answer 2

使用jwplayer 5完成。

您必须处理播放器的onBeforePlay，onPause，onComplete和onReady事件。

使用此HTML中的jwplayer.setup嵌入播放器。

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

Answer 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;
    }
  }

如何隐藏JWPlayer控件栏？

3 个答案: