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

Sommaire

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.

Sommaire

Installer les modèles SPIP

Modèles pour insérer le JWPlayer dans SPIP

Décompressez l’archive, renseignez les chemins et ajoutez son contenu au dossier de votre squelette

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

Sommaire

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 :

Sommaire

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.

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.

Sommaire

Afficher des sous-titres sur une vidéo

Le modèle permet d’afficher des sous-titres à 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.

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.

Sommaire

Liste de lecture

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

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.

Sommaire

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.

Sommaire

Exemple

Ben Howard - Keep your head up

Lyrics synched with http://www.youtube.com/watch?v=RD8B...
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.

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