MediaElementPlayer

Lecteur audio et vidéo HTML5

Avertissement : SPIP 3.1. intègre nativement mediaElementJs dans ces modèles de document sons et vidéos. Depuis 2015, le lecteur a aussi été intégré comme lecteur par défaut dans le plugin Lecteur Multimédia Ce plugin ne sera donc pas porté pour SPIP 3.1 ni maintenu

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

NomDescriptionValeurs 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

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

<videoXX>

Habillage ted
<audioXX|skin=ted>, <videoXX|skin=ted>

Habillage wmp
<audioXX|skin=wmp>, <videoXX|skin=wmp>

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.

Le plugin Spip intègre la version du lecteur mediaelementplayer 2.13.2

Discussion

11 discussions

  • 2

    Bonjour,

    Il y a t’il une possibilité que ce plugin lise les vidéos youtube ? il me semnle que mediaelementsjs le fait de base, alors que ce plugin spip ne semble lire que les vidéos HTML5 hébergé dans le CMS (et qui fonctionne très bien).

    Merci de votre aide.

    • le but du plugin était plutôt la lecture de vidéos locales mais cela doit être possible à intégrer .

      pour les vidéos externes, si vous conseille l’excellent plugin oembed.

    • Le plugin Vidéo(s) permet d’ajouter – entre autres – des vidéos youtube. Hélas, il entre en conflit avec MediaElementPlayer puisqu’ils proposent tous les deux le modèle . Par contre, il n’y a pas de gestion de l’élément

      @erational. Penses-tu qu’il est possible d’ajouter à ton plugin la possibilité de (dés)activer la gestion de la vidéo ou de l’audio ?

    Répondre à ce message

  • 5

    J’ai un problème, sur un site en 3.0.13 :
    les paramètres <videoXX | largeur=XX | hauteur=XX > sont sans effets. Impossible de modifier les dimensions du player, sauf dans la config du plugin…

    • il ne faut pas mettre de blanc <videoXX|largeur=XX|hauteur=XX>
      et vérifier si aucun autre plugin ne parasite pas le modèle vidéo

    • j’ai désactivé les autres plugins du site (et les paramètres du modèle étaient correctement écrits), mais rien n’y fait.

    • Je me réponds à moi-même, mon problème de paramètres largeur et hauteur n’intéresse personne ?
      C’est pourtant bien pratique.

    • Etienne

      Bonjour,

      Je suis également confronté à des difficultés pour réduire les dimensions du lecteur dans une colonne de brèves. J’essaie d’intervenir dans mon squelette.
      ça :

       #MODELE{video,largeur=200,hauteur=150}

      ou ça :

       [(#MODELE{video}|largeur=200|hauteur=160|)]

      dans tous les cas ça me laisse les dimensions par défaut du lecteur.

    • Etienne

      Je me réponds grâce à l’aide précieuse de la liste spip-rezo. L’astuce consiste à encapsuler l’appel de la vidéo dans deux div afin de l’adapter au bloc dans laquelle elle se trouve.

      Dans mon squelette, là où je veux insérer la vidéo :

      #MODELE{video}

      Modification du fichier modeles/video.html du plugin (à mettre dans squelette/modeles) :

      <div class="capsule-video"><div class="mini_capsule-video">
      <video id="mejs-#ID_DOCUMENT" src="#FICHIER" width="100%" height="100%"
            [(#MIME_TYPE|=={application/mp4}|oui) type="video/mp4"]
      preload="none"  controls="controls"
      [(#LOGO_DOCUMENT|extraire_attribut{src}|couper{23,''}|=={plugins-dist/medias}|non)
      poster="(#LOGO_DOCUMENT|extraire_attribut{src})"]]
      class="mejs[ mejs-(#ENV{skin})]"
      ></video>
      </div></div>

      Les ajouts ou changements sont aux lignes 1,2,3 et 11 du code ci-dessus.

      Ajout au fichier mejs/mediaelementplayer.css du plugin (à mettre dans squelette/mejs) :

      .capsule-video {max-width: 85%; margin: auto; }
      .mini_capsule-video { position: relative;    padding-bottom: 56.25%;    padding-top: 0px;height: 0;overflow: hidden; }
      .mini_capsule-video video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;} 

      Et chez moi ça fonctionne apparemment pas mal. Grand merci à un certain Laurent de la liste Spip-rezo.

    Répondre à ce message

  • 1

    La version testée du plugin (0.2.1 - dev) ne permet pas le plein écran avec Chrome. Je viens de copier la version 2.5.1 de MediaElementjs cela fonctionne maintenant !

    Répondre à ce message

  • Bonjour,

    J’utilisais jusqu’à présent le plugin vidéo accessible, or sur mon dernier site, il m’affiche les vidéos mais ne les lance pas (video not found or access denied) à l’appui sur le bouton lecture.

    En cherchant des plugins fonctionnant, je tombe sur celui-ci, il ne lit pas les flv ^mais pas grave, je convertirais mes vidéos.

    Par contre, y-a-t-il un moyen de rajouter des skins que les 2 existants ?

    Par avance merci

    Répondre à ce message

  • 1

    Bonjour,

    Impossible de voir le plugin dans mon interface privée.
    Je l’ai posé dans le dossier /plugins/auto...

    Une idée ?

    JL

    • Désolé, je n’avais pas lu les posts précédents :

      Version minimale 3.0.10 et je suis en 3.0.8

    Répondre à ce message

  • 1
    ograville

    Personnellement, ça a fait disparaître toute la mise en forme de mon site. :-(

    • Je reviens sur ce que j’ai dit, le problème venait d’un autre plugin. Merci beaucoup pour ce plugin.

    Répondre à ce message

  • Bonjour,

    je met en place un site sous spip 3.0.10. J’ai suivi les recommandations ci-dessous pour une vidéo en .mp4, mais dans la partie public, la vidéo ne s’affiche pas (aucun plug-in disponible pour lire cette vidéo). Je n’arrive pas à accéder aux paramètres de configuration du plug in.

    Que dois-je faire ?

    Merci d’avance

    Répondre à ce message

  • 1

    Aidez moi, je ne parviens pas à activer le plugin. Mon SPIP 3.0 le place dans la liste des plugins incompatibles ainsi je ne peux l’activer. Que faire ?

    • Salut, tu es en 3.0.???
      le plugin est déclaré compatible pour les versions ultérieures à la 3.0.10 ...
      changer la déclaration compatibilite=« [3.0.10 ;3.0.*] » permettra p-e de l’activer mais je ne sais pas si il fonctionnera..

    Répondre à ce message

  • Bonjour,

    J’essaie ce plugin... Après installation et transfert d’un fichier mp4, j’ai une fenêtre avec le logo quicktime et enseuite un point d’interrogation et rien ne marche...

    Une idée ?

    Robert

    Répondre à ce message

  • 1
    monsieurL

    Bonjour,

    Le plugin ne lit que les .mp4 ?
    Mes videos sont en flv, dois-je toute les convertir ?

    Cordialement

    • Le but du plugin est de fournir un lecteur vidéo le plus universel possible (notamment sur les plateformes mobiles). C’est pourquoi il se base sur le format mp4.

      Si vous voulez l’utiliser, il faut convertir vos vidéos en mp4.

      Si vous voulez conserver vos flv, rien ne vous empêche d’utiliser un autre plugin comme par ex. Vidéo Accessible

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom