如何使用HTML的object标签播放YouTube视频并触发播放事件

看起来你遇到的核心问题是跨域限制和对Object标签属性的误解，导致之前的两种方案都失效了。我来帮你拆解问题并给出可行的解决方案：

为什么之前的方案行不通？ #

• 方案1（模拟点击播放按钮）：YouTube的Embed页面和你的父页面属于不同域名，浏览器的同源策略会阻止你通过父页面的JS直接访问Object内部的DOM元素（比如那个播放按钮），所以模拟点击的操作根本无法触达内部元素。
• 方案2（修改src加autoplay=1）：Object标签是通过data属性指定资源地址的，而非src属性，所以修改src不会生效。就算你改成修改data属性，重新加载视频时，autoplay=1还得满足浏览器的自动播放规则（必须有用户交互），而且这种方式不如直接控制视频播放来得可靠。

正确的解决方案：使用PostMessage控制播放 #

YouTube的Embed页面支持通过postMessage API接收控制命令，只要你启用了JS API，就能跨域触发播放。具体步骤如下：

1. 先修改Object标签的URL，启用JS API #

在你的视频URL末尾添加enablejsapi=1参数，这样Embed页面才能响应你的控制命令：

<object id="video" width="100%" height="360" data="https://www.youtube.com/embed/{{ 'excursion_'+id+'.youtube' | translate }}?enablejsapi=1"></object>

2. 编写触发播放的JS代码 #

通过postMessage向Object的contentWindow发送播放命令：

针对Overlay点击的场景：

$('.overlay').on('click', function(){
  $(this).css('display','none');
  const videoObject = document.getElementById('video');
  // 确保能获取到内部窗口对象
  if (videoObject.contentWindow) {
    // 发送playVideo命令
    videoObject.contentWindow.postMessage(
      '{"event":"command","func":"playVideo","args":""}',
      'https://www.youtube.com' // 明确指定目标源，比用*更安全
    );
    console.log("play video");
  }
});

针对Play按钮点击的场景：

$('#play-video').on('click', function(ev) {
  ev.preventDefault();
  const videoObject = document.getElementById('video');
  if (videoObject.contentWindow) {
    videoObject.contentWindow.postMessage(
      '{"event":"command","func":"playVideo","args":""}',
      'https://www.youtube.com'
    );
  }
});

额外说明 #

• 除了playVideo，你还可以发送其他命令，比如pauseVideo暂停视频，具体可参考YouTube的Embed API相关规则。
• 一定要添加enablejsapi=1参数，否则Embed页面不会监听postMessage的命令。
• 指定postMessage的目标源（https://www.youtube.com）是最佳实践，避免向无关页面发送消息，提升安全性。

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