trênYouTubeIframeAPIReady() không bắn

Question

Tôi đã xem qua rất nhiều câu hỏi và công cụ youtube api nhưng đối với cuộc sống của tôi không thể tìm ra lý do tại sao trênYouTubeIframeAPIReady không hoạt động.

Đây là iframe tôi:

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

Và kịch bản của tôi:

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(); 
     } 
    } 
} 

tôi nhận được console.log cho kịch bản nạp nhưng không phải cho khung nội tuyến sẵn sàng hay bất cứ điều gì khác. Bất kỳ ý tưởng? Cảm ơn

Answer 1

Hàm gọi lại phải nằm trong phạm vi toàn cục. Chỉ cần di chuyển onYouTubeIframeAPIReady và những người khác bên ngoài callYTapi.

Answer 2

May mắn thay cho tôi, sau rất nhiều thử nghiệm với bảng điều khiển, tôi đã có một cái gì đó cụ thể. Tôi đã có cùng một vấn đề cho đến một ngày trước và đã tìm ra cách để làm khi tôi ở trong một phạm vi đơn.

Đây là những gì mã của tôi trông giống như:

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

Chỉ cần được rõ ràng, câu trả lời được chấp nhận trên dường như làm việc cho tôi theo cách này:

tải API (từ tài liệu 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); 

định của YouTube tích hợp chức năng sẵn sàng "onYouTubeIframeAPIReady" trên cửa sổ

window.onYouTubeIframeAPIReady = this.onYTready; 

Vì vậy, this.onYTready là tên chức năng của tôi và nằm ở nơi khác. Tôi có thể xác nhận chức năng onYTready của mình có thể điều khiển nhật ký/điểm ngắt trình gỡ lỗi trong Chrome.

(chỉnh sửa), bạn có thể muốn ràng buộc này để chức năng của bạn, ví dụ:

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

hoặc 'này' sẽ cho cửa sổ thay vì một cái nhìn cụ thể mà bạn có thể được sử dụng ..

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