使用youtube-iframe，playVideo()方法确实以Chrome启动视频(在Safari和FF中工作)

Question

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

单击“海报图像播放”按钮时，海报图像将消失，视频应该开始播放(由<player>.playVideo()从API触发)。

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

用户单击在此代码段(不是活动)中触发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标志打开浏览器，但没有区别。

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

Answer 1

当我评论你的问题时，我也遇到了同样的问题，包括Chrome和Edge。火狐就不行了(我还没有安装更多的浏览器，所以我不知道Safari、Opera等等)。

经过一天的搜索，我得到了一个问题，至少对我来说，是一些浏览器(如Chrome和Edge)不允许通过一个“外部”命令，即javascript函数，启动一个非静音(即，通过外部命令复制声音跟踪和视频)的YouTube视频。

因此，他们不允许在页面加载时自动播放视频，或者通过单击不是YT播放机的“本地”控件来启动它。据我所知，这种行为是为了防止广告或浏览器用户不想在未经其明确同意的情况下启动的任何东西。

这些浏览器允许这样的情况：

如果视频是静音的，则

• 自动播放(或由外部命令/脚本播放)；如果用户以前有某种交互(单击、点击等)，则由外部命令(或脚本)播放未静音的视频。与YT的视频播放器。

我不是一个超级专家，顺便说一下，你应该编辑你的代码，以便加载带有“静音”状态的视频播放器(当音量图标上有斜杠/条时，很容易识别它)。

我认为这可以通过添加以下一行来实现：

thePlayer.mute();

在调用playVideo()函数或在playerVars构造函数(playerVars部分)中添加键区之前：

'mute' : 1

注意:我很想静音视频，检查它的状态，一旦它开始使用函数player.unMute() (在您的例子中是thePlayer.unMute())。

不幸的是，这个技巧不起作用，也就是说，如果Chrome和Edge检测到用户没有与播放器进行任何交互，您可以调用unMute()函数，视频就会停止播放(！)。

希望这能有所帮助