Another teacher’s website

  http://bit.ly/cInFbv copy to clipboard + http://bit.ly/cInFbv RSS

Insérer un fichier media dans un article sous SPIP

Insérer un fichier media dans un article sous SPIP

avec le JWPlayer de Longtailvideo

par SteF, le 21 mai 2010 (maj 20 mai 2012) BY-SA
21 commentaires
Pièces jointes

Donnez votre avis
33 votes

Sommaire

Longtailvideo.com propose un lecteur multimedia sous licence CC. Voici une solution pour l’intégrer à un squelette SPIP sous forme de modèles [1]. Une fois installé, le modèle permet d’insérer dans le corps d’un article un lecteur pour lire les pièces jointes (images, sons, vidéos). Le modèle prévoit également l’affichage sur les vidéos de sous-titres au format .srt qu’on aura également placés en pièce jointe.

This is a work in progress, et toutes les fonctionnalités du lecteur ne sont pas encore prises en charge par les raccourcis. Il subsiste des bugs, n’hésitez pas à les signaler si vous en rencontrez.

Liens
- Afficher une video sous-titrée sur une page web
- JW Player sur longtailvideo.com - téléchargement et documentation

NB - Le JWPlayer est distribué sous licence Creative Commons BY-NC-SA, il n’est pas possible d’en faire un usage commercial (cela inclut une utilisation sur une page contenant des publicités, voir les conditions avant toute utilisation).

Installer le JWPlayer

Les fichiers doivent être téléchargés (lien ci-dessus) et placés par FTP sur votre site. Installez-les dans le dossier squelettes à la racine de SPIP, ainsi les fichiers pourront être trouvés avec la balise #CHEMIN utilisée dans les modèles. Ce dossier devra être créé s’il n’est pas déjà présent.

Installer les modèles SPIP

Zip - 2.4 ko
Modèles pour insérer le JWPlayer dans SPIP
Décompressez l’archive, renseignez les chemins et ajoutez son contenu au dossier squelettes

Téléchargez l’archive ci-contre, décompressez-la et installez son contenu dans le dossier squelettes avec les fichiers du JWPlayer.

Insérer un lecteur dans un article

Le modèle tel que proposé accepte les formats flv, mp4, mp3, jpg, gif et png.

Pour intégrer au texte d’un article le JWPlayer, attacher le document en pièce jointe, et insérer dans le texte de l’article le raccourci suivant, en remplaçant xxx par l’identifiant du document à insérer :

<docxxx|jwplayer>

Afficher une video provenant de Youtube

Pour diffuser une video de Youtube dans le JWPlayer plutôt qu’avec le lecteur embarqué, procédez comme ci-contre : ajoutez un document en pièce jointe, mais au lieu de parcourir, dépliez le menu et indiquez comme adresse distante du document l’adresse de la page youtube de la vidéo à diffuser.

http://www.youtube.com/watch?v=xxxxxxxxxxx

Puis insérez la vidéo dans le texte de l’article avec un raccourci comme présenté au-dessus.

NB - Ceci ne fonctionne pas sur les sites hébergés sur les pages perso de free, où il est impossible de référencer des documents distants.

Afficher des sous-titres sur une vidéo

Le modèle permet d’afficher des sous-titres dans le JWPlayer à partir d’un fichier au format SubRip (.srt)

Attachez le fichier à l’article, donnez-lui un nom (champ Titre, peu importe le nom du fichier) identique à celui donné à la vidéo.

Pré-requis indispensable : autoriser l’extension .srt dans la liste des pièces jointes acceptées par spip afin qu’il ne l’emballe pas automatiquement dans un .zip. Pour ce faire, reportez-vous à la manip comme décrite sur spip.net : Ajouter un type de document.

PNG - 3.3 ko
Icone pour le format srt
A placer dans le dossier IMG/icones

Vous pouvez ajouter un fichier image qui servira d’icône pour les fichiers au format .srt, le fichier devra être placé dans un dossier icones du répertoire IMG que vous créerez au besoin. Vous pouvez par exemple utiliser le fichier ci-contre.

Liste de lecture

NB - modèle non fonctionnel, à revoir

Un deuxième raccourci vous permet de générer automatiquement une liste de lecture avec les documents attachés à votre article.

<articlexxx|jwplayer>

Seuls les documents aux formats mp3, mp4, flv, jpg, png et gif seront pris en compte, ainsi que les URL pour les vidéos provenant de Youtube.

Vous pouvez numéroter les fichiers (champ Titre) pour les classer dans la liste.

Si des fichiers sous-titres sont également fournis, ils seront affichés pendant la lecture des fichiers portant le même nom. Si les vidéos sont numérotées, les sous-titres devront également l’être.

Personnaliser le lecteur

Flashvars et options

Les raccourcis permettent de faire passer des flashvars pour paramétrer le lecteur.

  • <docxxx|jwplayer|width=www|height=hhh> : définir la taille du lecteur (la taille par défaut est codée en dur dans les modèles).
  • <docxxx|jwplayer|flashvars=captions.fontsize=zzz> : choisir la taille des sous-titres

Références
- Toutes les flashvars
- flashvars du plugin caption
- JWPlayer Setup Wizard

CSS

Pour personnaliser l’apparence du lecteur avec du CSS (notamment pour ajouter du padding ou pour le positionner), se pose le problème de l’unicité de l’id du sélecteur div englobant chaque occurrence du lecteur. A moins de lui ajouter une classe en modifiant swobject.js ou avec un autre script, ou alors à utiliser un sélecteur supplémentaire autour de ce div, il n’est pas possible de pointer directement dessus depuis la feuille de style. On peut cibler la balise embed qui porte l’attribut name="mpl", même si c’est un peu moche.

[name=mpl] {code css;}

Exemple

SubRip Subtitle - 3.6 ko
Ben Howard - Keep your head up
Lyrics synched with http://www.youtube.com/watch?v=RD8BFDyZdqU
Merci à tous ceux qui m’ont aidé pour la transcription

Ci-dessous une vidéo diffusée à partir de youtube, indexée comme un document distant, ajout de sous-titres à partir du fichier .srt ci-contre, placé en pièce jointe.

Code utilisé pour afficher et paramétrer le lecteur : <docxxx|jwplayer|flashvars=captions.fontsize=20&captions.back=true>

Cliquez sur CC pour désactiver et réactiver les sous-titres.

This div will be replaced

Ben Howard - Keep your head up - for SAS (surfers against sewage) - http://www.youtube.com/watch?v=RD8BFDyZdqU

Voir aussi
- Sous-titres - créer, éditer, synchroniser, diffuser.
- Ben Howard - Keep your head up


Notes

[1je ferais bien un plugin, mais je ne sais pas faire, et j’ai la flemme d’apprendre !

Pièces jointes à télécharger

Retour en haut de la page

7/11 Sommaire de la rubrique Précédent Suivant

Conditions d'utilisation

Le billet ci-dessus « Inserer un fichier media dans un article sous SPIP » par Stephane Busuttil, ainsi que — sauf mentions spécifiques — tous les documents accessibles sur cette page sont librement mis à disposition selon les termes de la licence Creative Commons Paternité - Partage des Conditions Initiales à l'Identique 3.0 Unported.

+ de détails

Votre avis sur cette page

33 votes

21 commentaires

Aller au dernier commentaire

  • laurenceb, le 22 mai 2010 à 02:09

    je suis en train de lire et là, je commence à décrocher
    "une vidéo diffusée à partir de youtube, indexée comme un document distant, ..."
    Qu’est-ce que c’est que cela ? comment tu indexes un fichier distant ? Est-ce ce que Spip appelle ’un site(lien) référencé’, sauf que c’est un lien vidéo ?

    Sinon beau boulot : pas encore testé mais je te fais confiance.

  • laurenceb, le 22 mai 2010 à 03:21

    en relisant bien, et en ne sautant pas le paragraphe clé "afficher une vidéo provenant de youtube" comme je l’ai fait, c’est plus facile à comprendre...
    Bref, c’était clair, ô (beau) temps pour moi ...

     :-)

  • SteF, le 22 mai 2010 à 08:14

    @laurenceb : bah alors, c’est quoi ces profs qui commencent l’exo sans avoir lu complètement les consignes ? ;)

  • laurenceb, le 22 mai 2010 à 14:38

    C’est pas de ma faute...
    en vrai, je me suis trouvée plusieurs excuses : il n’y a plus de sommaire affiché, celui déplié par défaut comme avant où on pouvait anticiper sur le contenu ; le nouveau sommaire dépliable est sympa mais on le distingue mal ;
    ton article est dense et long, ta colonne centrale est étroite, et du coup on a vite fait de sauter un paragraphe en cours de lecture, c’est ce qui a du se passer... sinon, avec l’age, la vue baisse...

  • SteF, le 22 mai 2010 à 14:55

    @laurenceb : ta réflexion sur le sommaire m’interpelle au plus haut point. la dépliure ne serait en fait qu’un gadget inutile et même néfaste à l’accessibilité... je m’en vais de ce pas lui mettre un coup d’amidon pour qu’il reste déplié ! quant à la largeur de la colonne centrale, le choix est tout à fait égoïste : lorsque je suis en plein écran sur mon portable avec ma barre latérale affichée dans firefox, la largeur tombe pile poil ^^ je l’agrandirai quand j’aurai un écran plus large !!

  • laurenceb, le 29 mai 2010 à 01:43

    tot’ va ben ! :-)
    le sommaire retrouve son aspect, et son rôle

  • laurenceb, le 25 septembre 2010 à 02:48

    Petite précision pour les impulsives simultanées dans mon genre : aller jusqu’au bout du tutoriel et suivre rigoureusement toutes les étapes pour que cela fonctionne ! même en local, sous easyphp comme sous wamp :-)
    ça marche !

  • laurenceb, le 26 septembre 2010 à 13:43

    Je ne sais par quel miracle... mais je peux de nouveau utiliser la fonction référencer un site d’internet sur Free

  • casp, le 31 décembre 2010 à 13:42

    Salut, super contrib, mais une question...
    Est il possible aussi d’utiliser le player dans un squelettes directement ?
    Il est rare que j’ai beosin du’n modèle pour insérer des vidéo dans un article en revanche, il est courant que j’ia à gérer des rubrique uniquement vidéo et qui aurait donc besoin d’une gestion squelette de ce player.

    Histoire que le rédacteur ne puises pas faire de bêtise ^^..

  • SteF, le 1er janvier 2011 à 09:25

    @casp. hello. un modèle n’est rien de plus qu’un bout de squelette qu’on appelle avec un raccourci typo. le même code peut donc bien entendu être directement utilisé dans les squelettes article ou rubrique pour afficher systématiquement les PJ sans passer par un raccourci.

    au passage, longtail video a sorti plusieurs nouvelles versions de son player depuis la publication de cet article, il vaut mieux partir de leur doc plutôt que celle-ci.

  • Mat, le 11 janvier 2011 à 15:48

    Merci pour ce tutorial très bien fait, le player marche nickel avec des vidéos séparées,par contre j’ai un problème pour faire fonctionner une playliste video, avec vos fichiers d’origine, la playlist ne se charge pas (message : "Task queue fail at step 5 :Playlist could not be loaded : playlist file did not contain a valid playlist" ...

  • SteF, le 11 janvier 2011 à 18:22

    hello Mat. hmm, effectivement je crois bien que j’avais un peu laissé en plan l’écriture de ce modèle. je m’y remettrai à l’occasion (mais pas du tout le temps en ce moment). ça n’est pas très compliqué, faut juste vérifier que les balises sont bien dans l’ordre et que les refs des docs joints à l’article avec des extensions lisibles par le player sont insérées au bon endroit...

  • Mat, le 13 janvier 2011 à 12:00

    @ Stef.

    Merci pour ta réponse, je vais essayer de continuer à chercher.

  • Calim, le 6 mars 2011 à 23:26

    Super ! Ca serait sympa d’en faire un vrai plugin !!!

  • SteF, le 7 mars 2011 à 00:33

    ouaip, ce serait sympa. tu nous en fais un plugin ? :)

  • Elo, le 26 mai 2011 à 10:51

    Bonjour,

    je suis très intéressée par votre modèle pour insérer des vidéos mais j’ai une petite question. Je suis novice dans l’utilisation de spip et je réalise moi même mes squelettes, du coup je voulais savoir s’il était possible de prévoir l’insertion de la vidéo directement dans le squelette de mon article à l’aide du boucle document, où comment inclure directement le modèle dans le squelette de mes articles pour qu’elle soit placé à un endroit précis. Dois-je utiliser la balise #MODELEmodele ? Et dans ce cas suis-je obligé d’ajouter la vidéo dans mon article où peut-on l’appeler depuis la pièce jointe sans l’insérer dans l’article ?

    Voilà, j’espère que vous pourrez m’aider parce que je suis un peu perdue !

    Merci d’avance,
    Elodie

  • SteF, le 27 mai 2011 à 06:04

    hello

    tu peux récupérer le code du modèle qui t’intéresse et l’intégrer à ton squelette article bien sûr, directement ou dans un fichier inclus.

    il te faudra quand même alors ajouter un test pour limiter l’inclusion du lecteur seulement dans le cas où un fichier multimedia est joint à ton article, et prévoir de générer une liste de lecture plutôt que plusieurs lecteurs lorsque plusieurs fichiers sont joints.

    quoi qu’il en soit, les modèles dispo ici ont été écrits avec une version assez ancienne de jwplayer, et il y a depuis moyen de faire bcp mieux avec les versions plus récentes, je te recommande donc avant toute chose de lire la doc sur le site de longtail video (nouvelle version du player, du code d’insertion, nouvelles options, etc).

    et sinon tu trouveras sur spip-contrib des lecteurs multimedia tout à fait fonctionnels et bien emballés sous forme de plugins, peut-être plus facile à utiliser que mon infâme bricolage :))

  • laurenceb, le 1er juillet 2011 à 17:38

    « NB - Ceci ne fonctionne pas sur les sites hébergés sur les pages perso de free, où il est impossible de référencer des documents distants. »
    et bien si , maintenant ça marche aussi chez Free...

  • SteF, le 1er juillet 2011 à 19:48

    hmm, alors ça c’est cool. mais je ne suis pas certain que ça soit débloqué d’office sur les sites qui ont été ouverts lorsque ces requêtes étaient bloquées. il parait qu’on peut faire la demande de déblocage sur les newsgroups de free, ils vérifient juste que le site est... respectable :)

  • Fennec72 (même pseudo sur spip-contrib.net), le 20 mai 2012 à 10:56

    Je cherche à afficher la playliste de mp3, d’un article spip, dans ce même article, mais je n’y arrive pas !

    j’ai essayé
    <article6|jwplayer>
    mais aussi, la copie dans le squelette du code du modèle article_jwplayer.html,
    mais rien n’y fait.

    sous l’icône de l’archive "Modèles pour insérer le JWPlayer dans SPIP", il est indiqué "Décompressez l’archive, renseignez les chemins et ajoutez son contenu au dossier squelettes"

    c’est là, sans doute que j’ai fait une erreur de chemin.

    de plus, la version de jwplayer téléchargeable à l’adresse que tu indique (http://www.longtailvideo.com/players/jw-flv-player/), ne comporte pas le fichier swfobject.js dont le chemin est mentionné en 2e ligne des modèles article_jwplayer.html et doc_jwplayer.html.

    un petit tuto pas à pas ne serait pas de trop.

    Merci d’avance.

  • Stéphane Busuttil, le 20 mai 2012 à 11:21

    hello. l’affichage de la playlist est complètement à revoir, et surtout il faudrait mettre à jour le tout puisque 3 ou 4 nouvelles versions du jwplayer sont sorties entre-temps. mais c’est très très loin dans ma liste de trucs urgents à faire ^^ dsl


Vos réactions

Laissez ci-dessous vos commentaires, précisions, remarques et questions. Vos contributions ne s'affichent publiquement qu'après validation, trop de spam sinon.

Commenter
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)

    texte
Qui êtes-vous ?

Retour en haut de la page

SPIP

SPIP est un logiciel unique, merveilleux et irremplaçable. Dans cette rubrique, quelques modestes contributions.

10 autres articles dans cette rubrique

Morceaux choisis


Contribuez à maintenir ces pages sur la toile.
Paiement sécurisé par Paypal ou CB

Frais d'hébergement depuis 2009 : 230 €
Total des dons depuis 2009 : 99 €

Another Teacher's Website est motorisé par SPIP.

Contribuez au contenu de ce site