Vimeo 播放器无法在 vimeoPlayer.play() 上播放；在脚本中，但它在控制台中

Question

以下代码向页面上的视频添加播放按钮叠加层，并添加点击处理程序以播放嵌入式 vimeo 播放器：

const $videoDiv = $('#video-inner');
$videoDiv.append('<i class="far fa-play-circle" id="playbtn"></i>');
const playbtn = document.getElementById('playbtn');
const player = document.getElementById('video-player');
const vimeoPlayer = new Vimeo.Player(player);
playbtn.onclick = function() {
    vimeoPlayer.play();
}
vimeoPlayer.on('pause', function() {
    playbtn.style.display = "block";
});
vimeoPlayer.on('play', function() {
    playbtn.style.display = "none";
});

.fa-play-circle {
 position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20rem;
    -webkit-transform:  translate(-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;
}

.fa-play-circle:hover {
    cursor: pointer;
}

#video-inner {
    position: relative;
    border: none;
    height: 100%;
    top:0;
}

#video-outer-full {
    position: fixed;
    top: 15%;
    top: 15vh;
    height: 45%;
    height: 45vh;
    width: 100%;
    width: 100vw;
    margin: 0;
    padding: 0;
    left: 0;
    right: 0;
    background-color: black;
    z-index: 1;
}

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

<div class="video-overlay">                
  <div id="video-outer-full">
      <div id="video-inner">                            
          <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>
      </div>                    
  </div>                
</div>

这在本地主机上按预期工作，但不能实时工作。控制台中没有指示问题的输出，视觉事件小书签 (http://www.sprymedia.co.uk/article/Visual+Event+2) 显示带有正确代码 (vimeoPlayer.play();) 的点击处理程序，但点击时没有执行任何操作。

在控制台中键入 vimeoPlayer.play() 可播放视频，但 playbtn 的样式不会更改为 none。就好像在将它附加到 $videoDiv 之后与 playbtn 相关的所有内容都被忽略了。

由于除了在实际页面上无法在任何地方复制，这里是 link：https://nuclearterrortoday.org/pages/videos.php?api=1

Answer 1

这是因为您有两个元素的 ID 'playbtn'。

const playbtn = document.getElementById('playbtn');

您将答题器处理程序添加到第一个，但实际上单击了第二个。删除重复项，它将起作用。

Vimeo 播放器无法在 vimeoPlayer.play() 上播放；在脚本中，但它在控制台中

Vimeo player doesn't play on vimeoPlayer.play(); in script, but it does in console

javascript

jquery

vimeo