Youtube API : fonctions non définies [Résolu]

crazymonkey · 04/07/2011, 18h12

Bonjour à tous,

Je m’intéresse au fonctionnement de l'API youtube, je demande à google des infos et je tombe la dessus (chic une doc google) : http://code.google.com/apis/ajax/pla...omeless_player

Je m'empresse donc de copié le code dans un fichier que j'appelle youtube.html, quand je lance la page premier problème assez rapidement réglé : - ligne 97 et 113 remplacer ytPlayer par ytplayer.

Mais maintenant je suis confronté à un autre soucis :

Lorsque je clique sur les boutons play, pause, mute et unmute voici les erreurs qui me sont retournées :

Citation:

Uncaught TypeError: Object #<HTMLObjectElement> has no method 'playVideo'
Uncaught TypeError: Object #<HTMLObjectElement> has no method 'pauseVideo'
Uncaught TypeError: Object #<HTMLObjectElement> has no method 'mute'
Uncaught TypeError: Object #<HTMLObjectElement> has no method 'unMute'

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>YouTube Player API Sample</title>
    <style type="text/css">
      #videoDiv { 
        margin-right: 3px;
      }
      #videoInfo {
        margin-left: 3px;
      }
    </style>
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
      google.load("swfobject", "2.1");
    </script>    
    <script type="text/javascript">
 
      /*
       * Chromeless player has no controls.
       */
 
      // Update a particular HTML element with a new value
      function updateHTML(elmId, value) {
        document.getElementById(elmId).innerHTML = value;
      }
 
      // This function is called when an error is thrown by the player
      function onPlayerError(errorCode) {
        alert("An error occured of type:" + errorCode);
      }
 
      // This function is called when the player changes state
      function onPlayerStateChange(newState) {
        updateHTML("playerState", newState);
      }
 
      // Display information about the current state of the player
      function updatePlayerInfo() {
        // Also check that at least one function exists since when IE unloads the
        // page, it will destroy the SWF before clearing the interval.
        if(ytplayer && ytplayer.getDuration) {
          updateHTML("videoDuration", ytplayer.getDuration());
          updateHTML("videoCurrentTime", ytplayer.getCurrentTime());
          updateHTML("bytesTotal", ytplayer.getVideoBytesTotal());
          updateHTML("startBytes", ytplayer.getVideoStartBytes());
          updateHTML("bytesLoaded", ytplayer.getVideoBytesLoaded());
          updateHTML("volume", ytplayer.getVolume());
        }
      }
 
      // Allow the user to set the volume from 0-100
      function setVideoVolume() {
        var volume = parseInt(document.getElementById("volumeSetting").value);
        if(isNaN(volume) || volume < 0 || volume > 100) {
          alert("Please enter a valid volume between 0 and 100.");
        }
        else if(ytplayer){
          ytplayer.setVolume(volume);
        }
      }
 
      function playVideo() {
        if (ytplayer) {
          ytplayer.playVideo();
        }
      }
 
      function pauseVideo() {
        if (ytplayer) {
          ytplayer.pauseVideo();
        }
      }
 
      function muteVideo() {
        if(ytplayer) {
          ytplayer.mute();
        }
      }
 
      function unMuteVideo() {
        if(ytplayer) {
          ytplayer.unMute();
        }
      }
 
 
      // This function is automatically called by the player once it loads
      function onYouTubePlayerReady(playerId) {
 
        ytplayer = document.getElementById("ytplayer");
        // This causes the updatePlayerInfo function to be called every 250ms to
        // get fresh data from the player
        setInterval(updatePlayerInfo, 250);
        updatePlayerInfo();
        ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
        ytplayer.addEventListener("onError", "onPlayerError");
        //Load an initial video into the player
        ytplayer.cueVideoById("ylLzyHk54Z0");
      }
 
      // The "main method" of this sample. Called when someone clicks "Run".
      function loadPlayer() {
        // Lets Flash from another domain call JavaScript
        var params = { allowScriptAccess: "always" };
        // The element id of the Flash embed
        var atts = { id: "ytplayer" };
        // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
        swfobject.embedSWF("http://www.youtube.com/apiplayer?" +
                           "&enablejsapi=1&playerapiid=player1", 
                           "videoDiv", "480", "295", "8", null, null, params, atts);
      }
      function _run() {
        loadPlayer();
 
      }
      google.setOnLoadCallback(_run);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <table>
    <tr>
    <td><div id="videoDiv">Loading...</div></td>
    <td valign="top">
      <div id="videoInfo">
        <p>Player state: <span id="playerState">--</span></p>
        <p>Current Time: <span id="videoCurrentTime">--:--</span> | Duration: <span id="videoDuration">--:--</span></p>
        <p>Bytes Total: <span id="bytesTotal">--</span> | Start Bytes: <span id="startBytes">--</span> | Bytes Loaded: <span id="bytesLoaded">--</span></p>
        <p>Controls: <a href="javascript:void(0);" onclick="playVideo();">Play</a> | <a href="javascript:void(0);" onclick="pauseVideo();">Pause</a> | <a href="javascript:void(0);" onclick="muteVideo();">Mute</a> | <a href="javascript:void(0);" onclick="unMuteVideo();">Unmute</a></p>
        <p><input id="volumeSetting" type="text" size="3" />&nbsp;<a href="javascript:void(0)" onclick="setVideoVolume();">&lt;- Set Volume</a> | Volume: <span id="volume">--</span></p>
      </div>
    </td></tr>
    </table>
  </body>
</html>
?

Je ne vois pas trop d'ou pourrait provenir cette erreur. Merci d'avance pour votre aide.

the-destroyer · 04/07/2011, 20h40

Bonsoir euh juste c'est quoi le point d'interrogation a la ligne 142 ? :o

crazymonkey · 04/07/2011, 21h43

Bonsoir,

Euh la seule explication logique est que je l'ai ajouté en faisant mon copié collé ><, il n’apparaît pas dans mon fichier.

nadox · 05/07/2011, 00h17

Bonsoir,

Citation:

Envoyé par crazymonkey

Je m'empresse donc de copié le code dans un fichier que j'appelle youtube.html, quand je lance la page premier problème assez rapidement réglé : - ligne 97 et 113 remplacer ytPlayer par ytplayer.

Aucun intérêt, il s'agit de l'id qui sera utilisé par l'API pour identifier l'élément HTML Object qu'elle va créé sur la page... Donc ce n'est pas une erreur.

Par contre, si tu ne n'étais pas trop "empressé" de copier/coller le code sans chercher un peu comment on peux utiliser les API google, tu aurais peut-être trouvé cette page :
http://code.google.com/intl/fr-FR/apis/loader/
qui dit assez clairement qu'il te faut une clef pour pouvoir utiliser l'exemple sur ton propre site.
Inutile d'espérer le faire fonctionner en local non plus, puisque la clef fait que l'API est liée au domaine du site utilisateur...(donc sur le web only ! )
C'est pas par hasard si on te propose de tester/éditer le code des exemples sur une interface web

Bon courage pour la suite, et n'oublie pas : quand on te dit que google est ton ami, ce n'est pas toujours si simple

04/07/2011, 20h40	#2
the-destroyer Membre régulier Lycéen Inscription : mars 2009 Messages : 201 Détails du profil Informations personnelles : Sexe : Âge : 17 Localisation : France Informations professionnelles : Activité : Lycéen Informations forums : Inscription : mars 2009 Messages : 201 Points : 80 Points : 80	Bonsoir euh juste c'est quoi le point d'interrogation a la ligne 142 ? :o
	00

04/07/2011, 21h43	#3
crazymonkey Nouveau Membre du Club Étudiant Inscription : juin 2009 Messages : 47 Détails du profil Informations personnelles : Âge : 23 Localisation : France, Somme (Picardie) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juin 2009 Messages : 47 Points : 28 Points : 28	Bonsoir, Euh la seule explication logique est que je l'ai ajouté en faisant mon copié collé ><, il n’apparaît pas dans mon fichier.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email