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
adHoc
Module MessageNouveau
Carousels
Slideshow de textes (quote slideshow)
adHoc
adHoc
adHoc
adHoc
adHoc
adHoc
adHoc
adHoc
Iframes responsives
Camera
Unite Gallery
Animations au survol
Autres astuces en CSS
Audio-Players
Carousels