javascript - 检测视频何时发生更改 - YouTube iFrame API

Question

我有某种 slider ，后台有 YouTube 播放列表。我想知道视频何时更改，以便我可以将 slider 文本更改为正确的文本。

我搜索了 API 页面 ( https://developers.google.com/youtube/iframe_api_reference#Events )，但似乎找不到视频更改时触发的事件。有吗？

到目前为止，这是我的代码。

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

window.player;
var player;

var playlistVideos = new Array();
jQuery('#playlistSlider span').each(function(){
    playlistVideos.push(jQuery(this).html());
})

//console.log(playlistVideos)

function onYouTubePlayerAPIReady() {
    player = new YT.Player('playlistSlider', {
        height: '390',
        width: '640',
        loadPlaylist:{
            listType:'playlist',
            list:playlistVideos,
            index:parseInt(0),
            //suggestedQuality:'small'
        },
        events: {
            'onReady': onPlayerReady,
            //'onStateChange': onPlayerStateChange
        },
    });
}
function onPlayerReady(event) {
    event.target.loadPlaylist(playlistVideos);
    event.target.mute();
    event.target.setLoop(true);
}

还有一个好处就是知道当前正在播放的视频(索引)是什么。

Answer 1

聆听玩家的onStateChange回调。

events: {
    'onReady': onPlayerReady,
    'onStateChange': onPlayerStateChange
}

如果事件值为0，则视频已结束

function onPlayerStateChange(event) {
    if (event.data == 0) {
        // video ended
    }
}

要了解当前播放视频的索引，请保留变量 index最初设置为 0。当当前视频结束并加载下一个视频时，增加 index一个。 index值将指向 playlistVideos 中的当前视频.