adHoc.71site.fr

→ JPlayer Audio 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/

J'aurais souhaité l'intégrer plus directement dans adHoc, hélas, "pour l'instant" cela ne fonctionne pas, lié sans aucun doute à des conflits entre les fichiers .js déclarés dans adHoc et ceux utilisés par Jplayer. Je ne souhaite pas modifier le fichier jquery.js déclaré dans adHoc donc, à l'heure actuelle, la seule solution est de l'utiliser dans un fichier .html inclus dans un Iframe qui résout définitivement ce genre de souci...

Avantages non négligeables de l'.html : On peut le tester avant directement dans son navigateur, on le modifie simplement dans le même fichier avec un éditeur de texte pur (notepad++ par exemple), on peut placer plusieurs occurrences de Players audio dans un même affichage : même page, ou boîte... ou pas, sans craindre de conflit.

Vous pouvez télécharger les fichiers nécessaires à son fonctionnement : Jplayer.zip. J'ai placé le dossier JPlayer dans le dossier files à la racine d'adHoc. Il est possible de l'installer ailleurs, mais il faudra s'assurer que les liens sont corrects ensuite. Les fichiers .html utilisés dans ces tutoriels sont placés au même niveau que le dossier Jplayer (sans les fichiers .mp3 et .webm bien sûr pour ne pas alourdir le zip, mais vous pouvez les récupérer vous même, si vous le souhaitez, ou placer les vôtres...)

Dans l'arborescence ci-dessus : Dans le dossier css se trouvent une quinzaine de fichiers de style pour autant de skins différentes (jplayer.blue.monday.css, jplayer.dark.friday.css etc...) ainsi que le dossier images qui contient les images nécessaires aux skins. Dans le dossier js se trouvent les quatre fichiers .js nécessaires au fonctionnement : jquery-min.js, jquery.jplayer.js, jplayer.playlist.js, youtube-integration-jplayer.js (ce dernier fichier peut être supprimé si on n'utilise pas le procédé de JPlayer Vidéo Youtube -lecture de vidéos embed issues du site Youtube).

Ce player, audio comme vidéo (voir pages suivantes), n'est pas responsive. J'ai donc choisi arbitrairement de limiter la taille du lecteur audio (comme ci-dessus) à 300px : fonctionnel sur tous les smartphones en portrait et celle du lecteur vidéo à 480px (pages suivantes)...

Il serait toujours possible de modifier dans les skins ces paramètres, bien sûr...

Ce JPlayer Audio (Jplayer01.html) est appelé ainsi :

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

Ci-dessous le code du fichier JPlayer01.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.orange.friday.css.

• Dans la partie [script]...[/script], vous pouvez modifier la playlist. Pour chaque morceau entrez dans title : titre du morceau, artist : nom de l'artiste, fichier appelé et son chemin : mp3 dans l'exemple, mais vous pouvez adapter et ajouter d'autres formats (à tester) en bas du script : supplied: "ogg, wav, mp3",.

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

  
  {
  title:"Que sommes nous en train de faire?",
  artist:"[Dogbreath]",
  mp3:"List/Que_sommes_nous_en_train_de_faire.mp3"
  },
  

• 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.