-
Api Youtube en JS
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).
Rappel : Javascript doit être activé sur votre blog
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éo" onclick="play();" href="#">Play</a>
<a title="Mettre en pause la vidéo" onclick="pause();" href="#">- Pause</a>
<a title="Stopper la vidé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&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éo" onclick="play();" href="#">Play</a> <a title="cliquer pour mettre en pause la vidéo" onclick="pause();" href="#">- Pause</a> <a title="cliquer pour stopper la vidé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.
Tags : api, youtube, video, playlist, lecture
-
Commentaires
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 !
@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>
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é,
AllisonMerci 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
Salut Nathie13or,
Merci .... et pour Constance c'est tout simplement la meilleure !!!!!!!
Cordialement,
Mike.
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
Un grand merci pour cet explication pour introduire ce code ,
amicalement bonne journée bisous
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 !!!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>
http://la-gentille-rebelle.eklablog.com/api-youtube-en-js-de-papyrocktest-a108600762
merci pour ce tuto test !!!!
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
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>
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
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.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 !!!!
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
Ajouter un commentaire
Test et mise au point
-
Visiteurs :
Connectés 1 Record 519 Aujourd'hui 10 Total 107360 
Radionomy
My Player
Grooveshark
Constance Vidéo
-
Créer mon blog 
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