YouTube IFrame API playVideo()在Chrome中无法触发播放问题

• 问题复现地址：wgbh新闻页测试地址

问题现象 #

点击自定义封面图的播放按钮时，封面图会隐藏，预期逻辑是调用YouTube IFrame API提供的<player>.playVideo()方法让视频自动启动播放。
但在Chrome、Brave内核浏览器中，调用该方法后视频不会自动播放，用户必须额外点击YouTube播放器原生的播放按钮才能启动播放，整个playVideo()方法执行过程中控制台无任何报错。

相关代码逻辑 #

用户点击自定义封面的播放按钮后，会触发如下play()函数，代码设计逻辑为每500毫秒轮询调用一次playVideo()，检测到播放成功后清除定时器。视频初始状态为video cued（已载入待播放），但实际调用playVideo()后，播放器状态始终停留在unstarted（未启动），视频无法正常播放：

play () {
  console.log('Received play signal from poster')
  let playerState = this.player.getPlayerState().toString()
  const thePlayer = this.player
  console.log('Pre-play-signal state: ', PLAYER_STATES[playerState])
  let waitForPlay = setInterval(function () {
    thePlayer.playVideo()
    playerState = thePlayer.getPlayerState().toString()
    console.log('Interval play state: ', PLAYER_STATES[playerState])
    if (playerState === '1') {
      clearInterval(waitForPlay)
      console.log('Final play state: ', PLAYER_STATES[playerState])
    }
  }, 500)
}

请求响应信息 #

playVideo()触发的视频资源请求返回响应头如下：

accept-ranges: bytes
access-control-allow-credentials: true
access-control-allow-origin: https://www.youtube.com
access-control-expose-headers: Client-Protocol, Content-Length, Content-Type, X-Bandwidth-Est, X-Bandwidth-Est2, X-Bandwidth-Est3, X-Bandwidth-App-Limited, X-Bandwidth-Est-App-Limited, X-Bandwidth-Est-Comp, X-Bandwidth-Avg, X-Head-Time-Millis, X-Head-Time-Sec, X-Head-Seqnum, X-Response-Itag, X-Restrict-Formats-Hint, X-Sequence-Num, X-Segment-Lmt, X-Walltime-Ms
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"
cache-control: private, max-age=21248
client-protocol: quic
content-length: 2097152
content-type: video/webm
cross-origin-resource-policy: cross-origin
date: Wed, 08 Jun 2022 20:19:21 GMT
expires: Wed, 08 Jun 2022 20:19:21 GMT
last-modified: Tue, 07 Jun 2022 13:41:59 GMT
server: gvs 1.0
timing-allow-origin: https://www.youtube.com
vary: Origin
x-content-type-options: nosniff
x-restrict-formats-hint: None

已尝试排查方案 #

• 已使用--disable-web-security启动参数关闭浏览器安全策略测试，问题没有任何改善。

恳请各位提供可行的解决方案，非常感谢。

内容的提问来源于stack exchange，提问作者tim-gbh