adHoc.71site.fr

→ JPlayer Vidéo Youtube dans un Iframe

JPlayer a été écrit par Mark J Panaghiston et est diffusé sous la licence MIT (http://www.opensource.org/licenses/MIT). On peut le trouver là : http://jplayer.org/

C'est exactement la même procédure que pour les deux pages précédentes.

Il faut avoir au préalable relevé les adresses des vidéos Youtube que vous souhaitez placer dans votre playlist.

Ce JPlayer Vidéo Youtube (Jplayer03.html) est appelé ainsi :

    <iframe scrolling="no" src="files/JPlayer03.html" style="background-color: transparent;" width="100%" height="450px" frameborder="0"></iframe>

Ci-dessous le code du fichier JPlayer03.html

• Vous pouvez modifier le titre dans les balises [title]...[/title].

• Vous pouvez choisir la skin en plaçant le fichier .css qui vous convient dans la balise [link href.... /]. Ici jplayer.pink.flag.css.

  NB : un fichier .js supplémentaire est déclaré dans le script youtube-integration-jplayer.js

• Dans la partie [script]...[/script], vous pouvez modifier la playlist. Il faut impérativement laisser type : "youtube", . Puis, pour chacune des vidéos entrez dans title : titre du morceau, artist : nom de l'artiste, mp4v : adresse youtube de la vidéo. Laisser en bas du script : supplied: "m4v, webmv",.
  

  Vous ajoutez ou supprimez autant de bloc que nécessaire.

  
  {
  type: "youtube",
  title: "Comme en 14 : Compagnie du théâtre Pouffe - Youtube",
  artist:"Cie du théâtre Pouffe",
  m4v:"https://www.youtube.com/watch?v=Nak-j7f6dfE"
  },
  

• Rien à modifier dans le corps de la page [body]...[/body], sauf à vérifier que les Id utilisés sont bien les mêmes que dans la partie [script]...[/script] : ici, jquery_jplayer_1 et jpcontainer_1. Dans un .html, inutile d'en créer d'autres, il suffit plus simplement d'utiliser, si on souhaite plusieurs playlists de placer  autant de .html dans autant d'Iframes...

• Une astuce très simple à utiliser si votre playlist est très longue, vous pouvez lui donner la hauteur maximale souhaitée et mettre en place un ascenseur vertical : Copiez simplement ces lignes en adaptant la hauteur et collez-les juste au-dessous de la ligne [link href.... /] de votre skin.

  
   <style type="text/css">
  .jp-playlist {
  	max-height:200px;overflow: auto;}
  </style>
  

Il est possible d'intervenir sur les fichiers de style et/ou les fichiers de script .js mais cela sort du cadre de ce tutoriel.

Utilisez sans modération les fichiers .html du zip en téléchargement : Jplayer.zip. Veuillez, s'il vous plaît laisser les références d'origine du procédé et de mon site dans l'en-tête, merci.

Me contacter sur le forum de ce site pour toute aide ou information supplémentaire.