Vimeo Player не играет на vimeoPlayer.play ();в сценарии, но в консоли - PullRequest
Новая
       10

Vimeo Player не играет на vimeoPlayer.play ();в сценарии, но в консоли

0 голосов
/ 17 февраля 2019

Следующий код добавляет оверлей кнопки воспроизведения к видео на странице и добавляет обработчик щелчков для воспроизведения встроенного проигрывателя 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

1 Ответ

0 голосов
/ 17 февраля 2019

Это потому, что у вас есть два элемента с идентификатором 'playbtn'. 

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

Вы добавляете обработчик кликера к первому, но фактически нажимаете второй.Удалите дубликат, и он будет работать.

...