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

私は、コンソールにログインし、何も届かない現時点ではここに私のコードです。

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

私は、コードを持ってまっすぐに私が間違ってやって何ができるかを確認しますので、そのAPIをしませ形成：私は正常に動作しているようだこれ以降のダウンDOMでVimeoのAPIを使用して別の機能を持っている

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

Answer 1

ここには2つの問題があるようです。

最初に：vimeoは最近、新しいapi（2016）をリリースしました。これは以前のバージョンと互換性がありません。あなたが提供したコードは、2つのAPIの組み合わせです。player.api("play")は古い構文ですが、新しいsynaxはplayer.play()です。 2番目の機能が動作しているので、古いAPI（froogaloopsと呼ばれています）を使用していると仮定します。 vimeoのgithubページには、移行する可能性のあるすべての説明が含まれています。これは簡単です。

第2回：新しいAPI内で、イベントリスナーplayer.on('play', function() {}が混乱していると思われます。プレイヤーの再生時には何かを行い、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関数を呼び出すたびにこの場合はボタンをクリックするだけです。これは

EDIT役立ちます

希望：あなたのコメントについて

は、私はあなたが最初の問題に直面していることを信じて。

player.api("play")を含む2番目の関数を使用すると、古い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> 

あなたの願いは、プレーイベントに耳を傾ける確かであれば、あなたがかもしれません私はあなたがビデオを埋め込む方法と私のやり方の違いに向かってあなたの注意をhighligh新しい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を追加しないでください

<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> 

、あなたの変数を設定し、私のやり方の違いの方へ：新しいAPI番目のあなたが同じページ上で複数のVimeoのビデオを持っている場合は

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

あなたはcousesは属性のこと書き込みインスタンスvimeoPlayer1とvimeoPlayer2とするために、あなたのVimeoのアイフレームへのid、

<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()に置き換えて2番目の関数をアップグレードすることができます（ただし、ここで何か他のことが起こっている場合はjQueryとの互換性はありません）。