無法讀取屬性未定義「應用」 - YouTube API取得

Question

我創建了下面的代碼，以使視頻懸停播放：

var player = []; 
 
var el_number; 
 
function onYouTubePlayerAPIReady() { 
 
\t var players = $(".video"); 
 
\t for (var i = 0; i < players.length; i++) { 
 
\t \t el_number = $(players[i]).parent().parent().index(); 
 
\t \t player[i] = new YT.Player(players[i], { 
 
\t \t \t events: { 
 
\t \t \t \t 'onReady': onPlayerReady(i, el_number) 
 
\t \t \t } 
 
\t \t }); 
 
\t } 
 
} 
 
function onPlayerReady(number, elnumber) { 
 
\t $(".article:eq("+elnumber+")").on({ 
 
\t \t 'mouseover': function() { 
 
\t \t player[number].playVideo(); 
 
\t \t }, 
 
\t \t 'mouseout': function() { 
 
\t \t player[number].pauseVideo(); 
 
\t \t } 
 
\t }); 
 
}

<script src="https://www.youtube.com/iframe_api"></script> 
 
<!-- Videos look like this: --> 
 
<iframe class='video' src='https://www.youtube.com/embed/(video_id)?controls=0&showinfo=0&disablekb=1&fs=0&iv_load_policy=3&&enablejsapi=1' frameborder='0' allowfullscreen></iframe>

這工作完全正常，但裝載的一段時間後，腳本它顯示我在控制檯中的這個錯誤：

Uncaught TypeError: Cannot read property 'apply' of undefined   www-widgetapi.js:65 
    at K.g.I (www-widgetapi.js:65) 
    at W.g.l (www-widgetapi.js:114) 
    at W.g.J (www-widgetapi.js:127) 
    at S.g (www-widgetapi.js:143) 
    at k (www-widgetapi.js:95) 

我ckecked Opera和Edge沒有錯誤。禁用每個擴展後，Chrome仍然存在這個問題。這裏問題的根源是什麼？

Answer 1

我認爲這是與你的回調定義一個問題：

onPlayerReady(i, el_number) 

onPlayerReady取事件數據作爲參數。要獲得播放器，你可以調用event.target和一些數據存儲這個對象

例如內：

var player = []; 
 

 
function onYouTubePlayerAPIReady() { 
 
    var players = $(".video"); 
 
    for (var i = 0; i < players.length; i++) { 
 
    el_number = $(players[i]).parent().parent().index(); 
 
    player[i] = new YT.Player(players[i], { 
 
     events: { 
 
     'onReady': onPlayerReady 
 
     } 
 
    }); 
 
    player[i].el_number = el_number; 
 
    } 
 
} 
 

 
function onPlayerReady(event) { 
 
    console.log("event.target.el_number : " + event.target.el_number); 
 
    $(".article:eq(" + event.target.el_number + ")").on({ 
 
    'mouseover': function() { 
 
     event.target.playVideo(); 
 
    }, 
 
    'mouseout': function() { 
 
     event.target.pauseVideo(); 
 
    } 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.youtube.com/iframe_api"></script> 
 
<!-- Videos look like this: --> 
 
<iframe class='video' src='https://www.youtube.com/embed/B_hLfhccYf0?controls=0&showinfo=0&disablekb=1&fs=0&iv_load_policy=3&enablejsapi=1' frameborder='0' allowfullscreen></iframe>

你可以找到的jsfiddle here