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