'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 |
|---|
