视频移除后返回页面无法重现的问题排查与修复咨询

问题原因 #

你的removePlayerHandler函数在退出容器时，直接将视频播放器元素从DOM中彻底移除了，但后续再次进入对应容器时，没有重新初始化播放器的逻辑，导致视频无法重新渲染出来。而正常示例的实现逻辑中，退出时只是隐藏播放器而非彻底删除，或者每次进入容器都会重新创建播放器实例，因此能正常重现视频。

修复方法 #

方案1：改为隐藏播放器而非移除 #

修改removePlayerHandler函数，将元素移除操作改为隐藏样式设置，进入容器时再恢复显示：

// 修改退出时的处理函数
function removePlayerHandler() {
  const player = document.getElementById('video-player');
  if (player) {
    player.style.display = 'none';
  }
}

// 修改进入容器时的处理函数
function enterContainerHandler() {
  const player = document.getElementById('video-player');
  if (player) {
    player.style.display = 'block';
    // 可选：如果需要重新播放，调用load和play方法
    player.load();
    player.play();
  } else {
    // 若播放器不存在，重新创建并添加到容器
    const newPlayer = document.createElement('video');
    newPlayer.id = 'video-player';
    newPlayer.src = '你的视频源地址';
    // 添加必要的属性和事件监听（比如播放按钮绑定）
    document.querySelector('.target-container').appendChild(newPlayer);
  }
}

方案2：彻底移除后，进入时重新初始化播放器 #

如果必须要移除播放器元素，就在每次进入容器时，重新执行播放器的初始化逻辑：

// 保留原removePlayerHandler的移除逻辑
function removePlayerHandler() {
  const player = document.getElementById('video-player');
  if (player) {
    player.remove();
  }
}

// 封装播放器初始化函数
function initPlayer(container) {
  const player = document.createElement('video');
  player.id = 'video-player';
  player.src = '你的视频源地址';
  // 添加播放按钮的点击事件绑定等逻辑
  container.appendChild(player);
}

// 修改进入容器时的处理函数
function enterContainerHandler() {
  const container = document.querySelector('.target-container');
  const existingPlayer = container.querySelector('#video-player');
  if (!existingPlayer) {
    initPlayer(container);
  }
  // 显示容器并触发播放逻辑
  container.style.display = 'block';
}

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