Discussion :

[paulde]

Bonjour,

le petit problème que je rencontre est niveau ultra débutant je pense, mais je connais absolument pas le javascript et j'ai pas résolu le soucis malgré plusieurs recherches.

Je cherche à afficher plusieurs vidéos youtube sur une même page (à l'aide d'une bdd et php), pour ca j'ai récupéré le script fourni par Youtube ci-dessous. Seulement il m'affiche constamment la même vidéo car il l'appelle à chaque fois "Player" dans cette partie du code :

Code :

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

1
2
3
4
5
      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {

Pour chaque vidéo j'ai créé au préalable une variable en javascript appelée "video" (oui j'ai beaucoup d'imagination ^^), simplement je n'arrive pas à la déclarer dans le script. Je vois bien qu'il faut remplacer 'player" dans le script fourni par Youtube par la variable 'video' mais les tentatives que j'ai fait ne fonctionnent pas. C'est extrêmement simple je suppose mais étant niveau 0 je n'utilise pas la bonne méthode. Donc ma question est toute simple : comment remplacer 'player' par ma variable "video" dans le code (de façon à ce que chaque vidéo ait un identifiant unique) ?


Voici le script complet :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
 
 
<script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
 
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
 
      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }
 
      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>

[SpaceFrog]

Code :

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

 player = new YT.Player(video, {

[paulde]

Merci pour ta proposition, ca devrait être la méthode correcte ? J'ai essayé bien sûr mais aucune vidéo ne s'affiche.

Je ne sais pas pourquoi mais j'arrive pas du tout à passer ma variable dans le script. Pourtant elle existe bien et est unique à chaque fois puisque elle s'affiche parfaitement lorsque je met "document.write(video);" plus loin dans le div (pour vérifier).
De la même façon, lorsque j'insère "var video = '<?php echo $video ?>' ;" et que je regarde le code source du navigateur "var video" est bien égal à ma variable...

Seulement on dirait que cette variable ne passe pas dans le script :/

Par exemple si je fais ca, aucune video ne s'affiche :

Code :

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

1
2
3
4
5
      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var video = '<?php echo $video ?>' ; // ici la variable est bien déclarée et unique, je peux le vérifier dans le code source
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('video', {

C'est pourtant correct ?

[paulde]

En fait je crois que ca fonctionne pas parce que ma variable php est interprétée coté serveur et le script javascript coté client non ?

Du coup ma variable "video" serait mal interprétée au moment de l'éxécution du script ?

Car lorsque je met le code ci-dessous la variable est bien affichée dans le script lorsque je regarde le code source du navigateur, mais la vidéo ne s'affiche pas pour autant :

Code :

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

1
2
3
4
      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('<?php echo $video ?>', {

Mais je vois pas comment faire pour passer une variable dynamique au script de youtube dans ce cas. Je vais peut-être ouvrir un nouveau sujet, ce sera plus clair...

[SpaceFrog]

"video" = string ...
video = variable ...

[paulde]

Je sais bien, dans le script fourni par youtube c'est une chaine de caractères :

Code :

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

1
2
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {

Seulement c'est ici que je dois insérer ma variable, à la place de 'player', car la chaine de caractères doit être identique à l'identifiant du div. J'arrive à insérer ma variable avec du php de cette façon :

Code :

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

1
2
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('<?php echo $video ?>', {

mais la vidéo ne s'affiche pas pour autant.

Lorsque je met la variable video directement en javascript (récupérée 2 lignes plus haut de cette façon : var video = '<?php echo $video; ?>' ; ), même résultat :

Code :

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

1
2
      function onYouTubeIframeAPIReady() {
        player = new YT.Player(video, {

Je suppose que c'est pas la bonne méthode mais je trouve pas d'autre piste pour l'instant. Merci quand même.