Youtube iFrame API 将数据从 onYouTubeIframeAPIReady 传递到 onPlayerStateChange 函数

Question

我需要初始化 Youtube iframe 视频列表

因为有很多 youtube 视频，并且列表可以从管理站点更改，我需要使其动态化，它使用类而不是 id

这是当前代码

const players = [];

onYouTubeIframeAPIReady(0);
onYouTubeIframeAPIReady(1);

function onYouTubeIframeAPIReady(index) {
    players[index] = new YT.Player($('.wow_youtube_video')[index], {
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerStateChange(event) {
    
    // play
    if(event.data == 1){
        action = 'play';
    }

    // pause
    if(event.data == 2){
        action = 'pause';
    }

    if(event.data == 1 || event.data == 2){
        dataLayer.push({
            'event': 'trackEvent',
            'eventDetails.category': 'videos',
            'eventDetails.action': action,
            'eventDetails.label': players[0].getVideoData().title // players[0] supposedly be players[index] but don't know how to pass the index balue from above function to this function
            'videoName': players[0].getVideoData().title, //video name
            'videoType': 'video on demand' //video type
        });

    }

}

如上图所示，倒数第 8 行

'eventDetails.label': players[0].getVideoData().title,

这段代码在这里

players[0] 应该是 players[index] 但我不知道如何传递索引值

players[index] = new YT.Player($('.wow_youtube_video')[index], {
        events: {
            'onStateChange': onPlayerStateChange
        }
    });

到onPlayerStateChange 函数

这样做的目的是能够携带索引值，以便代码可以是动态的，因此我只需将类名 wow_youtube_video 放在任何 youtube iframe 上即可使其工作

感谢您的帮助，谢谢

Answer 1

在函数onYouTubeIframeAPIReady添加这个

players[index] = new YT.Player($('.wow_youtube_video')[index], {
    events: {
        'onStateChange': onPlayerStateChange.bind(index)
    }
});

现在您可以通过

在onPlayerStateChange 中获得index

function onPlayerStateChange(event) {
   let index = this;
   console.log(index);
}