使用Javascript在vimeo.com上與Vimeo player交互

Question

我已成功使用Froogaloop庫來監控各種網站上的嵌入Vimeo視頻播放器（對於my Chrome extension的功能）。

我想在vimeo.com上做同樣的事情，但vimeo.com網頁上的視頻播放器沒有嵌入到iframe中，因此Froogaloop無法與它們進行交互。

有人可以告訴我如何獲取當前播放時間並連接vimeo.com上的（非iframed）視頻的播放/暫停事件監聽器嗎？

Answer 1

經過一番further research我想出了以下基本的解決方案：

// Once the vimeo.com player <object> is ready: 

// find vimeo player(s) 
var vimeoPagePlayers = document.querySelectorAll('object[type*=flash][data*=moogaloop]'); 
if (vimeoPagePlayers.length == 0) { 
    return; 
} 

// attach event listeners to player(s) 
for (var i = 0; i < vimeoPagePlayers.length; i++) { 
    var player = vimeoPagePlayers[i]; 
    // sometimes .api_addEventListener is not available immediately after 
    // the <object> element is created; we do not account for this here 
    player.api_addEventListener('onProgress', 'onVimeoPageProgress'); 
    player.api_addEventListener('onPause', 'onVimeoPagePause'); 
} 

function onVimeoPagePause() { 
    // video has been paused or has completed 
} 

function onVimeoPageProgress(data) { 
    // video is playing 
    var seconds; 
    if (typeof(data) == 'number') { 
     // on vimeo.com homepage, data is a number (float) 
     // equal to current video position in seconds 
     seconds = data; 
    } 
    else { 
     // on vimeo.com/* pages, data is a hash 
     // of values { seconds, percent, duration } 
     seconds = data.seconds; 
    } 

    // do something with seconds value 
} 

上vimeo.com（未經測試），這可能不是HTML5模式的錄像。

當vimeo.com頁面通過DOM操作替換另一個播放器時，它也不起作用。我相信這些情況可以通過像MutationObserver這樣的東西來處理。