Présentation
Le lecteur MediaElementJs est un lecteur HTML5 permettant de lire des sons et vidéos. Son originalité est qu’il part des capacités natives de chaque navigateur à lire des balises <audio>, <video>
pour l’enrichir progressivement avec du flash et javascript.
Ce lecteur permet de résoudre d’une façon assez élégante les conflits entre les différents formats vidéos.
Le panneau des compatibilités est large : Internet explorer 8+, Firefox, Safari, iOS, Android .... Tableau de compatiblités
Le lecteur est aussi compatible avec un design responsive ou sur des navigateurs mobiles récents.
La syntaxe du plugin spip est rétro-compatible avec la syntaxe du plugin Lecteur multimédia.
Installation
Installer le plugin dans votre Spip de la façon habituelle.
L’auteur recommande d’ajouter des lignes dans votre .htaccess
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Utilisation : Son
- Ajouter vos fichiers en format mp3
- Insérer le lecteur via le raccourci
<audioXX>
ou<docXX|player>
Paramètres facultatifs
Nom | Description | Valeurs possibles |
---|---|---|
skin | habillage | ted, wmp |
largeur | largeur du lecteur en pixels | |
hauteur | hauteur du lecteur en pixels | |
volume | largeur de lecteur en pixels | 0 à 1 (plein volume) |
loop | jouer en boucle | oui, true |
autoplay | lancer la lecture automatiquement | oui, true |
Exemple avec tous les paramètres
<audio5|skin=wmp|largeur=200|hauteur=30|volume=0.5|loop|autoplay>
Utilisation : Vidéo
- Ajouter vos fichiers en format mp4 (h264)
- Renseigner la hauteur et la largeur de la vidéo.
- Si vous ajoutez une vignette personnalisé à votre document vidéo, elle servira d’image de prévisualisation de la vidéo
- Insérer le lecteur via le raccourci
<videoXX>
ou<docXX|player>
Paramètres facultatifs
Nom | Description | Valeurs possibles |
---|---|---|
skin | habillage | ted, wmp |
volume | largeur de lecteur en pixels | 0 à 1 (plein volume) |
Exemple avec tous les paramètres
<video5|skin=wmp|volume=0.6>
ps. Le lecteur mediaplayer propose aussi une autre solution avec des videos alternatives (option B) mais il n’est pas (encore) proposé dans le plugin Spip.
Habillages (skins)
Habillage par défaut
<audioXX>
![](local/cache-vignettes/L400xH30/lecteur1-7ddaa.png?1667389304)
<videoXX>
![](local/cache-vignettes/L400xH300/video-2-cf599.png?1667389304)
Habillage ted
<audioXX|skin=ted>, <videoXX|skin=ted>
![](local/cache-vignettes/L400xH65/lecteur-ted-d8e08.png?1667389304)
Habillage wmp
<audioXX|skin=wmp>, <videoXX|skin=wmp>
![](local/cache-vignettes/L397xH73/lecteur-wmp-57d97.png?1667389304)
API
Le lecteur est géré via javascript et dispose de nombreuses fonctions de lecture, callback en fin de lecteur de morceau, ...Documentation de l’API
A faire
- Mieux dans intégrer dans médiathèque
- Enrichir les modèles pour proposer plus d’options.
Le plugin est sur la zone. Libre à chacun de le modifier et l’améliorer.
Aucune discussion
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires :
|
![Atom](plugins/dist/plugins/comments/feed/atom.png)