以下代码在页面上的视频中添加了一个播放按钮覆盖，并添加了一个单击处理程序来播放嵌入式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>这在localhost上按预期工作，但不能正常工作。控制台中没有输出来指示问题，Visual Event bookmarklet（http://www.sprymedia.co.uk/article/Visual+Event+2）显示具有正确代码的点击处理程序（vimeoPlayer.play（）;）但是没有任何内容在点击时执行。
在控制台中键入vimeoPlayer.play（）会播放视频，但playbtn的样式不会更改为无。就好像忽略了将其附加到$ videoDiv后与playbtn相关的所有内容。
由于这不能在任何地方复制，而是在实际页面上，这里是链接：https://nuclearterrortoday.org/pages/videos.php?api=1
这是因为你有两个id为'playbtn'的元素。
const playbtn = document.getElementById('playbtn');
您将clicker处理程序添加到第一个，但实际上是单击第二个。删除副本，它将工作。