文章/答案/技术大牛

发布

社区首页 >问答首页 >Vimeo player不能在脚本中的vimeoPlayer.play()；上播放，但可以在控制台上播放

问Vimeo player不能在脚本中的vimeoPlayer.play()；上播放，但可以在控制台上播放
EN

Stack Overflow用户

提问于 2019-02-17 09:09:20

回答 1查看 399关注 0票数 1

下面的代码向页面上的视频添加一个播放按钮覆盖，并添加一个click处理程序来播放嵌入的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的样式不会变成none，就好像把playbtn添加到$videoDiv之后，所有跟playbtn相关的东西都被忽略了。

由于这不能在任何地方复制，只能在实际页面上复制，因此链接如下：https://nuclearterrortoday.org/pages/videos.php?api=1

javascript

jquery

vimeo

Stack Overflow用户

回答已采纳

发布于 2019-02-17 09:36:39

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

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

您将clicker处理程序添加到第一个，但实际上单击了第二个。去掉副本，它就可以工作了。

票数 1

查看全部 1 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54729235

复制

相似问题

问Vimeo player不能在脚本中的vimeoPlayer.play()；上播放，但可以在控制台上播放
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vimeo player不能在脚本中的vimeoPlayer.play()；上播放，但可以在控制台上播放EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vimeo player不能在脚本中的vimeoPlayer.play()；上播放，但可以在控制台上播放
EN