'youtube player api with multiple player don't refresh images

i want to use 15-20 videos each with a seekTo different to other, my problem is when videos is loaded the picture on the somes player remain black , image don't showup, my plan is to have the picture stop at "seekTo" for each and showing the image at seekTo, actually some still turning even i create pause and "setTimeout 6000", maybe some of you know this issue ?

thanks for your help here me code for two players :

// Video 0 ///////////////////////
let section = {
    start: 25,
    end: 70
};
let player;
function onPlayerReady(event) {
      progressBarmove(); //load progress bar
      player.mute();
      event.target.seekTo(section.start - 4);//frame start//////////////////////////////
      player.playVideo(); 
      setTimeout(pauseVideo, 6000);
}
let timeout = null;
let timeout_2 = null;
function onPlayerStateChange(event) {  

    if (event.data == YT.PlayerState.PLAYING && player.getCurrentTime() < (section.start + 2)) {
        let timerest = player.getCurrentTime();
        console.log("Current time player 0: "+ timerest);
        timeout = setTimeout(pauseVideo, (section.end - section.start) * 1000);//frame stop - le start !!////////////////////////////
    }
    else if(event.data == YT.PlayerState.PLAYING)
    {
        let timerest = player.getCurrentTime();
        clearTimeout(timeout);
        console.log("clear timeout");
        console.log(("temp restant player0: "+ (section.end - timerest)) );
        if(timeout_2 !== null)
        {
            clearTimeout(timeout_2);
            console.log("clear timeout_2");
        }
        timeout_2 = setTimeout(pauseVideo, (section.end - timerest) * 1000);
        console.log(("temp restant player0: "+ (section.end - timerest)) );
        console.log("clear timeout_2 value: "+timeout_2);
        console.log("clear timeout value: "+timeout);
    }
    if (event.data == YT.PlayerState.PAUSED) {
        let timerest = player.getCurrentTime();
        console.log("Current time player 0: "+ timerest);
    }
}
function pauseVideo() {
    player.seekTo(section.start);//frame start    
    player.playVideo();  
    setTimeout(player.pauseVideo(),  1000);
    player.unMute();
}
///-------------------------------------------------------------------------------///

// Video 1 ///////////////////////
let section1 = {
    start: 74,
    end: 160
};
let player1;
function onPlayerReady1(event) {
      player1.mute();
      event.target.seekTo(section1.start - 4);//frame start//////////////////////////////
      player1.playVideo();
      setTimeout(pauseVideo1, 6000);      
}
let timeout1 = null;
let timeout1_2 = null;
function onPlayerStateChange1(event) {  

    if (event.data == YT.PlayerState.PLAYING && player1.getCurrentTime() < (section1.start + 2)) {
        let timerest = player1.getCurrentTime();
        console.log("Current time player 1: "+ timerest);
        timeout1 = setTimeout(pauseVideo1, (section1.end - section1.start) * 1000);//frame stop - le start !!////////////////////////////
    }
    else if(event.data == YT.PlayerState.PLAYING)
    {
        let timerest = player1.getCurrentTime();
        clearTimeout(timeout1);
        console.log("clear timeout1");
        console.log(("temp restant player1: "+ (section1.end - timerest)) );
        if(timeout1_2 !== null)
        {
            clearTimeout(timeout1_2);
            console.log("clear timeout1_2");
        }
        timeout1_2 = setTimeout(pauseVideo1, (section1.end - timerest) * 1000);
        console.log(("temp restant player1: "+ (section1.end - timerest)) );
        console.log("clear timeout1_2 value: "+timeout1_2);
        console.log("clear timeout1 value: "+timeout1);
    }
    if (event.data == YT.PlayerState.PAUSED) {
        let timerest = player1.getCurrentTime();
        console.log("Current time player 1: "+ timerest);
    }
}
function pauseVideo1() {
    player1.seekTo(section1.start);//frame start    
    player1.playVideo();  
    setTimeout(player1.pauseVideo(),  1000);
    player1.unMute(); 
}



////////////////////////////
///and when ready //////////
////////////////////////////



//Render Video
function onYouTubeIframeAPIReady() {    
    player = new YT.Player('player', {
        height: '360',
        width: '350',
        videoId: 'n_H_YMPlEkY',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
    player1 = new YT.Player('player1', {
        height: '360',
        width: '350',
        videoId: 'n_H_YMPlEkY',
        events: {
            'onReady': onPlayerReady1,
            'onStateChange': onPlayerStateChange1
        }
    });
}
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source