Ajouter feuille de style et script
Style et script : fichier ou code source
Service de téléchargements (v1)
Service de changement de skin (thème) à la volée
Service de calendrier avec des liens
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.
adHoc
Iframes responsives
Camera
Unite Gallery
Animations au survol
Autres astuces en CSS
Audio-Players
Carousels