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