play() 失败，因为用户没有先与文档交互 - 使用 Vimeo API 的点击事件答案

【问题标题】：play() failed because the user didn't interact with the document first - on click event using Vimeo APIplay() 失败，因为用户没有先与文档交互 - 使用 Vimeo API 的点击事件
【发布时间】：2019-02-13 23:10:59
【问题描述】：

我假设 onclick 事件被视为与文档交互，所以不确定为什么会引发自动播放错误

Uncaught (in promise) NotAllowedError: play() failed 因为用户没有首先与文档交互。

const playbtn = document.getElementById('playbtn');
const player = document.getElementById('video-player');
const vimeoPlayer = new Vimeo.Player(player);
playbtn.onclick = function() {
  playbtn.style.display = "none";
  vimeoPlayer.play();
}
vimeoPlayer.on('pause', function() {
  playbtn.style.display = "block";
});
vimeoPlayer.on('play', function() {
  playbtn.style.display = "none";
});

i {
  position: absolute;
  color: white;
}
.fa-play-circle {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        font-size: 20rem;
        -webkit-transform:  translateX(-50%, -50%);
        -moz-transform:     translate(-50%, -50%);
        -ms-transform:      translate(-50%, -50%);
        -o-transform:       translate(-50%, -50%);
        transform:          translate(-50%, -50%);
        z-index: 2;
        color: white;
        color: rgba(255,255,255,0.75);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://player.vimeo.com/api/player.js"></script>

<div id="video-outer-full">
  <div id="video-inner">
    <i class="far fa-play-circle" id="playbtn"></i>
    <iframe id="video-player" class="video" width="560" height="315" src="https://player.vimeo.com/video/309741585" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>

【问题讨论】：

我认为这里的“文档”是指<iframe>中的文档，而不是包含您的播放按钮的文档。
您的代码没有意义，您是想更改播放器内部的播放按钮还是您自己的自定义按钮？您自己创建的视频播放器外部的按钮几乎没用。如果您将player 的所有实例更改为vimeoPlayer，您的代码就可以正常工作，因为这是您正在初始化的变量。您能否更详细地解释您要做什么？
@cb64 它是一个覆盖。这里的 CSS 并不完美，但这并不重要。我的代码对您“有意义”还是您“理解目的”与为什么在文档明显交互时会引发自动播放错误的问题无关

标签： javascript vimeo

【解决方案1】：

我在 iframe 的属性中缺少 allow="autoplay"

<iframe id="video-player" class="video" width="560" height="315" src="https://player.vimeo.com/video/309741585" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"></iframe>

【讨论】：