JWPlayer 8：如何禁止控制栏自动淡出？移动端播放问题求助

一、让控制栏始终显示的方案 #

1. 配置项禁用自动隐藏 #

初始化播放器时添加autohide: false配置，这是JW Player 8.x官方提供的控制栏自动隐藏开关：

jwplayer('your-player-id').setup({
  file: 'your-video-source.mp4',
  autohide: false, // 禁用控制栏自动淡出
  controls: true, // 确保控制栏默认显示
  // 其他播放器配置（如宽高、皮肤等）
});

2. CSS强制覆盖样式 #

如果配置项无效，可能是皮肤样式优先级更高，用CSS强制控制栏保持可见：

/* 强制控制栏始终显示，保持不透明 */
.jwplayer .jw-controlbar {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 移除控制栏淡出的动画效果 */
.jwplayer .jw-controlbar.jw-fade-out {
  opacity: 1 !important;
  visibility: visible !important;
}

二、移动端设置第二次点击才暂停视频 #

如果控制栏始终显示的方案无法实现，可通过监听点击事件区分点击次数，实现移动端首次点击仅显示控制栏、第二次点击才暂停：

const player = jwplayer('your-player-id');
let isFirstMobileClick = true;

// 监听播放器点击事件
player.on('click', () => {
  // 判断是否为移动端设备
  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  if (!isMobile) return;

  const playerState = player.getState();
  if (playerState === 'playing') {
    if (isFirstMobileClick) {
      // 首次点击：不暂停，重置点击状态，强制显示控制栏
      isFirstMobileClick = false;
      const controlBar = player.getContainer().querySelector('.jw-controlbar');
      if (controlBar) {
        controlBar.style.opacity = 1;
        controlBar.classList.remove('jw-fade-out');
      }
    } else {
      // 第二次点击：暂停视频，重置状态
      player.pause();
      isFirstMobileClick = true;
    }
  } else if (playerState === 'paused') {
    // 暂停状态下点击：直接播放
    player.play();
    isFirstMobileClick = true;
  }
});

// 播放状态重置点击标记
player.on('play', () => {
  isFirstMobileClick = true;
});

内容的提问来源于stack exchange，提问作者Lynob