SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 309 visiteurs en ce moment

Accueil > Affichage multimédia > Audio, vidéo > MediaElementPlayer > MediaElementPlayer

MediaElementPlayer

2 juillet 2013 – par erational – 24 commentaires

10 votes

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

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.

Voir en ligne : http://plugins.spip.net/mejs

P.-S.

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

Dernière modification de cette page le 11 décembre 2015

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 10 juin 2014 à 23:07, par David En réponse à : MediaElementPlayer

    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 11 juin 2014 à 08:23, par erational En réponse à : MediaElementPlayer

      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 6 octobre 2014 à 14:07, par 1138 En réponse à : MediaElementPlayer

      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

  • Le 8 décembre 2014 à 09:29, par Marc En réponse à : MediaElementPlayer

    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…

    • Le 8 décembre 2014 à 09:39, par erational En réponse à : MediaElementPlayer

      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

    • Le 8 décembre 2014 à 20:25, par Marc En réponse à : MediaElementPlayer

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

    • Le 14 décembre 2014 à 12:48, par Marc En réponse à : MediaElementPlayer

      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.

    • Le 6 avril 2015 à 11:39, par Etienne En réponse à : MediaElementPlayer

      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 :

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

      ou ça :

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

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

    • Le 8 avril 2015 à 16:46, par Etienne En réponse à : MediaElementPlayer

      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

  • Le 14 octobre 2014 à 10:47, par sacha En réponse à : MediaElementPlayer

    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 !

    • Le 10 décembre 2014 à 13:33, par Pierrot En réponse à : MediaElementPlayer

      Bonjour, où trouve-t-on la version 2.5.1 de MediaElementjs ?
      Merci

    Répondre à ce message

  • Le 18 septembre 2014 à 14:11, par Patrocle En réponse à : MediaElementPlayer

    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

  • Le 12 décembre 2013 à 16:50, par jlg13 En réponse à : MediaElementPlayer

    Bonjour,

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

    Une idée ?

    JL

    • Le 12 décembre 2013 à 16:52, par jlg13 En réponse à : MediaElementPlayer

      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

  • Le 27 novembre 2013 à 23:30, par ograville En réponse à : MediaElementPlayer

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

    • Le 5 décembre 2013 à 01:18, par ograville En réponse à : MediaElementPlayer

      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

  • Le 1er octobre 2013 à 17:34, par Caracole En réponse à : MediaElementPlayer

    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

  • Le 25 août 2013 à 13:03, par Shema En réponse à : MediaElementPlayer

    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 ?

    • Le 18 septembre 2013 à 04:09, par Chris En réponse à : MediaElementPlayer

      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

  • Le 18 août 2013 à 08:39, par rcaron En réponse à : MediaElementPlayer

    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

  • Le 14 août 2013 à 12:32, par monsieurL En réponse à : MediaElementPlayer

    Bonjour,

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

    Cordialement

    • Le 16 août 2013 à 04:46, par erational En réponse à : MediaElementPlayer

      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

Répondre à cet article

Qui êtes-vous ?

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Newsletters

    16 janvier 2013 – 377 commentaires

    Ce plugin permet de composer des Info-lettres. Par info-lettre, on désigne ici le contenu éditorial qui va être composé et envoyé par courriel à une liste d’inscrits. Le plugin permet de composer une info-lettre à partir d’un modèle pré-composé, (...)

  • Mode portail Communiquant pour SoyezCréateurs

    29 septembre 2010 – 20 commentaires

    5e mode d’affichage de la page d’accueil, ce mode se distingue des autres par une animation proposant un fondu/enchaîné des logos des articles à la une. Zonage Configuration Zone d’entête Nom du site Slogan si plugin bandeau présent (...)

  • Configurer Sparkpost

    25 avril – 14 commentaires

    N’hésitez pas à relire le préambule de cette rubrique avant de créer un compte sur une plateforme tierce . Présentation Sparkpost est une société d’envoi de mailing https://www.sparkpost.com/ Sur les petits volumes ( <100.000 emails / mois), (...)

  • Plugin Logo SVG : pouvoir utiliser des logos SVG

    17 octobre – commentaires

    Le SVG est un format vectoriel donc très léger et redimensionnable sans pertes, mais SPIP ne l’acceptait pas sur les logos. Ce plugin comble ce manque. Comment ça fonctionne ? Vous installez ce plugin, vous l’activez, et c’est tout. Crédits Une (...)

  • Utilisez le framework Foundation dans vos squelettes !

    13 août 2013 – 58 commentaires

    Foundation est un framework CSS et Javascript très complet pour réaliser des sites sur une grille propre et homogène. Mais surtout, il permet de rendre un site responsive très facilement ! Ce plugin ajoute le framework Foundation sur l’espace (...)

Ça spipe par là