Tayo
Astuce et Tutorial » Programmation / Developpement » Javascript » tutoriel rédigé par Zabuza
Description de cet article : Comprendre l'API Youtube pour gérer le temps des vidéo
Lire les commentaires

Youtube Api






Mise à jour : Quelques changements sur l'API youtube, pensez à aller voir l'exemple pour mieux comprendre le tuto

L'objectif de ce bref tutoriel est de vous montrer comment utiliser une partie de l'API youtube, ( javascript ). Dans notre exemple nous allons utiliser SeekTo, qui permet de changer en direct, sur sa propre page, le temps d'une vidéo.

Concrètement, à l'aide de cette API, vous allez pouvoir sélectionner quand une vidéo Youtube sur votre page doit être éxécuté, ou encore jouer avec le temps ( mettre la vidéo à 30 secondes, puis 45 seconde, à l'aide d'un code  javascript  ).

Sommaire tutoriel Api Youtube


 


Exemple Api Youtube seekTo


 


Petit exemple très simple. Cliquez sur le bouton 35 secondes, la vidéo de youtube ( ici de Big Bang Theory )  se mettra à 35 seconde. 





 


Tutoriel simple sur l'api Youtube

<


You need Flash player 8+ and JavaScript enabled to view this video.


 


Pour des raisons de sécurité de navigateur ( Firefox, Internet Explorer et les autres ), il est conseillé par Google d'utiliser le code javascript libre swobject. Cela ne change pas grand chose, sauf lors de l'intégration d'une vidéo...

 



Nous allons maintenant charger le fichier javascript :


[code=html]<script type="text/javascript" src="swfobject.js"></script>[/code]

 


Plutôt que d'utiliser le traditionnel <object width= pour charger la vidéo youtube, il va nous falloir procéder ainsi :


[code=html]  <div id="ytapiplayer">

   Dans ce DIV la vidéo sera chargée.

  </div>



  <script type="text/javascript">



    var params = { allowScriptAccess: "always" };

    var atts = { id: "myytplayer" };

    swfobject.embedSWF("http://www.youtube.com/v/mTxhPgYGlr0?enablejsapi=1",

                       "ytapiplayer", "425", "356", "8", null, null, params, atts);



  </script>[/code]

 


 


Vous l'aurez surement compris en le lisant :

http://www.youtube.com/v/mTxhPgYGlr0?enablejsapi=1&playerapiid=ytplayer

Ce qui est en rouge est le identifiant vidéo ( vous avez, ce qui se situe dans une URL youtube, à la fin ).

 ?enablejsapi=1 active l'intégration API youtube.


    var atts = { id: "myytplayer" };



  • myytplayer sera le nom de l'ID.

  • 425 la largeur

  • 356 la hauteur


 




SeekTo Youtube

 


On a maintenant notre code, on peut maintenant manipuler la vidéo youtube. Essayons avec un bouton, pour la forme.


[code=html]  <input type="button" value="35 secondes video" onclick='document.getElementById("myytplayer").seekTo(35,true)' name="osef" />  [/code]

Ce code vient créé un bouton qui lorsqu'on clique dessus place la vidéo youtube, identifié par l'ID myytplayer à 35 secondes.

Pour ce faire, nous utilisons seekTo.

Retenez, dans ce grotesque code ceci :



onclick='document.getElementById("myytplayer").seekTo(35,true)'

En rouge, on identifie l'ID.

En bleu, on utilise Seekto à 35 secondes.


Des trucs à connaître sur l'Api Youtube.


Google a déposé une FAQ en anglais sur chaque commande disponible. On peut bien souvent l'utiliser de la même manière qu'exposée ci-haut ( avec document.GetElementById.

 


code.google.com/intl/fr/apis/youtube/js_api_reference.html



réduireNews
réduireTutoriel lié
  • Voir Youtube en HD
    Passer en 1280 par 720
  • Tester vitesse téléchargement Youtube Vidéo..
    Speed test Youtube
  • Augmenter la qualité video Youtube
    Améliorer la qualité vidéo de Youtube. +50%
  • Ne plus voir les commentaires de Youtube
    Qu'est-ce qui est désagréable dans youtube ? les commentaires !
  • Dans la même catégorie : Javascript

    Passer l'activation de Windows 7 temporairement avec invite de commande

    Un tutoriel Vidéo pour réaliser un tooltip avec Jquery
    réduireSocial

    rss 3D png rss 3D png


    Pseudo :
    Pass :
    Les lecteurs ont donné une note moyenne de :
    note 9
    Note: 9 sur 10

    Donnez votre note à ce tuto sur 10 :

    Forcer l'affichage unique de votre site web.

    Comment empêcher de copier un texte sélectionné

    Problème de guillemets en javascript ?

    Liste des commentaires pour Youtube Api °° Tutoriel


    Il y a 7 annes, 9 mois
    Bonjour,
    savez-vous s'il est possible d'effectuer une action lorsque la vidéo arrive à la seconde x ?

    Merci.
    Votre PseudoIl y a 0mn
    Votre commentaire forum
    Vous avez la parole
    Laissez un commentaire sur cet article.
    Pseudo :


    Facultatif : Cliquez ici pour choisir une tête
    Votre email ( non publié ) :

    Image anti spam :
    Code Image
    Recopier les 5 chiffres de cette image :






    Prendre contact avec Tayo.fr : Formulaire Tayo

    Tayo.fr, copyright jusqu'en 2233 ( Au moins ! ).