YouTubeIframeAPIReady()

Question

पर गोलीबारी नहीं कर रही है मैंने कई सवाल और यूट्यूब एपीआई सामानों को देखा है लेकिन मेरे जीवन के लिए यह पता नहीं लगाया जा सकता है कि क्यों YouTubeYouframeAPIReady काम नहीं कर रहा है।

<iframe id="youtube_vid" width="763" height="430" src="https://www.youtube.com/embed/dlJshzOv2cw?theme=light&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe> 

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

function callYTapi() { 

    var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
    console.log('script loaded'); 

    function onYouTubeIframeAPIReady() { 
     console.log('IframeAPI = Ready'); 
     var player = new YT.Player('youtube_vid', { 
      events: { 
       'onReady': onPlayerReady, 
       'onStateChange': onPlayerStateChange 
      } 
     }); 
    } 

    function onPlayerReady(event) { 
     event.target.playVideo(); 
    } 

    function onPlayerStateChange(event) { 
     if (event.data == YT.PlayerState.PAUSED) { 
      console.log("Paused"); 
     } 

     if (event.data == YT.PlayerState.PLAYING) { 
      console.log("Playing"); 
     } 

     if (event.data == YT.PlayerState.ENDED) { 
      end(); 
     } 
    } 
} 

मैं भरी हुई स्क्रिप्ट के लिए लेकिन Iframe तैयार या कुछ और के लिए नहीं console.log मिल

यहाँ मेरी आइफ्रेम है। कोई विचार? धन्यवाद

Answer 1

कॉलबैक फ़ंक्शन वैश्विक दायरे में होना चाहिए। बस onYouTubeIframeAPIReady और callYTapi के बाहर अन्य स्थानांतरित करें।

Answer 2

सौभाग्य से मेरे लिए, कंसोल के साथ प्रयोग करने के बाद, मेरे पास कुछ ठोस था। एक दिन पहले तक मुझे एक ही समस्या थी और पता चला कि जब मैं सिंगलटन के दायरे में था तो कैसे करना है।

var XT = XT || {}; 

window.onYouTubeIframeAPIReady = function(){ 
    setTimeout(XT.yt.onYouTubeIframeAPIReady,500); 
} 

XT.yt = { 

/* load the YouTube API first */ 
loadApi: function() { 

     var j = document.createElement("script"), 
      f = document.getElementsByTagName("script")[0]; 
     j.src = "//www.youtube.com/iframe_api"; 
     j.async = true; 
     f.parentNode.insertBefore(j, f); 
     console.log('API Loaded'); 
    }, 

/*default youtube api listener*/ 
onYouTubeIframeAPIReady: function() { 
    console.log('API Ready?'); 
    window.YT = window.YT || {}; 
    if (typeof window.YT.Player === 'function') { 
     player = new window.YT.Player('player', { 
      width: '640', 
      height: '390', 
      videoId: 'nE6mDCdYuwY', 
      events: { 
       onStateChange: XT.yt.onPlayerStateChange, 
       onError: XT.yt.onPlayerError, 
       onReady: setTimeout(XT.yt.onPlayerReady, 4000) 
      } 
     }); 
    } 
}, 


onPlayerReady: function() { 
    player.playVideo(); /* start the video */ 
    player.setVolume(1); /* set volume to 1 (accepts 0-100) */ 
}, 

onPlayerStateChange: function (e) { 
    console.log(e.data, YT.PlayerState.PLAYING, e.data === YT.PlayerState.PLAYING); 
    var video_data = e.target.getVideoData(); 

    //do something on video ends 
    if(e.data === YT.PlayerState.ENDED) 
    this.onPlayerStop(); 
}, 

onPlayerStop: function(){ 
    //console.log('video ended'); 
}, 

onPlayerError: function (e) { 
    console.log("youtube: " + e.target.src + " - " + e.data); 
}, 

init: function() { 
    this.loadApi(); 
} 

} 

XT.yt.init(); 

Answer 3

बस स्पष्ट होना, स्वीकार किए जाते हैं जवाब ऊपर इस तरह से मेरे लिए काम करने लगता है:

यहाँ क्या मेरी कोड की तरह लग रहा है (yt दस्तावेज़ से)

लोड एपीआई

var tag = document.createElement('script'); 

tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

खिड़की पर यूट्यूब के अंतर्निहित तैयार समारोह "onYouTubeIframeAPIReady" निर्दिष्ट

window.onYouTubeIframeAPIReady = this.onYTready; 

तो this.onYTready मेरा कार्य नाम है और कहीं और स्थित है। मैं अपने onYTready फ़ंक्शन को क्रोम में कंसोल लॉग/डीबगर ब्रेकपॉइंट्स की पुष्टि कर सकता हूं।

(संपादित करें) यदि आप अपने कार्य करने के लिए इस बाध्य करने के लिए चाहते हो सकता है, उदाहरण के लिए:

window.onYouTubeIframeAPIReady = this.onYTready.bind(this); 

या 'यह' एक विशेष दृश्य उपयोग किए जा रहे के बजाय खिड़की के लिए किया जाएगा ..

Answer 4

function playIframeVideo(iframe) { 
    iframe.videoPlay = true; //init state 
    iframe.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*'); 
} 

function pauseIframeVideo(iframe) { 
    iframe.videoPlay = false; //init state 
    iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*'); 
} 

$('.vc_video-bg-container').on('click', function() { 

    var iframe = $('iframe').get(0); //iframe tag 

    if (iframe.videoPlay != true) { 
     playIframeVideo(iframe); 
    } else { 
     pauseIframeVideo(iframe); 
    } 
});