broadcastchannel 不能直接同步播放器实例或 dom 元素，因其 postmessage 仅支持结构化克隆，而 htmlmediaelement、audiocontext 等不可克隆；必须广播纯 json 状态（如 currenttime、paused、src），再由各窗口主动更新本地播放器，并配合 visibilitystate、readystate 和错误捕获确保安全执行。
不能靠 BroadcastChannel 直接同步播放器实例或 DOM 元素，必须用它广播“状态变更意图”，再由各窗口主动读取/更新本地播放器——共享变量只是内存快照，不是通信管道。
为什么不能把 HTMLMediaElement 或播放器实例塞进 postMessage()
BroadcastChannel 的 postMessage() 只支持结构化克隆（structured clone），而 HTMLMediaElement、AudioContext、Promise、函数等均不可克隆。尝试传入会直接报错：Failed to execute 'postMessage' on 'BroadcastChannel': An object could not be cloned.
常见错误现象：页面白屏、控制台静默失败、或只在部分浏览器触发异常但无提示。
- 所有媒体状态必须序列化为纯 JSON 可表达的数据：如
{ currentTime: 123.45, paused: false, volume: 0.8, src: "https://..." } - 不要试图广播
player.play()这类方法调用，它无法跨窗口执行 - 若使用第三方播放器（如 Video.js、hls.js），需先调用其 API 获取当前状态，再手动组装对象
onmessage 收到后，如何安全更新本地播放器
收到消息不等于能立刻调用 play() 或 currentTime = x —— 浏览器对自动播放有严格策略，且 DOM 可能未就绪。
- 先检查
document.visibilityState === 'visible'，避免在后台标签页强行播放（会被静音或拒绝） - 对
currentTime赋值前加try/catch，捕获InvalidStateError（比如媒体尚未加载元数据） - 用
player.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA判断是否可安全 seek - 若状态含
paused: false，不要立即play()，而是用player.play().catch(e => console.warn('auto-play blocked', e))并记录失败
频道名和消息结构设计要点
频道名必须全局一致且稳定，消息必须带防重放和上下文标识，否则多窗口易出现状态抖动或旧指令误触发。
- 频道名建议固定为
'media-playback-sync'，避免拼写差异（如'mediaPlaybackSync'或'media-playback'） - 每条消息必须含
timestamp和sourceTabId（可用Math.random().toString(36).substr(2, 9)生成临时 ID） - 接收端需忽略
timestamp落后于本地已处理消息的包，防止倒序更新 - 避免监听自身发的消息：虽然规范要求
event.source !== self，但 Chrome 旧版本（≤115）仍可能触发，建议显式过滤：if (event.source === self) return;
如何与 localStorage 配合做持久化 fallback
BroadcastChannel 在 Safari 无痕模式、某些 Android WebView 中可能被禁用；此时需降级到 localStorage + storage 事件，但要注意它不通知本窗口。
- 写入时：先
localStorage.setItem('media-state', JSON.stringify(state))，再channel.postMessage(...) - 读取时：所有窗口启动都从
localStorage.getItem('media-state')初始化，不等首次广播 - 监听
storage事件仅作为 BroadcastChannel 不可用时的兜底通道，且只在检测到channel.addEventListener('message', ...)失败后才启用 - 降级判断可简单用：
typeof BroadcastChannel === 'undefined' || !('postMessage' in BroadcastChannel.prototype)
真正难的不是发消息，而是每个窗口都得独立维护播放器生命周期、加载状态、用户交互权限，并在收到广播后做出符合当前上下文的响应——这要求你把“同步”理解成“协同动作”，而不是“状态镜像”。
