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

Question

我有某种滑块，背景是 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);
}

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

Answer 1

监听玩家的 onStateChange 回调。

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

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

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

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

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

Detect when video has changed - YouTube iFrame API

javascript

youtube

youtube-api

youtube-iframe-api