메오 API는 내가 했나 메오 JS API를 사용하여 재생 버튼의 클릭을 감지하기 위해 노력하고있어 플레이 이벤트

Question

을 감지하지.

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

내가 콘솔에 로그인 아무것도받지 못했습니다 순간 여기 내 코드입니다. 미세 나중에 아래로 보인다 DOM에 비 메오 API를 사용하여 다른 기능이 수행을 작동하는 것 :

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

나는 바로 내가 잘못 일을 할 수 있는지 확신하지 자신의 API를 형성하는 코드를 가지고 :

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

Answer 1

두 가지 문제가 여기에있을 것 같다.

첫째, 비 메오는 최근 새로운 API (2016)의 출시했습니다, 그것은 이전의 하나와 호환이 아니다. 제공 한 코드는 두 개의 API가 혼합되어 있으며 player.api("play")은 이전 구문이고 새로운 synax는 player.play()입니다. 두 번째 기능이 작동하면서 이전 API (froogaloops라고 함)를 사용하고 있다고 가정합니다. vimeo의 github 페이지에는 마이그레이션 할 수있는 모든 설명이 포함되어 있으며 쉽게 읽을 수 있습니다.

둘째 : 새 API 내에서 플레이어가 재생 될 때이벤트 리스너와 무언가를 혼합 한 것 같습니다. play() 메서드를 사용하면 플레이어를 재생하는 데 사용합니다. 코드는 다음과 같을 수 새로운 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") 작품이 들어 두 번째 기능은, 아마 당신이 player.play() 될 새로운 API (2016)와 같은 기존의 API (froogaloops)를 사용하는 것을 의미하는 경우

.

그렇다면, 당신은 새로운 API의 구문으로 작업 할 player.on('play', function() {console.log('played the video!');});을 기대할 수 없다.당신의 소원이 다음 플레이 이벤트에 당신이 할 수 있습니다 듣고 참으로

<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 WI를 추가하지 않아야 새로운 API와 함께이 시도 새로운 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의 수도 같은 페이지에 여러 비 메오 영상이 경우 속성 쓰기 예를 vimeoPlayer1 및 vimeoPlayer2 및 대한 메오 iframe을 이드,

<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와 편협하지 않습니다).