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>

这可以在localhost上正常运行，但无法实时运行。控制台中没有输出来指示问题，Visual Event书签（http://www.sprymedia.co.uk/article/Visual+Event+2）使用正确的代码（vimeoPlayer.play（）;）显示了单击处理程序，但是单击时没有任何执行。

在控制台中键入vimeoPlayer.play（）可以播放视频，但是playbtn的样式不会更改为无。好像将playbtn附加到$ videoDiv之后的所有相关内容都将被忽略。

由于无法复制，只能在实际页面上复制，因此这里是链接：https://nuclearterrortoday.org/pages/videos.php?api=1

Answer 1

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

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

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

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

1 个答案: