Vimeo API не обнаруживает игровое событие

Question

Я пытаюсь обнаружить щелчок кнопки воспроизведения, используя hte vimeo js api. Вот мой код:

HTML:

<iframe id="video" src="https://player.vimeo.com/video/21777784?api=1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 

и JS:

 var iframe = document.getElementById('video'); 
     var player = $f(iframe); 

     player.on('play', function() { 
      console.log('played the video!'); 
     }); 

На данный момент я ничего авторизована консоли не получаю. У меня есть еще одна функция, используя API Vimeo позже вниз в DOM, который, кажется, работает нормально:

 jQuery("body").on("click",".watch-vid-cta",function(){ 
       player.api("play"); 
     }); 

Я получил код прямо сформировать свой API так что не уверен, что я мог делать неправильно:

https://github.com/vimeo/player.js

Answer 1

Кажется, здесь есть две проблемы.

Первый: vimeo недавно выпустил новый api (2016), и он несовместим с предыдущим. Код, который вы предоставили, представляет собой сочетание двух api, player.api("play") - это старый синтаксис, а новый синтаксис - player.play(). Поскольку вы выполняете вторую функцию, я бы предположил, что вы используете старый api (известный как froogaloops). Страница github vimeo содержит все объяснения, которые вы можете не переносить, и это очень просто.

Во-вторых: в новом api кажется, что вы смешивали прослушиватель событий player.on('play', function() {} whitch что-то делать, когда игрок играет, и метод play(), используйте для воспроизведения плеера.

С новым API код может выглядеть следующим образом:

HTML:

<button type="button" id="playButton">Play</button> 

, то вам необходимо включить API на странице

<script src="https://player.vimeo.com/api/player.js"></script> 

и, наконец, ваши JS:

var iframe = document.querySelector('iframe'); 
var player = new Vimeo.Player(iframe); 

function vimeoPlay(){ 
    player.play().then(function(){ 
    }) 
    .catch(function(error) { 
     switch (error.name) { 
      case 'PasswordError': 
       break; 
      case 'PrivacyError': 
       break; 
      default: 
       break; 
     } 
    }); 
} 

document.getElementById("playButton").onclick = function(){vimeoPlay()} 

Здесь метод player.play() имеет обещание .then(function{}), это позволяет вам что-то делать, как только игрок играет, и, таким образом, только один раз каждый раз, когда вы вызываете функцию vimeoPlay, нажав на кнопку в этом случае.

Надеется, что это помогает

EDIT:

относительно Вашего комментария, я верю, что вы столкнулись с первой проблемой.

Если ваша вторая функция, которая содержит player.api("play"), работает, это, вероятно, означает, что вы используете старый api (froogaloops), как с новым api (2016), это будет player.play().

Если это так, вы не можете ожидать, что player.on('play', function() {console.log('played the video!');}); будет работать, поскольку это синтаксис нового api.

Вы должны дважды проверить, какая версия API, который вы используете, ссылки на старые и новые, соответственно:

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script> 
    //versus 
<script src="https://player.vimeo.com/api/player.js"></script> 

Если ваше желание действительно слушать события игры, то вы можете попробовать это с новым API

<iframe id="video" src="https://player.vimeo.com/video/21777784"></iframe> 
<script src="https://player.vimeo.com/api/player.js"></script> 
<script type="text/javascript"> 
var iframe = document.querySelector('iframe'); 
var player = new Vimeo.Player(iframe); 

player.on('play', function() { 
    console.log('played the video!'); 
}); 
</script> 

---

Я Важнейшее внимание к разнице между тем, как вы встраивать видео и как я делаю, вы не должны добавить ?api=1 Wi й новый API:

<iframe id="video" src="https://player.vimeo.com/video/21777784?api=1"></iframe> 
    //versus 
<iframe id="video" src="https://player.vimeo.com/video/21777784"></iframe> 

и к разнице между тем, как вы установили переменные и я:

var iframe = document.getElementById('video'); 
var player = $f(iframe); 
    //versus 
var iframe = document.querySelector('iframe'); 
var player = new Vimeo.Player(iframe); 

Если у вас есть несколько видео Vimeo на той же странице, вы майского couses приписать идентификатор для ваших Vimeo фреймов, например vimeoPlayer1 и vimeoPlayer2 и написать

<iframe id="vimeoPlayer1" src="https://player.vimeo.com/video/21777784"></iframe> 
<iframe id="vimeoPlayer2" src="https://player.vimeo.com/video/21777784"></iframe> 

var vPlayer1 = document.getElementById("vimeoPlayer1"); 
var player1 = new Vimeo.Player(vPlayer1) 

var vPlayer2 = document.getElementById("vimeoPlayer2"); 
var player2 = new Vimeo.Player(vPlayer2) 

---

Наконец, вы можете обновить вторую функцию, заменив player.api("play") на player.play() (но я не могу с jQuery, если здесь что-то еще происходит):