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

Youtube iFrame API Passing data from onYouTubeIframeAPIReady to onPlayerStateChange function

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

因为有很多 youtube 视频并且列表可以从管理站点更改我需要使其动态化,这是使用 class 而不是 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函数

这样做的目的是为了能够携带索引值,让代码可以动态化,所以我只需要在任何youtube iframe上放上class名称wow_youtube_video就可以了作品

感谢任何帮助,谢谢

关于函数 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);
}