使用 youtube-iframe-api，playVideo() 方法会在 Chrome 中启动视频（适用于 Safari 和 FF）答案

【问题标题】：Using the youtube-iframe-api, the playVideo() method does start the video in Chrome (works in Safari and FF)使用 youtube-iframe-api，playVideo() 方法会在 Chrome 中启动视频（适用于 Safari 和 FF）
【发布时间】：2022-11-05 19:29:14
【问题描述】：

问题可以在这里看到：https://www.wgbh.org/news/local-news/2022/06/07/housing-is-in-short-supply-heres-why-that-matters

当点击海报图片播放按钮时，海报图片消失，视频应该开始播放（由 API 中的<player>.playVideo() 触发）。

但是，在 Chrome（和 Brave）中，用户还必须单击 YT 原生播放按钮。 playVideo() 方法没有显示错误。

用户点击触发了这段代码 sn-p 中的play() 函数（不直播），我每半秒调用一次 playVideo() 。初始视频状态是“视频提示”，但之后，状态永远不会从“未启动”改变，视频永远不会播放。

     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 标志打开的浏览器，但没有区别。

任何帮助，将不胜感激。谢谢。

【问题讨论】：

我有同样的问题，只是 Chrome 和 Edge，而不是 Firefox

标签： javascript youtube-iframe-api

【解决方案1】：

当我对您的问题发表评论时，我遇到了与 Chrome 和 Edge 相同的问题。不是 Firefox（我还没有安装更多的浏览器，所以我不知道 Safari、Opera 等...）。
经过一天的搜索，我发现问题是，至少对我而言，某些浏览器（如 Chrome 和 Edge）不允许启动未静音的 YouTube 视频（即与视频一起再现音轨）通过“外部”命令，即通过 javascript 函数。
因此，他们不允许在加载页面时自动播放视频，或者通过单击不是 YT 播放器的“本机”控件的内容来启动视频。据我了解，这种行为是为了阻止广告或浏览器用户不希望在未经他/她明确同意的情况下启动的任何内容。
这些浏览器允许这些情况：

如果视频静音，则自动播放（或根据您的情况通过外部命令/脚本播放）；
如果用户之前曾与 YT 视频播放器进行过某种交互（单击、点按等），则通过外部命令（或脚本）播放未静音的视频。

我不是超级专家，顺便说一句，您应该编辑您的代码，以便以“静音”状态加载视频播放器（当音量图标上有斜杠/条时，很容易识别它）。
我想这可以通过添加这一行来获得：

thePlayer.mute();

在调用 playVideo() 函数之前，或者在 YT 播放器构造函数（playerVars 部分）中添加密钥对：

'mute' : 1

请注意这一点：我很想将视频静音，检查它的状态，一旦它开始使用功能 player.unMute() 静音它（在你的情况下是 thePlayer.unMute() ）。
不幸的是，这个技巧不起作用，即如果 Chrome 和 Edge 检测到用户没有与播放器进行任何交互，当您调用 unMute() 函数时，视频将停止播放 (!!!)。
希望这可以帮助

【讨论】：