Vimeo Froogaloop API không nhận ra sự kiện

Question

Tôi đang cố gắng nhận ra sự kiện onPlay, onPause và onFinish cho vimeo bằng API froogaloop. Tôi đã thử tất cả mọi thứ tôi có thể tưởng tượng với điều này, và không có may mắn.

tôi nhận được lỗi này trên Firefox:

Và trong Chrome:

Nhập froogaloop từ CDN:

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script> 

JS của tôi:

$(function(){ 

    var vimeoPlayer = document.querySelector('iframe'); 

    $f(vimeoPlayer).addEvent('ready', ready); 

    function ready(player_id) { 

     froogaloop = $f(player_id); 

     function setupEventListeners() { 
      function onPlay() { 
       froogaloop.addEvent('play', 
       function(data) { 
        console.log('play event'); 
       }); 
      } 

      function onPause() { 

       froogaloop.addEvent('pause', 
       function(data) { 
        console.log('pause event'); 
       }); 
      } 

      function onFinish() { 
       froogaloop.addEvent('finish', 
       function(data) { 
        console.log('finish'); 
       }); 
      } 
      onPlay(); 
      onPause(); 
      onFinish(); 
     } 
     setupEventListeners(); 
    } 

}) 

HTML của tôi:

<iframe src="http://player.vimeo.com/video/3718294?api=1" width="623" height="350" frameborder="0" id="iframe-video"></iframe> 

Answer 1

Sau giờ làm việc và giờ thất vọng ... Tôi đã tìm ra giải pháp.

Vì tôi đang sử dụng ID trên iframe ... dường như API vimeo buộc bạn thêm thông số vào URL bạn đang tìm nạp (player_id = iframe-id).

Vì vậy iFrame sẽ trông như thế này:

nhờ

<iframe src="//player.vimeo.com/video/3718294?api=1&player_id=promo-vid" 
     width="623" height="350" frameborder="0" 
     id="promo-vid"> 
</iframe> 

Đặc biệt Drew Baker cho trỏ này ra: http://vimeo.com/forums/topic:38114#comment_5043696

Answer 2

Tôi nghĩ rằng bạn đang vi phạm các Same Origin Policy. Bạn sẽ nhận thấy here rằng nơi bạn đang thực hiện rất nhiều xử lý sự kiện, họ đang sử dụng các lệnh gọi froogaloop API đặc biệt.

Tôi chưa bao giờ sử dụng froogaloop vì vậy có lẽ tôi đã sai. Nhưng đó là phỏng đoán của tôi. Các lỗi dường như gợi ý rằng iframe đang cố gắng sửa đổi URL trong trình duyệt của bạn và giờ đây được cho phép bởi Same Origin. Đó là lý do tại sao API kết thúc tốt đẹp window.postMessage cho bạn.

Answer 3

Sau khi đã có một vấn đề tương tự, với Froggaloop2 - có vẻ như nếu video đó được lưu vào bộ nhớ cache, sự kiện sẵn sàng sẽ chỉ kích hoạt một lần (trên tải ban đầu). Giải pháp là để lấy iframe với thay đổi src, như:

$(iframe).attr('src', $(iframe).attr('src') + '#timestamp='+(new Date()).getTime()); 

Answer 4

Got lỗi khi tạo các yếu tố đầu khi lựa chọn các iframe với jQuery.

var iframe = $('#player1'); 
var player = $f(iframe); 

Kết quả trong

TypeError: d[f] is undefined 

Giải pháp đối với tôi là để chọn phần tử đầu tiên trong bộ chọn jQuery ID

var iframe = $('#player1')[0]; 
var player = $f(iframe);