HTML5视频跨域控制需用window.postMessage，因同源策略禁止父页面直接访问跨域iframe中的video元素；postMessage是W3C标准方案，通过校验origin、指定targetOrigin实现安全双向通信。
HTML5视频本身不支持跨域直接控制，但可以通过window.postMessage实现安全的跨域通信，让父页面（如嵌入iframe的主站）向子页面（如托管在不同域名的视频播放页）发送播放、暂停、跳转等指令。
为什么需要PostMessage而不是直接操作？
浏览器同源策略禁止父页面直接访问跨域iframe中的video元素。即使iframe内是标准HTML5视频标签，iframe.contentWindow.document也会被拒绝访问。PostMessage是W3C标准的跨域通信机制，允许双方在明确指定目标源的前提下交换消息，既安全又可控。
基本通信流程与关键细节
通信需父子双方配合：父页面发消息，子页面监听并执行；子页面也可主动回传状态（如当前播放时间、是否暂停），形成双向控制。
-
父页面（控制端）：调用
iframe.contentWindow.postMessage(data, targetOrigin)，其中targetOrigin必须精确匹配子页面协议+域名+端口（例如"https://video.example.com"），不可用"*"（存在安全风险） -
子页面（被控端）：监听
window.addEventListener('message', handler)，并在处理前校验event.origin是否为可信来源，再解析event.data执行对应操作 -
消息格式建议统一：例如
{ type: 'play', time: 120 }或{ type: 'pause' }，便于扩展和维护
子页面中控制视频的典型实现
子页面需确保视频元素已加载完成，并绑定事件响应。以下为简化示例：
立即学习“前端免费学习笔记（深入）”；
// 子页面脚本
const video = document.getElementById('myVideo');
window.addEventListener('message', (e) => {
// 严格校验来源
if (e.origin !== 'https://main-site.com') return;
const cmd = e.data;
switch (cmd.type) {
case 'play':
video.play().catch(err => console.warn('Play failed:', err));
break;
case 'pause':
video.pause();
break;
case 'seek':
if (typeof cmd.time === 'number') video.currentTime = cmd.time;
break;
case 'volume':
if (typeof cmd.value === 'number') video.volume = Math.max(0, Math.min(1, cmd.value));
break;
}
});
常见问题与规避建议
-
视频未就绪就调用play()失败：子页面应在
video.readyState >= 4或监听canplay事件后再响应play指令；也可返回错误消息给父页面 -
移动端自动播放限制：iOS/Android要求用户手势触发播放，因此
postMessage触发的play()可能静音失败，建议先设video.muted = true再播放 -
父页面获取视频状态：子页面可定时或在关键事件（如
timeupdate、pause）中调用parent.postMessage()回传数据，父页面同样需校验event.origin
