浏览器如何识别远程iframe音视频播放状态并显示标题栏提示？

当通过iframe加载YouTube、Vimeo、CNN等远程站点的媒体资源进行播放时，浏览器标题栏会显示播放状态，且支持点击标题栏实现静音。请问实现该提示功能的编码方法是什么？

我研究了以下几种方法，但由于媒体资源为远程插入，无法确定应采用何种监听流程来获取播放状态：

• window.navigator.mediaSession
• mediaStream()

我想要实现如下概念性逻辑：

const browserNoticePlaying = document.addEventListener("browserNoticeEvent", function(e) {
  if( e.playState === "playing" ) {
    return true;
  }else{
    return false;
  }
});

if( browserNoticePlaying ) {
  $("#container").html("<h3>This is the thing to see</h3>");
}

由于iframe加载的是跨域远程媒体，浏览器同源策略会限制直接访问跨域iframe的DOM和事件，因此mediaStream()或常规事件监听无法直接获取播放状态。要实现浏览器标题栏的媒体播放状态提示，需分场景处理：

1. 针对提供官方嵌入API的平台（YouTube、Vimeo等） #

这类平台都开放了JavaScript嵌入API，可通过API监听播放状态，再结合navigator.mediaSession控制浏览器标题栏提示：

YouTube 示例 #

// 加载YouTube iframe API脚本
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
document.querySelector('script').parentNode.insertBefore(tag, document.querySelector('script'));

let player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerStateChange(event) {
  if (event.data === YT.PlayerState.PLAYING) {
    // 配置媒体会话，触发浏览器标题栏提示
    if ('mediaSession' in navigator) {
      navigator.mediaSession.metadata = new MediaMetadata({
        title: '目标视频标题',
        artwork: [{ src: '视频封面地址', sizes: '96x96', type: 'image/jpeg' }]
      });
      // 绑定标题栏控制事件
      navigator.mediaSession.setActionHandler('play', () => player.playVideo());
      navigator.mediaSession.setActionHandler('pause', () => player.pauseVideo());
      navigator.mediaSession.playbackState = 'playing';
    }
    // 执行自定义逻辑
    $("#container").html("<h3>This is the thing to see</h3>");
  } else if ([YT.PlayerState.PAUSED, YT.PlayerState.ENDED].includes(event.data)) {
    if ('mediaSession' in navigator) {
      navigator.mediaSession.playbackState = 'paused';
    }
  }
}

Vimeo 示例 #

// 加载Vimeo Player脚本
const script = document.createElement('script');
script.src = "https://player.vimeo.com/api/player.js";
document.body.appendChild(script);

script.onload = () => {
  const player = new Vimeo.Player('player');
  player.on('play', () => {
    if ('mediaSession' in navigator) {
      navigator.mediaSession.metadata = new MediaMetadata({
        title: 'Vimeo视频标题',
        artwork: [{ src: '视频封面地址', sizes: '96x96' }]
      });
      navigator.mediaSession.playbackState = 'playing';
      navigator.mediaSession.setActionHandler('pause', () => player.pause());
    }
    $("#container").html("<h3>This is the thing to see</h3>");
  });
  
  player.on('pause', () => {
    if ('mediaSession' in navigator) {
      navigator.mediaSession.playbackState = 'paused';
    }
  });
};

2. 针对无官方API的平台（如CNN等） #

这类场景受同源策略限制，无法直接获取iframe内媒体状态，可尝试两种间接方案：

• 音频检测：使用AudioContext结合AnalyserNode监听页面音频输出，判断是否有媒体在播放，但无法区分音频来源，也无法精确获取播放/暂停状态。
• 用户交互关联：监听iframe的点击事件（若允许），推测用户触发了播放操作，但可靠性较低。

核心说明 #

• navigator.mediaSession是实现浏览器标题栏播放提示的核心，Chrome、Edge、Firefox等现代浏览器均支持该API。
• 跨域场景必须依赖平台官方API获取播放状态，同源策略禁止直接访问跨域iframe内部元素。

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