2010-02-07 2 views
3

OK, je suis coincé et je ne sais pas ce qui ne va pas, même après avoir suivi les documents de Google et les suggestions de lecture ici sur Stackoverflow. Pourquoi ne puis-je pas contrôler les vidéos Youtube intégrées dans ma page Web?Impossible de contrôler l'intégration de Youtube même avec document.getElementById ('xyz'). PlayVideo() - n'est pas une fonction?

Si je crée un fichier HTML avec le corps < > être:

<object id="o1" width="480" height="295"> 
    <param name="movie" 
    value="http://www.youtube.com/v/qCTLCNmnlKU&hl=en_US&fs=1&enablejsapi=1&"> 
    </param> 
    <param name="allowFullScreen" value="true"></param> 
    <param name="allowscriptaccess" value="always"></param> 
    <embed id="e1" 
    src="http://www.youtube.com/v/qCTLCNmnlKU&hl=en_US&fs=1&enablejsapi=1&" 
    type="application/x-shockwave-flash" 
    allowscriptaccess="always" allowfullscreen="true" width="480" height="295"> 
    </embed> 
</object> 

Même lorsque je tente de faire:

// I get an object. Yay. 

document.getElementById('e1'); 

// This generates "...playVideo is not a function" 

document.getElementById('e1').playVideo(); 

Aide! Qu'est-ce que je fais mal? Merci.

Répondre

5

OK, voici donc la réponse trouvée dans une petite ligne de texte sur la page API: http://code.google.com/apis/youtube/js_api_reference.html

« Remarque: Pour tester l'un de ces appels, vous devez avoir votre fichier en cours d'exécution sur un serveur web, comme le lecteur Flash restreint les appels entre les fichiers locaux et Internet."

Donc, pour me permettre de continuer à se développer sur mon ordinateur portable Mac, je ne les éléments suivants:

  1. modifié mes /etc/hosts fichier pour inclure une entrée de retour à mon localhost:

    127.0.0.1 testhost.com 
    
  2. édité mon /etc/apache2/httpd.conf fichier pour ajouter une entrée d'hôte virtuel pointant vers mon développement dire ctory:

    <VirtualHost *:80> 
        ServerName testhost.com 
        DocumentRoot /Users/amy/flashproj 
        <Directory /Users/amy/flashproj> 
         AllowOverride all 
         Options MultiViews Indexes FollowSymLinks 
         Allow from All 
        </Directory> 
    </VirtualHost> 
    
  3. Restarted Apache:

    sudo apachectl restart 
    
  4. naviguerez à ma propre localhost via mon nouveau serveur virtuel:

    http://testhost.com 
    

Voila. Cela fonctionne totalement maintenant. Je peux interroger la page pour le joueur:

document.getElementById('e1');    // OK 
document.getElementById('e1').playVideo(); // OK! 

Ouf! Non onYouTubePlayerReady() requis non plus!

+0

@Amy Si les auteurs de l'API insistent sur l'implémentation de 'onYouTubePlayerReady' il semble que c'est la seule façon dont ils s'attendent à ce que leur API soit utilisée. Aucun effet secondaire peut être vu sur le localhost mais ils peuvent apparaître sur Internet en raison de la connexion Internet lente ou des problèmes similaires. Par exemple. J'ai obtenu votre code initial en insérant 'alert ('debug')' avant d'obtenir l'élément par id :) – Li0liQ

+0

@ Li0liQ: Bon point. J'ai encore beaucoup de tests à faire, je posterai une mise à jour si quelque chose de nouveau arrive. – Amy

0

Qu'advient-il si vous utilisez l'id « o1 » au lieu de « e1 »?

OK bien sur cette page: http://code.google.com/apis/youtube/js_api_reference.html il me semble que la bibliothèque "swfobject" doit être incluse pour que cette API soit disponible. Je vais l'essayer.

[modifier] OK, voici ce que j'ai:

<html> 
    <head> 
    <script src='http://code.jquery.com/jquery-1.4.1.js'></script> 
    <script src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script> 
    <script> 
     window['onYouTubePlayerReady'] = function onYouTubePlayerReady(playerId) { 
     player = document.getElementById("zebra"); 
     player.playVideo(); 
     }; 
     $(function() { 
     swfobject.embedSWF(
     "http://www.youtube.com/v/qCTLCNmnlKU?hl=en_US&fs=1&enablejsapi=1&playerapiid=ytplayer", 
      "foo", 
      "480", "295", 
      "8", 
      null, null, 
      { allowScriptAccess: 'always' }, 
      { id: 'zebra' } 
     ); 
     }); 
    </script> 
    </head> 
    <body> 
    <div id='foo'>Foo</div> 
    </body> 
</html> 

Cela fonctionne, mais assez curieusement il ne fonctionne que quand je sers d'un vrai serveur web. Si je le mets dans un fichier local et le charge dans le navigateur, cela ne fonctionne pas. Je ne sais pas pourquoi mais je ne suis absolument pas un expert Flash ou un expert YouTube.

Voir http://gutfullofbeer.net/youtube.html (comme ce qui est tapé ci-dessus)

+0

Même différence. "... pas une fonction." – Amy

+0

OK et j'ai mis à jour la réponse – Pointy

+0

Selon: http://code.google.com/apis/youtube/js_api_reference.html « Remarque: Pour tester l'un de ces appels, vous devez avoir votre fichier en cours d'exécution sur un serveur Web, car le lecteur Flash limite les appels entre les fichiers locaux et Internet. " – Amy

2

joueur Youtube n'a pas encore été chargé au moment où vous essayez de l'utiliser. Il y a une fonction de rappel spéciale qui sera lancée automatiquement dès qu'elle est chargée.

vos pages HTML qui affichent le joueur doit mettre en œuvre chromeless une fonction de rappel nommé onYouTubePlayerReady. L'API appel cette fonction lorsque le lecteur est complètement chargé et l'API est prêt à recevoir des appels .

par YouTube JavaScript Player API Reference.

Par conséquent, vous pouvez réécrire votre code de la manière suivante:

<script type="text/javascript"> 
function onYouTubePlayerReady(playerId) { 
    var ytplayer = document.getElementById('e1'); 
    ytplayer.playVideo(); 
} 
</script> 

Vous pouvez également passer l'esprit playerapiid tout en intégrant le joueur s'il y a beaucoup d'entre eux de faire la distinction dans onYouTubePlayerReady gestionnaire.

+0

Ça ne se déclenche jamais quand je le mets en place. – Pointy

+0

Ah - les choses ne fonctionnent pas si vous chargez le fichier à partir du stockage local au lieu d'un vrai serveur HTTP. Je ne sais pas pourquoi. – Pointy

+1

OK, je l'ai compris. Le problème est une déclaration sur: http://code.google.com/apis/youtube/js_api_reference.html « Remarque: Pour tester l'un de ces appels, vous devez avoir votre fichier en cours d'exécution sur un serveur web, comme Flash Player restreint les appels entre les fichiers locaux et Internet. " – Amy

0

J'ai été coincé avec ce problème pendant deux jours .. tous les problèmes liés à la variable lecteur youtube étaient liés à l'exécuter localement. Après avoir truqué une adresse via windows/hosts cela fonctionne parfaitement.

Questions connexes