Android中IFrame Player API进度条不显示播放时长问题求助

以下是针对该问题的排查和解决步骤：

1. 检查WebView核心配置 #

确保Android WebView开启了必要功能，否则播放器控件可能无法正常渲染：

• 启用JavaScript：

  webSettings.setJavaScriptEnabled(true);
  

• 允许DOM存储（播放器状态保存依赖此设置）：

  webSettings.setDomStorageEnabled(true);
  

• 关闭媒体播放的用户手势限制（若自动播放已正常，此步骤可能已完成，仍需确认）：

  webSettings.setMediaPlaybackRequiresUserGesture(false);
  

2. 调整YouTube播放器参数 #

在IFrame API初始化代码中，显式配置播放器控件相关参数，避免默认行为异常：
修改playerVars部分：

playerVars: {
  'playsinline': 1,
  'controls': 1, // 强制开启控件，显式声明避免隐式异常
  'showinfo': 1, // 强制显示视频信息（包含时间数据）
  'modestbranding': 0 // 禁用简约品牌模式，防止控件被简化
}

3. 手动监听时间更新（可选） #

若自带控件仍不显示时间，可通过API监听播放进度，手动在页面渲染时间：
在播放器初始化的events配置外，添加定时更新逻辑：

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    // 原有配置...
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
  // 每秒更新一次时间数据
  setInterval(function() {
    if (player.getPlayerState() === YT.PlayerState.PLAYING) {
      var currentTime = Math.floor(player.getCurrentTime());
      var duration = Math.floor(player.getDuration());
      var remainingTime = duration - currentTime;
      // 将时间渲染到页面指定元素，示例：
      // document.getElementById('current-time').textContent = formatTime(currentTime);
      // document.getElementById('remaining-time').textContent = formatTime(remainingTime);
    }
  }, 1000);
}

// 辅助函数：将秒数转为MM:SS格式
function formatTime(seconds) {
  var mins = Math.floor(seconds / 60);
  var secs = seconds % 60;
  return mins + ':' + (secs < 10 ? '0' + secs : secs);
}

4. 调整WebView的User-Agent #

部分场景下，YouTube会根据User-Agent调整播放器界面，可设置兼容的UA：

webSettings.setUserAgentString("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36");

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