在 Iframe 内，Youtube 播放器取消静音功能停止工作答案

【问题标题】：inside Iframe, Youtube player unmute function stops working在 Iframe 内，Youtube 播放器取消静音功能停止工作
【发布时间】：2019-03-04 22:44:29
【问题描述】：

在将此标记为重复之前，请阅读详细信息。

我让 youtube 播放器在 iframe 内自动播放 MUTED 并有一个取消静音按钮，我在按下按钮时调用 unMute()。但是我收到此错误：

取消静音失败，元素被暂停，因为用户之前没有与文档交互

这是播放器代码：

try {
      new YT.Player('ytplayer', {
        height: '100%',
        width: '100%',
        videoId: this.config.mediaId,
        playerVars: {
          modestbranding : 1,
          rel : 0,
          showinfo : 0,
          autoplay: 1,
          color: 'white',
          rel: 0,
          playsinline: 1,
          controls: 0
        },
        events: {
          onReady: this.onPlayerReady.bind(this)
        }
      });
    } catch(e) {
      showErrorScreen(e);
    }

onPlayerReady(event) {
    this.playerRef = event.target;
    this.playerRef.mute();
    this.playerRef.playVideo(); // because autoplay: 1 sometimes does not work

  }

...
const unmute = (event) => {
    playerRef.unMute();
    state.muted = false;
    updateVolumeControls();
  };

这里是页面的链接：

https://video.inpwrd.net/college-prep-dont-go-it-alone/48ebe783-bcc4-4b96-9ba5-aff3db5f13df

在 iframe 之外它可以工作。这绝对是 youtube 播放器代码中的错误。我坚持自动播放静音政策。我相信他们有这样的假设，即播放器始终位于根文档中。这是堆栈跟踪：

取消静音失败，元素被暂停，因为用户之前没有与文档交互

g.h.xk  @   base.js:6951
jya @   base.js:4586
yQ  @   base.js:4585
Fna @   base.js:3091
g.h.unMute  @   base.js:6718
a.F.(anonymous function)    @   base.js:3082
g.h.handleExternalCall  @   base.js:6698
a.C.(anonymous function)    @   base.js:3086
(anonymous) @   www-embed-player.js:526
k.la    @   www-embed-player.js:609
k.La    @   www-embed-player.js:598
ii.B    @   www-embed-player.js:594

请不要给出今天有效但明天就停止工作的骇人听闻的解决方案。

【问题讨论】：

allow="autoplay; fullscreen" 在 iframe 上修复它w3c.github.io/webappsec-feature-policy/#allowlist

标签： youtube-iframe-api

【解决方案1】：

allow="autoplay; fullscreen" 在 iframe 上修复它 w3c.github.io/webappsec-feature-policy/#allowlist –

【讨论】：