弹窗内amp-story-player无法加载视频 如何在模态框显示时触发播放？

问题核心原因 #

当父元素处于display: none状态时，amp-story-player初始化过程中无法读取到正确的布局尺寸，会默认跳过资源加载和初始化流程。调整浏览器窗口时会触发播放器内置的resize监听逻辑，播放器才会重新检测自身尺寸、启动内容加载。

可行解决方案 #

方案1：调用播放器官方API主动加载 #

模态框显示逻辑执行完成后，直接调用amp-story-player实例的load()方法触发内容加载，需要自动播放时可追加调用play()方法：

// 模态框显示逻辑
const modal = document.querySelector('#你的模态框ID')
modal.style.display = 'flex'

// 获取播放器实例并手动触发加载
const storyPlayer = document.querySelector('amp-story-player')
if (storyPlayer && typeof storyPlayer.load === 'function') {
  storyPlayer.load()
  // 需自动播放则取消下方注释
  // storyPlayer.play()
}

方案2：手动触发resize事件兼容旧版本 #

如果使用的是旧版本播放器不支持主动调用load()方法，可以手动触发一次窗口resize事件，模拟浏览器窗口调整的行为触发播放器重绘加载：

// 模态框显示后执行
window.dispatchEvent(new Event('resize'))

方案3：修改模态框隐藏逻辑避免尺寸读取失败 #

无需修改JS逻辑，将模态框初始隐藏的实现方式从display: none替换为透明度+可见性控制，保证播放器初始化时可以正常读取到自身尺寸：

/* 模态框初始隐藏状态 */
.modal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  left: -9999px;
  top: -9999px;
  transition: opacity 0.3s ease;
}

/* 模态框显示状态 */
.modal.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  left: 0;
  top: 0;
  display: flex;
  /* 其余模态框布局样式 */
}

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