jQuery के साथ एकाधिक Vimeo वीडियो लोड करना और घटनाओं का पता लगाना

Question

ठीक है, मैं पूरी तरह से अटक गया हूँ। मैं वास्तव में उम्मीद कर रहा हूं कि वहां से किसी को Vimeo's Froogaloop API के साथ Vimeo वीडियो लोड करने का अनुभव हो सकता है।

मुझे पकड़ने के लिए 'तैयार' घटना नहीं मिल रही है।

Froogaloop:

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

मेरे स्क्रिप्ट:

$.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent('http://vimeo.com/27027307') + '&width=300&callback=?', function(data){ 
    $('#video-container').html(data.html); //puts an iframe embed from vimeo's json 
    $('#video-container iframe').ready(function(){ 
     player = document.querySelectorAll('iframe')[0]; 
     $f(player).addEvent('ready', function(id){ 
      console.log('success'); 
     }); 

    }); 
}); 

वीडियो लोड ठीक। यह संदेश मैं कंसोल में हो रही है:

Uncaught TypeError: Cannot read property 'ready' of undefined 

मैं रुक जाता है पता लगाने के लिए घटना श्रोताओं उपयोग करने की आवश्यकता है, आदि मैं this post देखा था, लेकिन दुर्भाग्य से, मुख्य अंतर यह है कि मैं JSON के माध्यम से गतिशील रूप से लोड हो रहा है कर रहा हूँ है । इसके अलावा, Vimeo में कार्रवाई में Froogaloop के working example है, लेकिन jQuery के साथ नहीं।

अग्रिम धन्यवाद !!!

Answer 1

संपादित करें (अगस्त 2014): मैं हाल ही में एक jQuery Vimeo plugin, जो मूल रूप से इस समस्या को और अधिक सुंदर ढंग से हल करती है लिखा था। लेकिन समाधान, यदि आप हार्ड कोडिंग कर रहे हैं, तो यह नीचे है:

Vimeo वीडियो लोड करते समय, आपको URL में क्वेरी स्ट्रिंग &api=1 शामिल करना होगा। यह आपको एपीआई इवेंट कॉल करने की अनुमति देता है। Vimeo को &player_id=SOME_ID की आवश्यकता होती है यदि आपके पास एकाधिक वीडियो लोड होने जा रहे हैं, जिसे आईफ़्रेम लोड होने पर आईडी से मिलान करने की आवश्यकता है (या मेरे मामले में, जेएसओएन लोड होने के बाद इसे आईफ्रेम में जोड़ने के लिए jQuery का उपयोग करें, क्योंकि मैं हूं इसे गतिशील रूप से बनाते हैं।)

मुझे इस पर आधा दिन खो गया। यहां मेरा अंतिम कोड आया है, यदि यह किसी और के लिए व्यावहारिक रूप से Vimeo वीडियो लोड करने की कोशिश कर रहा है।

Vimeo के Froogaloop ढांचे

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

मेरी js

var videoData = [ 
{ 
    'title':'The Farm', 
    'id':'farmvideo', 
    'videoURL':'http://vimeo.com/27027307' 
}]; 

$.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent(videoData[0]['videoURL']) + '&api=1&player_id='+ videoData[0]['id'] +'&width=300&callback=?', function(data){ 
    $('#video-container').html(data.html); //puts an iframe embed from vimeo's json 
    $('#video-container iframe').load(function(){ 
     player = document.querySelectorAll('iframe')[0]; 
     $('#video-container iframe').attr('id', videoData[0]['id']); 
     $f(player).addEvent('ready', function(id){ 
      var vimeoVideo = $f(id); 
      console.log('success'); 
     }); 
    }); 
}); 

Answer 2

iframes के लिए तैयार ईवेंट की बजाय load ईवेंट का उपयोग करने का प्रयास करें।

तीसरी पंक्ति होगा:

$('#video-container iframe').load(function(){ 

Answer 3

मैं अपने उदाहरण "काँटेदार" और एक संस्करण एक से अधिक वीडियो froogaloop एपीआई का उपयोग कर के साथ खेल/रोक Vimeo से पता चलता बना लिया है का उपयोग करना। इसलिए यदि आप एक वीडियो शुरू करते हैं तो अन्य सभी वीडियो खेलने के लिए रोक रहे हैं: http://jsfiddle.net/nerdess/D5fD4/3/