• Api Youtube en JS

    Par Mike GMZ dans Accueil le 28 Mai 2014 à 12:55

     

     

     

    Flash player 8+ et JavaScript pour voir cette video.

    INTRODUCTION

    Nous sommes nombreux à insérer des vidéos YouTube dans nos articles. Rien de plus simple,
    suffit de copier le code d'intégration, proposé sous la video sur le site YouTube (partager > Intégrer).
    Puis de coller ce code dans un article, en mode source (<>).
    Par exemple, cliquer sur ce lien : 

    http://www.youtube.com/v/zMJlS0_Oe8A

     
    Bon, c'est une vidéo des Stones parmi une playlist, en lecture auto et si on veut
    uniquement le son ? (audio) et pas la vidéo ? (pour écouter une playlist en fond sonore, par exemple),
    et pouvoir, surtout,  garder les commandes de cette vidéo (lecture, pause, stop...) C'est possible ???? Komenkonfè ???
    Bah, oui c'est possible, car YouTube pense à tout. Il nous propose un "js api reference", en gros un
    lecteur avec commandes en version javascript....voir ici.

    Alors un p'tit exemple, cliquer sur : PLAY . Magique ....!!! Non ????
    Waoooow, mais si je veux mettre en pause ou arrêter ? Hein ? Tout simple, on clique sur: PAUSE.
    Toutes les commandes sont affichables : lecture, previous, next, pause, stop, volume etc...
    Bien entendu, on peut les renommer à souhait. Exemple: 'lecture' peut devenir 'jouer', 'stop' devient 'arrêter' .
    On peut remplacer les appellations par des images (ou icônes).

    Api Youtube en JS Rappel : Javascript doit être activé sur votre blog Api Youtube en JS



    MISE EN PLACE

    Avant tout, il faut se procurer le fichier 'swfobject' en cliquant ici.
    Une fois téléchargé, dé-zipper ce fichier sur votre bureau. Parmi les fichiers,
    il y a celui qui nous intéresse ' swfobject.js '.
    Importer ce fichier sur votre blog, soit en Document, ou dans Gérer les fichiers. (voir image)
    Le but étant de récupérer l'adresse d'hébergement Eklablog. Exemple avec mon fichier, que
    j'ai placé via Gérer les fichiers, dans un nouveau dossier 'youtube' :

    http://ekladata.com/WEftEB9V1RxTU4pweJcefej7Z2I/swfobject.js

    Ensuite, modifier le code ci-dessous en insérant votre URL fichier swfobject.js :

    <script src="URL-swfobject.js"></script>

    Ce qui donne pour moi:

    <script src="http://ekladata.com/WEftEB9V1RxTU4pweJcefej7Z2I/swfobject.js">
    </script>


    Bon, tout le monde suit ? On continue....
    Maintenant, on s'occupe de la vidéo et des commandes via Javascript. (voir doc)

    <script type="text/javascript">
    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID?
    enablejsapi=1&playerapiid=ytplayer&version=3    ",
    "ytapiplayer", "425", "356", "8", null, null, params, atts);
    </script>


    Ci-dessus le script de base, celui qui met en place le lecteur.
    En jaune l'identifiant de la video YouTube (11caractères), qui se trouve en fin d'URL, exemple: 

    https://www.youtube.com/watch?v=Z1fj5x1UwDU

    Donc VIDEO_ID = Z1fj5x1UwDU

    Y a plus qu'a ajouter les commandes (voir doc):

    La commande: Lecture (playVideo)

    function play() {
    if (ytplayer) {
    ytplayer.playVideo();
    }
    }


    La commande: Stop (stopVideo)

    function stop() {
    if (ytplayer) {
    ytplayer.stopVideo();
    }
    }


    La commande: Pause (pauseVideo)

    function pause() {
    if (ytplayer) {
    ytplayer.stopVideo();
    }
    }


    Voici pour les 3 principales commandes, on ajoutera
    "next" pour "suivant",et "previous" pour "précédent" si on utilise une playlist.
    On ne s'inquiète pas !!!  tous ces bouts de scripts sont réunis dans un seul et même script.
    Bon tout ça c'est du javascript, pour visualiser les commandes,
    il faut un peu de code HTML, tout simple, comme ci-dessous:

    <a title="Lire la vid&eacute;o" onclick="play();" href="#">Play</a>
    <a title="Mettre en pause la vid&eacute;o" onclick="pause();" href="#">- Pause</a>
    <a title="Stopper la vid&eacute;o" onclick="stop();" href="#">- Stop</a>



    ....et voili, voiça le résultat (avec un peu de CSS):

     



    LES CODES



    <!----------------Fichier-swfobject-JS------------------------->
<p><script src="http://ekladata.com/WEftEB9V1RxTU4pweJcefej7Z2I/swfobject.js"></script>
</p>
<!-------------Lecteur-Youtube-et-commandes-JS----------------->
<div id="ytapiplayer">Flash player 8+ et JavaScript pour voir cette video.</div>
<p>
<script>// <![CDATA[
var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/zMJlS0_Oe8A?enablejsapi=1&version=3&playerapiid=ytplayer&amp;list=PLOERBSJvsbQp5TSxTBntv_MZNeZ4rSwe8",
                       "ytapiplayer", "425", "356", "8", null, null, params, atts);

function onYouTubePlayerReady(playerId) {
      ytplayer = document.getElementById("myytplayer");
    }
function play() {
  if (ytplayer) {
    ytplayer.playVideo();
  }
}
function stop() {
  if (ytplayer) {
    ytplayer.stopVideo();
  }
}
function pause() {
  if (ytplayer) {
    ytplayer.pauseVideo();
  }
}
function next() {
  if (ytplayer) {
    ytplayer.nextVideo();
  }
}
function previous() {
  if (ytplayer) {
    ytplayer.previousVideo();
  }
}
// ]]></script>
</p>
<!--------------Lecteur-et-commandes-html-------------------->
<div id="lecteur-yt">
<p><a title="cliquer pour lire la vid&eacute;o" onclick="play();" href="#">Play</a> <a title="cliquer pour mettre en pause la vid&eacute;o" onclick="pause();" href="#">- Pause</a> <a title="cliquer pour stopper la vid&eacute;o" onclick="stop();" href="#">- Stop</a></p>
</div>
<p><button id="bouton" onclick="previous()">◄◄</button> <button id="bouton" onclick="pause()">◙</button> <button id="bouton" onclick="play()">►</button> <button id="bouton" onclick="stop()">▬</button> <button id="bouton" onclick="next()">►►</button></p>

    See the Pen YouTube API - by Mike (@mikegmz) on CodePen.

     

    « Menu-image avec légendeFenêtre modale (pop-in) »

    Tags Tags : , , , ,

  • Commentaires

    20
    Mireille
    Vendredi 15 Mai 2015 à 20:45
    Bonsoir Gentille Rebelle,
    Moi j'ai compris à tes explications, il existe pas pour les codes css un livre, j'ai un avc, et il faut que je relise plusieurs fois pour comprendre....
    A bientôt
    Répondre
    19
    juju 39 Profil de juju 39
    Samedi 27 Décembre 2014 à 15:32
    juju 39

    Bonjour ben moi je suis pas futfut avec l'âge on s'arrange pas du tout ... vous semblez êtres des cracs mais alors ce que j'ai rien de rien compris non franchement vous parlez en pros tant pis pour les pauvres "couillonnes" dont je suis j'avais trouvé un lecteur ou on avait plus qu'à déposer le code MP3 il était facile malheureusement il a disparu du web pourquoi VOUS qui êtes fortiche vous ne mettez pas en place un modèle avec 5 emplacements ou on à qu'à déposer le code URL choisir démarrage auto ou non et hop on prend le code et çà va sur le blog ??? je crois que çà ferait le bonheur de nombreuses personnes! Allez un bon geste pour le début de l'année merci !
    Oui la gentille rebelle en a fait un mais on y comprend rien oui c'est vrai et je ne suis pas la seule merci pour les personnes âgées ! bonne fin d'année !

    Répondre
    18
    Mike GMZ Profil de Mike GMZ
    Samedi 13 Décembre 2014 à 09:32
    Mike GMZ

    @Allison
    Choisir la video sur YouTube, cliquer sur partager, puis sur intégrer, copier le code proposé (iframe).
    Pour une lecture automatique, ajouter en fin d'URL &autoplay=1, juste avant fermeture des guillemets.


    <iframe style="display: block; margin-left: auto; margin-right: auto;" src="http://www.youtube.com/embed/PL5DliBHBO0?list=PLgIo63xH3LBut1qBOSHHoTn2J8TClmMt;hl=fr_FR&autoplay=1" frameborder="0" width="219" height="165"></iframe>

    Répondre
    17
    *Allison* Profil de *Allison*
    Samedi 13 Décembre 2014 à 00:12
    *Allison*

    Bonsoir, je mets ici mon code, comme je le disais je ne sais plus quoi enlever pour changer ma musique, je l'ai oublié.

    <iframe style="display: block; margin-left: auto; margin-right: auto;" src="http://www.youtube.com/embed/PL5DliBHBO0?list=PLgIo63xH3LBut1qBOSHHoTn2J8TClmMt;hl=fr_FR&autoplay=1" frameborder="0" width="219" height="165"></iframe>

    C'est un vidéo comme tu vas t'en rendre compte que je prends sur U TUBE, j'en suis membre.


    Cette chanson va bien avec l'hiver, mais j'aimerais bien la changer. Si tu le peux, est-ce que tu pourrais me dire quoi changer ?

    Douce nuit,
    Amitié,
    Allison

    Répondre
    16
    *Allison* Profil de *Allison*
    Vendredi 12 Décembre 2014 à 23:43
    *Allison*
    Merci pour ce tuto, j'ai oublié comment changer la musique de mon blog, je vieillis !
    Je vais regarder ce qui me manque et j'espère le retrouver chez toi.
    Amitié,
    Allison
    Répondre
    15
    Pluviophiile Profil de Pluviophiile
    Lundi 20 Octobre 2014 à 14:22
    Pluviophiile
    Bah, j'ai rien compris, ça marche pas mais merci quand même (oui javascript activé)
    Répondre
    14
    Mike GMZ Profil de Mike GMZ
    Mardi 14 Octobre 2014 à 08:36
    Mike GMZ

    Salut Nathie13or,

    Merci .... et pour Constance c'est tout simplement la meilleure !!!!!!!

    Cordialement,
    Mike.

    Répondre
    13
    nathie13or Profil de nathie13or
    Lundi 13 Octobre 2014 à 22:24
    nathie13or

     petit message pour dire merci de ce partage.. et au passage j'adore Constance j'ai été la voir au théatre crise de rire du début à la fin.
    bonne soirée. Amicalement
    Nathie

     

    Répondre
    12
    pierre
    Mercredi 24 Septembre 2014 à 01:12

    excellent web site

    Répondre
    11
    Manik Profil de Manik
    Mardi 29 Juillet 2014 à 11:06
    Manik

    Un grand merci pour cet explication pour introduire ce code ,

    amicalement bonne journée bisous

    Répondre
    10
    La Gentille Rebelle Profil de La Gentille Rebelle
    Vendredi 18 Juillet 2014 à 22:25
    La Gentille Rebelle
    bon ba pour toi c'est pas un scoop mdr !!! cela fait bien longtemps ke j'ai donné aussi ce bout de code à intégrer aussi dans le lecteur d'ekla ou aussi un lecteur kon peut ...... oh trop long pour écrire je te mets lien de ma rubrique "astuces musique" lol

    http://la-gentille-rebelle.eklablog.com/astuces-musique-c24998916

    Bon je me doutais de ne pas t'étonner encore cette fois par mes trucs mdr !!!
    Répondre
    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    8
    La Gentille Rebelle Profil de La Gentille Rebelle
    Vendredi 18 Juillet 2014 à 21:19
    La Gentille Rebelle
    J'AI UN SCOOP !!!!!!
    j'ai rajouté autoplay=1& dans ton code ci dessous et ça démarre automatique lol (pas besoin de faire play)

    <script type="text/javascript">
    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID?
    enablejsapi=1&autoplay=1&playerapiid=ytplayer&version=3",
    "ytapiplayer", "425", "356", "8", null, null, params, atts);
    </script>
    Répondre
    6
    La Gentille Rebelle Profil de La Gentille Rebelle
    Jeudi 29 Mai 2014 à 11:10
    La Gentille Rebelle
    moi ça donne ça

    <script src="http://ekladata.com/KRYgPu1__YF2_ztNAX8Pw5a82SE/prefixfree-min.js"></script>

    c chiant car jai pas les sympbole dans ta boite ou j'écris , d'habitude ça marche, donc jai pas le symbole du lien !!! bon pas grave
    Répondre
    5
    Mike GMZ Profil de Mike GMZ
    Jeudi 29 Mai 2014 à 11:05
    Mike GMZ

    Tu dois obtenir le téléchargement d'un fichier : prefixme.min.js

    Tu places ce fichier dans : gestion des fichiers
    Et ça donne un truc du genre (pour moi):

    "http://ekladata.com/papyrocktest.eklablog.com/perso/prefix-css/prefixfree.min.js"

    T'appelles ce fichier dans un module simple (mode source <>) : 

    <script src="http://ekladata.com/papyrocktest.eklablog.com/perso/prefix-css/prefixfree.min.js"></script>

    Répondre
    4
    La Gentille Rebelle Profil de La Gentille Rebelle
    Jeudi 29 Mai 2014 à 10:49
    La Gentille Rebelle
    merci pour lien préfixer !
    jai clicker dessus pour télécharger mais en faite c'est le code ki souvre alors jai copier et coller sur doc text et mis en js puis une fois hébergé mis dans module avec code script
    c bon???? lol
    en tout cas merci du tuyau
    Répondre
    3
    Mike GMZ Profil de Mike GMZ
    Jeudi 29 Mai 2014 à 09:37
    Mike GMZ

    Salut!

    Pour les pages web écrites dans une autre langue, mon navigateur (chrome) est configuré en "traduction automatique" (voir ici),
    Pour le css des boutons, tout est indiqué dans "les codes", mais je te fais confiance pour le "bidouillage css", t'es une pro...!
    Astuce:
    Pour une compatibilité complète entre les navigateurs, il nécessaire de 'préfixer' certains codes CSS (-webkit-, etc) et il y a un p'tit
    script qui fait ça automatiquement, cool non ? Je l'utilise depuis 6 mois, et c'est parfait.
    Pour télécharger ce script, c'est ici (le logo rond, en haut de page à gauche - Only 2kb gzipped). A placer dans un module simple.

    Répondre
    2
    La Gentille Rebelle Profil de La Gentille Rebelle
    Jeudi 29 Mai 2014 à 09:05
    La Gentille Rebelle
    je viens d'aller sur le lien ke youtube parle du java , je comprends rien cest anglais, je me fierai à ton billet c'est mieux décortiquée mdr !!!!
    Répondre
    1
    La Gentille Rebelle Profil de La Gentille Rebelle
    Jeudi 29 Mai 2014 à 09:02
    La Gentille Rebelle
    Wai wai j'ai tout compris ; c cool ce système mais moi si je le fais je ferai avec boutons kome tu as fait en rouge et couleur ki change au contact souris c'est trop bien

    @ bientôt
    Répondre


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


Version standard

Poursuivre l'affichage en version standard (ordinateur),

cliquer ci-dessous

Clic ici

(Puis fermer cette fenêtre, en haut à droite)