SPIP-Contrib

SPIP-Contrib

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

290 Plugins, 198 contribs sur SPIP-Zone, 105 visiteurs en ce moment

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

MediaElementPlayer

2 juillet 2013 – par erational – 24 commentaires

11 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

  • GIS 4

    11 août 2012 – 1524 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • ScolaSPIP 4

    19 janvier 2016 – 383 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • Jeux pour SPIP 3

    27 juillet 2012 – 53 commentaires

    Un portage pour SPIP 3 du plugin Jeux a été fait. Explications et nouveautés. Cet article concerne une mise à jour du plugin Jeux dont la description complète est disponible ici : Des jeux dans vos articles !. Le code du plugin Jeux est un code (...)

  • Plugin Vidéo(s)

    23 novembre 2010 – 704 commentaires

    Interface de gestion et modèle d’insertion des vidéos : Dailymotion Vimeo Youtube Modèle de la balise HTML5 video avec alternative flash html5media : Lecture HTML5/Flash pour tout navigateur des fichiers MP4/H264/Ogg/WebM/Mkv Support mobile, iPad, (...)

  • Vidéo Accessible

    6 avril 2011 – 168 commentaires

    Un plugin pour faciliter la diffusion de vidéos accessibles. Accessibilité des vidéos Accessibilité de la vidéo Afin d’être pleinement accessible, une vidéo (composée d’images et de sons) doit répondre à plusieurs critères. Le critère de base est (...)