iframe播放视频覆盖父页面MediaSession数据，如何阻止该行为？

这是预期设计吗？ #

是的，这属于浏览器的预期行为。MediaSession API 绑定在顶级浏览上下文（即父页面）上，当页面内任意媒体元素（包括iframe中的）成为活跃播放源时，浏览器会自动更新全局的MediaSession元数据：

• 如果iframe内的视频未显式设置MediaSession metadata，浏览器会尝试提取视频文件自身的内嵌元数据（如标题、封面），或使用默认占位内容覆盖父页面的设置；
• 核心逻辑是让系统媒体UI始终关联当前正在播放的内容，保证用户看到的信息与播放状态匹配。

如何阻止iframe覆盖父页面的MediaSession数据？ #

根据iframe是否处于你的可控范围，可采用两种方案：

1. 若iframe为自有/可控资源 #

在iframe代码中显式禁用自动更新，或设置空的MediaSession元数据：

// 在iframe内部执行
navigator.mediaSession.metadata = null;

// 或者阻止媒体播放时的默认MediaSession关联
const video = document.querySelector('video');
video.addEventListener('play', (e) => {
  e.stopPropagation();
});

2. 若iframe为第三方/不可控资源 #

在父页面监听MediaSession的metadatachange事件，检测到元数据被篡改时，重新恢复父页面的原始设置：

// 保存父页面初始的MediaMetadata配置
const originalMeta = new MediaMetadata(opts);

// 监听元数据变更
navigator.mediaSession.addEventListener('metadatachange', () => {
  const currentMeta = navigator.mediaSession.metadata;
  // 通过标题、封面等字段判断是否为iframe修改的内容
  if (!currentMeta || currentMeta.title !== originalMeta.title) {
    // 恢复父页面的元数据
    navigator.mediaSession.metadata = originalMeta;
  }
});

注意：这种方案属于“补救式”处理，可能会出现短暂的元数据闪烁（先显示iframe内容再切回父页面设置），但能确保最终显示父页面指定的媒体信息。

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