Audio-Players - JPlayer Audio Vidéo dans un Iframe

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


Astuces

adHoc

Iframes responsives

Camera

Unite Gallery

Animations au survol

Autres astuces en CSS

Audio-Players

Carousels