检测视频何时更改 - YouTube iFrame API答案

【问题标题】：Detect when video has changed - YouTube iFrame API检测视频何时更改 - YouTube iFrame API
【发布时间】：2016-02-11 21:24:50
【问题描述】：

我有某种滑块，背景是 YouTube 播放列表。我想知道视频什么时候发生变化，所以我可以将滑块文本更改为正确的文本。

我搜索了 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);
}

另一个好处是知道当前正在播放的视频是什么（索引）。

【问题讨论】：

嘿，我的回答有帮助吗？如有任何其他问题，请随时跟进。
还没试过，但听起来不错。
是的，有效。我创建了一个对象，将我的文本分配给播放列表中的每个视频 ID，并在每次触发 onplayerstatechange 时通过当前视频 ID 更改文本（从 stackoverflow.com/a/14778040/954867 获取 ID）

标签： javascript youtube youtube-api youtube-iframe-api

【解决方案1】：

监听玩家的onStateChange回调。

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

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

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

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

【讨论】：