adHoc.71site.fr

→ JPlayer Audio Vidéo 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 la page précédente.

Il faut prévoir en plus quelques images (poster dans la terminologie de JPlayer) : Ici elles sont de dimension 640*360px et sont placées dans un dossier List/poster. Les fichiers .mp3 sont dans dans le dossier List. Les deux vidéos, au format .webm sont placées dans un dossier video-camera placé au même niveau que List et que les .html. Ces deux clips en "stop-motion" ont été "empruntés" sur Youtube pour les tutoriels... Merci à leurs créateurs (JsauceTV et Matthew Burnham-Jones).

Ce JPlayer Audio Vidéo (Jplayer02.html) est appelé ainsi :

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

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

• Dans la partie [script]...[/script], vous pouvez modifier la playlist. Pour chacun de vos morceaux audios ou vidéos entrez dans title : titre du morceau, artist : nom de l'artiste, mp3 : pour les fichiers audios au format .mp3 et leur chemin et webmv : pour les fichiers vidéos au format .webm et leur chemin. C'est pour l'exemple, mais vous pouvez adapter et ajouter d'autres formats (.mp4 pour les vidéos par exemple à tester) en bas du script : supplied: "webmv, mp3",. Vous entrez également poster : pour les images aux formats habituels ( .jpg, .png, .gif,  ...) et leur chemin.

  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",
  poster: "List/poster/LaMarge.jpg"
  },
  

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