EDIT – 2016-06-25
(J’ai retiré ma mise à jour du 16 juin, car elle n’était plus pertinente.
J’ai quitté mon OP ci-dessous …)

J’ai passé encore 4 heures à ce sujet aujourd’hui.
Voici la situation maintenant:

Ma fonction fonctionne pour deux liens.
Les parameters vidéo sont définis dans un tableau.
Les deux autres liens ne fonctionnent pas.

J’ai un Uncaught TypeError: thisPlayer.loadVideoById is not a function pour les liens n ° 3 et n ° 4.
MAIS LA MÊME fonction fonctionne bien pour les liens n ° 1 et n ° 2.

• Portée variable: this.remove n’est pas une fonction
• Les événements de clic ne fonctionnent pas dans Chrome, mais ils sont déclenchés lorsque nous l’exécutons manuellement à partir de la console.
• Comment puis-je soumettre un formulaire en utilisant la méthode get dans jQuery
• Electron – Erreurs jQuery
• Changer le contenu div via jQuery avec le contenu d’un autre fichier html

On dirait que les objects youtube ne sont définis que pour les deux premiers.
POURQUOI?

Veuillez regarder de près la console sur ce lien en direct:
https://www.bessetteweb.com/?p=youtube-video-test
J’ai inséré BEAUCOUP de messages console.log pour que tout soit clair.

Voici mon code actuel:

 // Global variable for the player var player = []; var statePlaying=false; playerArr = [{ linkID:"link0", divID:"player1", ytID:"5V_wKuw2mvI", // Heavy metal playlist start:20, end:30 }, { linkID:"link1", divID:"player2", ytID:"u9Dg-g7t2l4", // Disturbed start:10, end:20 }, { linkID:"link2", divID:"player3", ytID:"39b5v3-d6ZA", // Maiden start:30, end:40 }, { linkID:"link3", divID:"player4", ytID:"z8ZqFlw6hYg", // Slayer start:120, end:136 }]; // This function gets called when API is ready to use function onYouTubePlayerAPIReady() { // Binding events loop console.log("playerArr.length: "+playerArr.length); for(i=0;ii: "+i); var playButton = document.getElementById(playerArr[i].linkID); console.log("playButton.id: "+playButton.id); var thisArr = playerArr[i]; console.log("playerArr[i] object (below): "); console.log(thisArr); playButton.addEventListener("click", function() { thisLinkID = $(this).attr("id").replace("link",""); console.log(""); console.log("------------------"); console.log("Link #"+(parseInt(thisLinkID)+1)+" clicked."); console.log("------------------"); var ytID = playerArr[thisLinkID].ytID; var start = playerArr[thisLinkID].start; var end = playerArr[thisLinkID].end; var thisPlayer = new YT.Player(playerArr[thisLinkID].divID); console.log("ytID: "+ytID); console.log("start: "+start); console.log("end: "+end); console.log(""); console.log("Below are the google ads, blocked by AdBlocker."); $("#ytplayerModal").css({"display":"block"}); $("#ytplayerModal").animate({"opacity":"0.7"},1000,function(){ console.log(""); console.log("player show()"); $(".ytplayer").show(); console.log("Youtube player object:"); console.log(thisPlayer); console.log(""); console.log('loadVideoById() parameters --\> videoId:'+ytID+', startSeconds:'+start+', endSeconds:'+end); thisPlayer.loadVideoById({'videoId':ytID, 'startSeconds':start, 'endSeconds':end}); console.log(""); }); // Bugfix - Set Interval instead of listener setTimeout(function(){ var IntervalCounter=0; listenerInterval = setInterval( function() { var state = thisPlayer.getPlayerState(); //player[thisLinkID].getPlayerState(); var stateMsg; switch (state){ case -1: stateMsg="unstarted"; thisPlayer.playVideo(); console.log("player["+thisLinkID+"]"); break; case 0: stateMsg="ended"; break; case 1: stateMsg="playing"; break; case 2: stateMsg="paused"; break; case 3: stateMsg="buffering"; break; case 5: stateMsg="video cued"; break; default: stateMsg="Undefined player state..."; } console.log(state+" : "+stateMsg); if(state==1){ statePlaying=true; } // Closes the modal if((statePlaying) && (state==0)){ //if((statePlaying) && (stateObj.data==0)){ setTimeout(function(){ console.log("Closing Modal"); $(".ytplayer").css({"display":"none"}); $("#ytplayerModal").animate({"opacity":"0"},1000,function(){ $("#ytplayerModal").css({"display":"none"}); }); statePlaying=false; },500); clearInterval(listenerInterval); console.log("Interval loop stopped on video end.") } // Stop the interval at 1000... Endless instead! IntervalCounter++; if((IntervalCounter>999)&&(state!=1)&&(state!=2)&&(state!=0)){ clearInterval(listenerInterval); console.log("Interval loop willingly stopped. Endless otherwise.") } }, 10); },1100); // Interval setTimeout }); } } // Inject YouTube API script var tag = document.createElement('script'); tag.src = "//www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

Voici un instantané de mon journal de console:

—————–
Voici mon post original – 14 juin:

J’ai déjà passé 6 heures là-dessus.
(plus 1 éditer cette question!)

Je suis en quelque sorte en train de déboguer les 4 dernières lignes.

Le problème est que je ne reçois AUCUNE erreur de console en guise d’allusion.

Concept:
Je souhaite lier de nombreuses vidéos Youtube à des liens de texte.
L’effet recherché pour l’utilisateur est de pouvoir cliquer sur un lien de citation tout en lisant un texte … afin de pouvoir confirmer la citation.
La vidéo n’a pas à jouer entièrement.

La vidéo doit commencer à un code temporel spécifique ET se terminer à un code temporel spécifique.
Bonus de complexité: Tout cela doit être montré dans un style de vue modal.

Mon code a fonctionné assez rapidement pour une vidéo. Voir ici

J’ai basé mon code sur ce tutoriel et je me suis succédé très vite.

Ensuite, avoir ce travail …
J’ai eu besoin de construire des tableaux pour gérer plusieurs vidéos.
Pour les identifiants de liens, les identifiants de joueurs, les codes temporels pour le début / la fin … ET LES ÉCOUTEURS!
Le plaisir commence!

Comme dit, j’ai passé la majeure partie de ma journée sur ce sujet. J’ai toujours rencontré des bugs AVEC des erreurs de console comme des guides clairs (LOLLL).

Je suis satisfait de mon travail … Cela va dans la bonne direction, je pense.
Cela fonctionne presque …

Mais cette fois, pas d’erreur! Voir ici (vérifiez la console!)

WHATT !!! PAS D’ERREUR?!?
Mes arm sont coupés maintenant.
En fait, les 1ers spectacles mais la vidéo ne commence pas … Et le second semble complètement perdu dans la brume.

Dans les messages du journal de la console, je vois la première onStateChange du onStateChange écoute onStateChange , qui est -1 (non démarré). Mais alors ??? Ça meurt!
Arrgg!

Je dois outrepasser ma fierté … Et posez la question sous StackOveflow.
😉

Mon code complet (pour plusieurs liens):
Ceci est une page appelée via ajax … Ainsi, toutes les ressources externes telles que jQuery sont déjà chargées.

  .ytplayer{ position:fixed; z-index:2; width:60%; height:40%; top:30%; left:20%; display:none; } #ytplayerModal{ display:none; background-color:#000; opacity:0; position:fixed; z-index:1; top:0; left:0; width:100%; height:100%; } .ytTriggerPlay{ text-decoration:underline; color:dodgerblue; cursor:pointer; }  
Youtube modal sortinggger link test
 
 
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat lectus ut est vestibulum ornare. Vivamus felis nulla, facilisis id cursus non, pharetra non diam. Sed pellentesque turpis vel sem tincidunt consectetur. Aenean ut lorem erat. Donec ut tellus sed leo ulsortingces cursus. Cras varius libero ut purus suscipit ulsortingces. Vivamus eget efficitur turpis. Aenean suscipit, dui nec luctus fringilla, neque tellus fringilla risus, et porta enim justo et turpis. Sed risus orci, vehicula sed eleifend eget, tincidunt ut turpis. Vestibulum in sapien non lacus sortingstique mattis id eget tortor.
 
 Proin est purus, maximus id nunc vel, consectetur sortingstique urna. Mauris cursus ipsum a varius luctus. Nunc interdum condimentum massa vitae rutrum. Morbi volutpat nec lorem eleifend malesuada. Pellentesque habitant morbi sortingstique senectus et netus et malesuada fames ac turpis egestas. Duis fringilla metus vel nunc elementum efficitur. Duis sed dolor diam. In eu ulsortingces libero, eget lobortis mi. Sed pretium orci non augue vehicula, eget placerat leo lacinia. Sed sed gravida dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In bibendum, erat eget venenatis elementum, nulla enim posuere lacus, quis efficitur dolor ex quis ipsum. Pellentesque habitant morbi sortingstique senectus et netus et malesuada fames ac turpis egestas. Phasellus volutpat finibus odio id venenatis. Fusce at leo libero. Cras eget velit sed justo egestas vehicula efficitur sit amet ex.
 
  
 
 
  // https://developers.google.com/youtube/iframe_api_reference // https://css-sortingcks.com/play-button-youtube-and-vimeo-api/ // Global variable for the player var player = []; var statePlaying=false; playerArr = [{ linkID:"0", divID:"player1", ytID:"5V_wKuw2mvI", // Heavy metal playlist start:20, end:40, }, { linkID:"1", divID:"player2", ytID:"39b5v3-d6ZA", // Maiden start:30, end:60, }]; // This function gets called when API is ready to use function onYouTubePlayerAPIReady() { for(i=0;i<playerArr.length;i++){ // Create the global player from the specific iframe (#video) thisPlayer = new YT.Player(playerArr[i].divID, { height: '352', width: '640', videoId: '5V_wKuw2mvI', startSeconds:20, endSeconds:40, events: { // Call this function when player is ready to use // 'onReady': onPlayerReady // Commented out willingly. } }); player[i] = thisPlayer; } onPlayerReady(); } function onPlayerReady(event) { // Binding events loop console.log("playerArr.length: "+playerArr.length); for(i=0;ii: "+i); var playButton = document.getElementById(playerArr[i].linkID); console.log("playButton.id: "+playButton.id); var thisArr = playerArr[i]; console.log("playerArr[i] object (below): "); console.log(thisArr); var thissPlayer = player[i]; playButton.addEventListener("click", function() { thisLinkID = parseInt($(this).attr("id")); console.log("thisLinkID: "+thisLinkID); var ytID = playerArr[thisLinkID].ytID; var start = playerArr[thisLinkID].start; var end = playerArr[thisLinkID].end; console.log("ytID: "+ytID); console.log("start: "+start); console.log("end: "+end); console.log("thissPlayer object (below): "); console.log(thissPlayer); $("#ytplayerModal").css({"display":"block"}); $("#ytplayerModal").animate({"opacity":"0.7"},1000,function(thissPlayer,ytID,start,end){ $(".ytplayer").show(); player[thisLinkID].loadVideoById({videoId:ytID, startSeconds:start, endSeconds:end}); setTimeout(function(){ player[thisLinkID].playVideo(); },500); }); }); thissPlayer.addEventListener("onStateChange", function(stateObj){ console.log("Player State: "+stateObj.data); console.log("Again, thissPlayer object in the onStateChange listener (below)."); console.log(thissPlayer); // State sequence : -1, 3, 1, 2, 0, which is: Unstarted, Buffering, Playing, Paused, Ended. if(stateObj.data==1){ statePlaying=true; } console.log("Player State bolean memory: "+statePlaying); // Closes the modal if((statePlaying) && (stateObj.data==0)){ setTimeout(function(){ console.log("Closing Modal"); $(".ytplayer").css({"display":"none"}); $("#ytplayerModal").animate({"opacity":"0"},1000,function(){ $("#ytplayerModal").css({"display":"none"}); }); statePlaying=false; },500); } }); } } // Inject YouTube API script var tag = document.createElement('script'); tag.src = "//www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);  

• Pourquoi html () exécute-t-il JavaScript, contrairement à innerHTML?
• Comment lire JS en tant que données d’une balise de script?
• Faire des divs sur la même ligne à la même hauteur – Dynamic Content
• Comment puis-je sortinger un tableau, tout en excluant certains éléments (à conserver à la même position dans le tableau)
• Empêcher la double soumission avec a4j: commandButton

 function onReady() { player.addEventListener('onStateChange', function(e) { console.log('State is:', e.data); }); } 

 setInterval( function() { var state = player.getPlayerState(); if ( playerState !== state ) { onPlayerStateChange( { data: state }); } }, 10);