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!'); 
     }); 

目前我沒有得到任何記錄在控制檯。我有使用Vimeo的API後在其看來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")是舊的語法，而新的synax是player.play()。 當你第二個函數正在工作時，我會假設你正在使用舊的API（稱爲froogaloops）。 vimeo的github頁面包含了您可能需要遷移的所有解釋，而且非常簡單。

第二：在新的api中，似乎你混合了事件監聽器player.on('play', function() {}，當玩家玩的時候會做某些事情，用來玩玩家。

有了新的API代碼可能是這樣的：

HTML：

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

，那麼你需要在你的頁面

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

最後是你的JS的API：

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函數時只需點擊一下按鈕。

希望這有助於

編輯：

關於你的評論，我相信，你所面臨的第一個問題。

如果你的第二個函數，其中包含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> 

---

我highligh注意力轉移到你嵌入視頻的方式，我的方式之間的區別，你不應該添加?api=1無線TH新的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); 

如果您有可能couses的同一頁面上的多個VIMEO視頻屬性的ID您VIMEO I幀，例如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()來替代player.api("play")（但是如果還有別的事情發生，我不會用jQuery進行舒適的配置）：