Discussion :

[bm]

Bonjour ,

Après des essais je ne trouve pas comment obtenir une value compatible :

Dans la page html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
    <script type="text/javascript">
	var ff = '0gRI6zpnVKE';
	function onYouTubeIframeAPIReady() {
	  url = ff;
      player = new YT.Player('play', {
      height: '315',
      width: '560',
      videoId: url,
        });
      }
    </script>

Et :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
    <script type="text/javascript"> 
	$(document).ready(function(){            
		$("#liste").change(function(){
		var str = $("#liste option:selected").attr("value");
		var video = document.getElementById("playa");
		video.src = str;
		});       
	});
	</script>

C'est var ff = '0gRI6zpnVKE'; qui est fixe et qui peux changer avec le select de la variable var str = $("#liste option:selected").attr("value");
L'Api est celle de YouTube
La passerelle Jquery / Youtube est ce possible ?

[mathieu]

je viens de regarder la documentation et je n'ai rien vu au sujet d'un changement de vidéo
https://developers.google.com/youtube/player_parameters

essayez peut-être de créer un nouvel objet "YT.Player" à chaque changement de vidéo

[bm]

Pas évident de changer de vidéo avec cette Api.
J'essaye sous la forme d'une constante avec un if

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var ff = '0gRI6zpnVKE';
	function onYouTubeIframeAPIReady() {
	url = ff;
        player = new YT.Player('play', {

Avec un destroy avant l'appel de OnYou ...
et un changement de url
Le cadre est effacé et un autre revient avec la même vidéo

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
player.destroy();
const url = 'wITj4mFZa3k';
var player;

Créer des objets et les effacer, c'est du JS avancé que je ne connais pas.

[mathieu]

Avec des alert() les constantes passent mais il en faut plus :

je n'ai pas compris cette remarque, le problème est résolu ?

[bm]

Non :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
player.destroy();
const url = 'wITj4mFZa3k';
var player; 
function onYouTubeIframeAPIReady() {
   player = new YT.Player('play',  ...

C'est cette fonction qui ne se déclare d'une fois et pas deux.
Un nouveau player ne se réalise pas après un destroy()

[bm]

C'est possible de contourner l'Api en créant plusieurs players.
Ensuite Jquery créé les div ou conteneur des players suivant la demande.

Après destroy , onYouTubeIframeAPIReady() ne prend plus en compte aucun
nouveau player.