SPIP-Contrib

SPIP-Contrib

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

289 Plugins, 197 contribs sur SPIP-Zone, 84 visiteurs en ce moment

Accueil > Affichage multimédia > Audio, vidéo > Vidéo(s) > Plugin Vidéo(s)

Plugin Vidéo(s)

23 novembre 2010 – par xdjuj – 699 commentaires

128 votes

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, iPhone, Android, etc.

A quoi ça sert ?

Ce plugin permet d’intégrer à partir d’un simple copier/coller d’URL sur les pages articles des vidéos hébergées sur les principales plateformes d’hébergement vidéo et de les gérer comme des documents à part entière.

Ce plugin gère également l’affichage HTML5 des vidéos aux formats MP4, H264, Ogg, WebM et Mkv.
Ll’affichage par défaut prend en compte les navigateurs mobiles. Les vidéos sont ainsi disponibles sur iPad, iPhone ou autres Androïds.

Pourquoi le plugin Vidéo(s) plutôt qu’une alternative HTML5 classique avec Fallback Flash ?

Et bien parce que le plugin Vidéo(s) s’appuie sur une détection JavaScript des formats disponibles et reconnus et non sur la détection native du navigateur qui ne vérifie que si la balise HTML5 vidéo est gérée, mais pas si un format lisible est présent.

L’alternative Flash gérée classiquement n’est proposée qu’aux navigateurs ne gérant pas la balise HTML5 vidéo, mais elle ne prend pas en compte la gestion des formats proposés. Ainsi, une vidéo au format H264 sera visible sous Safari/Chrome (nativement), sous Internet Explorer (alternative Flash) mais pas sous Firefox qui connaît bien la balise vidéo et sait l’interpréter, mais ne sait pas lire le H264, il renverra donc une balise vidéo vide, pas de film ! Ainsi, vous devrez encoder votre vidéo dans tous les formats afin de vous assurer qu’elle sera lisible partout. En Ogg par exemple pour Firefox, en plus du H264 pour Safari et autres.

Le plugin Vidéo(s) va plus loin, sa détection se base sur la présence d’un format lisible par le navigateur et s’appuie sur le plugin Javascript html5media. Ainsi, dans notre exemple précédent, Firefox recevra l’alternative flash et sera donc capable de lire la vidéo H264 sans avoir besoin d’une version Ogg du fichier.

Pourquoi ne pas utiliser un lecteur Flash compatible HTML5 comme JW Player ?

Parce que ces lecteurs prennent le problème à l’envers ! Ils génèrent une balise HTML5 vidéo pour les navigateurs qui peuvent l’utiliser. Le code source quant à lui ne contient que des appels Javascript. La sémantique n’est donc pas respectée.

Le plugin Vidéo(s) quant à lui s’appuie sur la balise vidéo qu’il insert dans le code source pour proposer au besoin uniquement, une alternative Flash. Le code source est respecté.

Cependant, les lecteurs n’auront donc pas le même rendu graphique, la balise vidéo étant laissée à la charge du navigateur qui l’interprète. JW Player quant à lui propose une interface unifiée pour l’affichage de la balise HTML5 vidéo ainsi que son alternative Flash, mais aussi pour les vidéos Dailymotion, Vimeo et autres Youtube. C’est bien le seul avantage qu’on pourra donc vouloir trouver à ces solutions (souvent payantes).

Comment ça marche ?

L’installation du plugin se fait comme pour tous les plugins.

Configuration

Un panneau de configuration permet pour l’instant de choisir une taille d’affichage vidéo par défaut pour toutes les vidéos.


Ce panneau sera élargi pour offrir des réglages spécifiques à chaque type de vidéo : Dailymotion, Viméo, Youtube...

Ajouter une vidéo

Depuis la page d’un article ou depuis la page d’édition d’article dans la colonne de gauche un champ de saisie permet de copier/coller le lien vers la page de votre vidéo.

Aucun besoin d’extraire un identifiant ou de copier un code quelconque, l’adresse complète est suffisante :

Les vidéos sont alors disponibles comme n’importe quel document depuis la page article ou depuis la Médiathèque de SPIP (https://contrib.spip.net/Mediatheque qui permet au plugin Vidéo(s) d’insérer l’auteur et la durée du film).


Afficher une vidéo

Le plugin Vidéo(s) de SPIP surcharge le modèle "video" qui permet aux auteurs de SPIP d’intégrer n’importe quelle vidéo depuis n’importe quel article.

Le fonctionnement est le fonctionnement classique des modèles :

  1. <videoYY>

avec YY (:p) représentant le numéro de document de la vidéo.

Les options peuvent se rajouter à la suite :

  1. <videoYY|largeur=640|hauteur=360>

Ce nouveau modèle rajoute la lecture des vidéos importées depuis les plateformes ainsi que la lecture HTML5 des contenus de type MP4/H264, WebM, Ogg.
Dans tous les autres cas (autres extensions), c’est le fonctionnement classique qui est respecté.

Pour les webmasteurs, depuis les squelettes l’appel se fait également de manière classique :

  1. #MODELE{video,document=XX}
  2. #MODELE{video,document=XX,largeur=640,hauteur=360,autoplay=oui}

Télécharger

Une page de test et d’exemple est disponible dans le dossier "exemple/" du plugin Vidéo(s), il suffit de la glisser dans le dossier "squelettes/" de votre SPIP et de vérifier à l’adresse :
http://www.votreDomaine.com/spip.php?page=mesVideos
Elle affiche toutes les vidéos distantes qui ont été uploadées avec le plugin.

Et les vidéos HTML5 pour tous ?

Avec la diversité des formats, il devient difficile de satisfaire tout le monde. Le HTML5 offrant une forme élégante d’affichage des vidéos, il est cependant frustrant de devoir compresser autant de vidéos que de navigateurs.

Le modèle vidéo intégré au plugin Vidéo(s) suggère une alternative simple mais basée sur le format propriétaire H264.

Les vidéos H264 peuvent en effet être lues nativement dans tous les navigateurs modernes grâce à la balise HTML5 (à l’exception de Firefox qui utilise l’alternative). Elles sont de plus accessibles aux iPad et autres mobiles qui n’ont pas la possibilité d’utiliser Flash.

Enfin, pour tous les autres navigateurs, les vidéos H264 sont tout de même lues et de manière transparente par Flash Player à partir de sa version 9.

Nous pouvons donc utiliser un même fichier H264 afin de satisfaire l’intégralité des navigateurs, soit via HTML5 soit via son alternative Flash !

Si vous utilisez la balise #INSERT_HEAD de SPIP (de nombreux squelettes l’utilisent par défaut), les autres navigateurs utiliseront l’alternative flash (player FlowPlayer proposée par le script du projet html5media).

Cependant, bien que très répandu (Blueray, Télévision, Internet, etc.) le H264 est un format propriétaire boycotté par les navigateurs tels que Firefox et Google Chrome. Ces deux navigateurs utiliseront donc l’alternative Flash si seule une version H264 de votre vidéo est disponible.

Toutefois, grâce au plugin Vidéo(s) de SPIP, si une même vidéo est disponible en plusieurs format (même nom de fichier mais extensions différentes) ils seront tous utilisés par la balise vidéo. Il devient ainsi possible d’ajouter votre vidéo en WebM ou Ogg (ou les 2) en plus de la vidéo H264 (ou sans la vidéo H264).

Cependant l’encodage du fichier dans différent format représente une perte de temps en compression ainsi qu’en temps de mise en ligne et nécessite plus d’espace d’hébergement. Le choix vous appartient donc.

Et moi ? Comment je compresse mes vidéos ?

La compression H264 est réalisable avec une facilité déconcertante grâce au logiciel libre HandBrake.

Les seuls paramètres importants à respecter étant "Web Optimized" et un débit moyen (average bitrate) de 1500kbps (1200 si l’on souhaite conserver une qualité optimale mais rendre la vidéo disponible sur iPhone par réseau 3G, 1900 maximum pour que les vidéos restent accessibles aux iPad sur réseau WiFi).

Si votre source vidéo provient d’une caméra DV Pal, n’oubliez pas de désentrelacer votre image (deinterlace ON / fast).

Et j’ai quoi comme options ?

Options générales

  • responsive : pour que largeur et hauteur soient dynamiques (fluides) et occupent au mieux l’espace qui leur est disponible, tout en conservant les proportions
  • largeur : pour forcer une largeur différente de la largeur par défaut
  • hauteur : pour régler une hauteur différente de la hauteur par défaut

"Dit donc ça fait pas grand chose..."
C’est vrai, mais tout est déjà dans le code, il manque juste quelques heures de travail pour finaliser et piloter intégralement tous les players :)

Et YouTube dans tout ça ?

Comme à son habitude, le diable Google n’arrête pas de changer ses API, sans trop crier gare... Il est désormais nécessaire de posséder une clef d’API YouTube afin de pouvoir récupérer une vidéo de la plateforme.

La première chose à faire est de se rendre dans la console des développeurs Google avec un compte Google Developper (en créer un au besoin) :
-  https://console.developers.google.com/
(ce lien aura très certainement changé 40 fois dans les 5 mois à venir, comme d’hab avec Google, rien ne reste !)

Les étapes suivantes à partir du Developper Center sont données par Mist. GraphX :
-  créer un projet si ça n’est pas déjà le cas,
-  aller dans l’onglet API et authentification > API, sur cette page on aura la liste de toutes les API disponibles (cf la capture), sur l’onglet Bibliothèque d’API,
-  aller sur l’onglet API Activés pour vérifier les API actives, activer l’API YouTube au besoin,
-  dans la partie identifiants on peut générer la clef, ou la re-générer dans la partie Accès à l’API publique
-  il faut utiliser la clef pour le navigateur, vu que c’est ce que l’on recherche, à priori SPIP n’est pas encore une appli mobile... là il n’y a pas trop de choix, on clic sur créer sans renseigner de référents.

Pour résumer, il faut donc aller dans Bibliothèque d’API > API YouTube > YouTube Data API et là il suffit de cliquer sur le bouton "activer".

Enfin, sur la page d’administration du plugin Vidéo(s), il restera simplement à saisir la clé de serveur dans le champs "Clé d’API YouTube".

Et si je ne veux pas faire de H264... ?

Les compressions WebM sont quant à elles réalisables à partir du simplissime Miro Video Converter.

La qualité de ce dernier n’étant pas des plus reluisantes à mon goût, vous pourrez lui préférer certaines alternatives (utilisateurs Mac OS). N’hésitez pas à vous référer à la documentation officiel du projet WebM

Enfin, dans tous les cas, pour les utilisateurs avancés, FFmpeg reste bien entendu la solution la plus complète, en ligne de commande s’il vous plait.

Avec quoi ça casse ?

Avec une mauvaise configuration serveur
Certains serveurs peuvent se tromper sur les types MIME de vos fichiers qui ne seront alors pas forcément reconnus par les navigateurs. Dans ce cas (par exemple présence d’un fichier .webm Firefox refusant de le jouer), il suffit de corriger la configuration côté serveur ou simplement dans votre fichier .htaccess en renseignant les bons types :

AddType video/ogg  .ogv
AddType video/mp4  .mp4
AddType video/webm .webm

Avec PHP4
Le plugin utilise pour l’instant PHP5 que l’hébergement doit donc supporter.

Et si je n’ai pas PHP5 par défaut ?

  • Chez OVH : http://guides.ovh.com/Php5ChezOvh (SetEnv PHP_VER 5)
  • Chez Ouvaton : ajouter en tête du fichier .htaccess de SPIP la ligne :
    AddHandler application/x-suexec-php5 .php si le fichier n’existe pas, le créer et y mettre seulement cette ligne, ou renommer htaccess.txt de SPIP en y ajoutant la ligne en entête
  • Chez les autres : http://www.google.fr
  • Chez 1 and 1 : activer PHP5 depuis l’espace client, dans le dossier « ecrire » de spip, rajouter un fichier php.ini contenant :
    allow_url_fopen = on
    allow_url_include = on
  • Chez InfoManiak (ou plus largement sur les serveurs interdisant fopen de php)
    Pour InfoManiak il vous suffira de rajouter à votre fichier .htaccess les informations suivantes détaillées sur leur FAQ :
    php_flag "allow_url_fopen" "On"
    php_flag "allow_url_include" "On"
  • mis à jour 2016 pour InfoManiak Sur la nouvelle plateforme, il ne faut pas plus passer par le .htaccess mais par l’interface d’administration et activer l’option "Activer allow_url_fopen" (voir les détails de leur nouvelle FAQ]

Sinon pour l’instant aucun plugin ne semble contre indiqué et le plugin Médiathèque vous est même fortement recommandé.

Comment faire (encore) mieux ?

  • Compléter les options de modèles et configurations Dailymotion / Youtube / Vimeo / HTML5
  • Revoir un brin l’ergonomie et les messages
  • Rajouter un sélecteur simple pour gérer le format (1,77 / 2,35 / 4/3 etc.)
  • Retirer l’affichage <doc>et mettre <video> à la place dans la colonne de gauche
  • Edition des URL pour les corriger à la main (crayon sur #FICHIER - déjà possible avec Mediatheque)

Voir en ligne : https://plugins.spip.net/videos

Dernière modification de cette page le 1er novembre 2017

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 25 juin 2014 à 11:50, par Julien En réponse à : Plugin Vidéo(s)

    Bonjour,

    Pourrait on pas avoir le bouton « Ajouter une vidéo » à la source de l’article ? (dans le preview) Sans devoir cliquer sur « modifier l’article ».

    Merci.

    Répondre à ce message

  • Le 29 janvier 2014 à 09:51, par Fred En réponse à : Plugin Vidéo(s)

    Bonjour,

    j’utilise Spip 3.0.13 et Vidéos 0.10.8. J’ai désactivé tous les autres plugins non verrouillés.

    Lorsque j’essaie d’ajouter la vidéo distante Youtube http://www.youtube.com/embed/0WxDrVUrSvI (c’est un exemple), j’obtiens l’erreur suivante :

    Fatal error : Uncaught exception ’Exception’ with message ’Unable to get the video data. Please make sure the service you’re trying to use is supported by Videopian.’ in C :\wamp\www\spip\plugins\auto\videos_3\lib\Videopian.php on line724
    ( ! ) Exception : Unable to get the video data. Please make sure the service you’re trying to use is supported by Videopian. in C :\wamp\www\spip\plugins\auto\videos_3\lib\Videopian.php on line 724

    Merci de votre aide.

    • Le 3 juin 2014 à 17:25, par Marco En réponse à : Plugin Vidéo(s)

      Bonjour.

      J’ai le même message mais ma config est différente : Spip 2.1.23 et Videos 0.9.8 [64763]
      Et mes liens pointent chez viméo.

      Voyez-vous quelque chose ?

      Merci de votre aide

    Répondre à ce message

  • Le 1er juin 2014 à 19:10, par freedfromparis En réponse à : Plugin Vidéo(s)

    Bonjour,
    Merci pour cet excellent plugin.

    J’ai cependant une petite question : y-a-t-il un moyen de choisir la taille de la vignette récupérée sur Youtube ?

    Merci d’avance.

    Freed

    Répondre à ce message

  • Le 26 mai 2014 à 12:48, par flouvel En réponse à : Plugin Vidéo(s)

    Bonjour,
    super, pas de problème pour intégrer des vidéos avec <videoN>
    (ex : http://bleaulib.org/spip.php?album52).
    Mais comment rendre le lien #URL_DOCUMENT opérant (sur les vignettes ou logo) ?
    dans une mediabox comme pour les autres images de la mediatheques serait top !
    Là sur le site public comme dans la médiathèque le lien sur vignette est invalide.
    (en tout cas sur notre site, en spip 3)
    merci pour ce plugin attrayant

    Répondre à ce message

  • Le 17 février 2014 à 21:59, par haqqtiviste En réponse à : Plugin Vidéo(s)

    bonsoir
    dommage, ça marche plus...

    l’ajout d’une vidéo youtube génère une erreur.

    Répondre à ce message

  • Le 12 février 2014 à 15:02, par robomatix En réponse à : Plugin Vidéo(s)

    Bonjour,

    Sur un des sites dont nous avons la charge, les vidéos ne s’affiche plus...
    J’ai fait la mise à jour, mais le problème persiste...

    J’ai regardé le code généré et j’ai vu ça :

    <iframe title="titre video" src="//player.vimeo.com/video/666778899?byline=0" width="480" height="270" frameborder="0"></iframe>

    Il semblerait que le « htpps :// » soit absent... Est ce un bug du plugin ou autre chose ?

    Merci de votre aide !

    • Le 13 février 2014 à 13:27, par robomatix En réponse à : Plugin Vidéo(s)

      Bon, j’ai regardais un peu plus profondément ce problème.

      En fait, il y a maintenant une option dans la config qui permet d’avoir une vidéo en responsiv design...
      Comme le site n’est pas en responsiv et que ça semble l’origine du problème, j’ai essayé de la désactivée . Malheureusement le changement n’est pas pris en compte...

      Pour y remédier, j’ai modifié le code du modèle video pour commenter les balises qui permettent de faire du responsiv design... Pour vimeo seulement, car les vidéos du site viennent toutes de vimeo.

      Donc vers la ligne 81 du modèle vidéo mettre :

                      [(#GET{responsive}|=={oui}|oui)<!-- <div class="capsule-video"><div class="mini_capsule-video"> -->]
                              <iframe[ title="(#GET{titre_video}|couper{80})"] src="https://player.vimeo.com/video/#GET{fichier}?byline=0" width="#GET{largeur}" height="#GET{hauteur}" frameborder="0"></iframe>
                           
                      [(#GET{responsive}|=={oui}|oui)<!-- </div></div> <!-- .capsule-video .mini_capsule-video -->]

      Si vous utilisez d’autre sources devidéos, modifié le reste du code en conséquence...

      Voilà ! C’est pas le top, mais ça marche !

    Répondre à ce message

  • Le 11 février 2014 à 00:26, par Manu En réponse à : Plugin Vidéo(s)

    J’ai une mutu SPIP (SPIP 3.0.14) pour laquelle je fais une mai du site distant.

    Le plugin vidéos ne veut pas s’installer et j’ai les deux messages suivants qui me laissent perplexe
    L’activation du plugin « Vidéo(s) » (version : 0.10.8) s’est correctement déroulée
    L’installation du plugin « Vidéo(s) » (version : 0.10.8) a échoué

    Que cela signifie-ti-il exactement ? Dans quelle direction chercher pour corriger l’échec : d’ailleurs, qu’est-ce au juste l’installation d’un plugin ? Autrement dit dans le cas du plugin vidéos, , quand l’installation échoue, qu’est-ce qui échoue précisément ?

    Répondre à ce message

  • Le 25 novembre 2013 à 19:28, par Teenoo En réponse à : Plugin Vidéo(s)

    Bonjour,

    depuis la MaJ vers Spip 3.0.13 et la dernière MaJ du plugin, l’intégration de vidéos Vimeo mouline sans charger la vidéo... Suis-je la seule avec ce problème ?

    Merci de vos réponses

    • Le 20 janvier 2014 à 12:30, par Fred@cirederf.net En réponse à : Plugin Vidéo(s)

      Oui étrange, j’ai le même soucis avec OVH PHP5.4

    • Le 6 février 2014 à 11:46, par Aude En réponse à : Plugin Vidéo(s)

      idem avec You tube

      Quelqu’un a une solution ?

    Répondre à ce message

  • Le 17 janvier 2014 à 16:31, par Manu En réponse à : Plugin Vidéo(s)

    Désinstallation qui échoue
    Bonjour, j’observe un dysfonctionnement du plugin pour lequel j’ai l’impression que quelque chose n’a pas été clair dans l’installation. Je me suis dit qu’une désinstaallation puis une réinstallation ne pourrait pas faire de mal.
    Depuis ?exec=admin_plugin, je demande la désinstallation du plugin… qui échoue :« La désinstallation du plugin a echoué. Vous pouvez néanmoins le désactiver ».

    Comment puis-je faire pour désinstaller puis réinstaller ?

    SPIP 2.1.19 et Videos 0.9.8

    • Le 17 janvier 2014 à 18:50, par Manu En réponse à : Plugin Vidéo(s)

      Je continue mon exploration pour essayer de voir d’où vient le non-fonctionnement
      Le fichier modèles/video.html consiste à traiter les différents cas de figure en se basant sur l’extension. J’ai voulu faire un essai avec le document 3773 qui a dist_youtu comme valeur dans le camp extension.

      Pour tester le comportement de la boucle, j’ai modifié le code ainsi :

      (debut du code original)
      <BOUCLE_LaVideo(DOCUMENTS){id_document=3773}{tout}>
      le nom du fichier est #FICHIER <br>
      l'extension est : #EXTENSION
      … (reste du code original)

      Un recalcul de la page donne bien la valeur du champ fichier mais le champ extension ne retourne rien. Si je fais le test avec une image ou un document pdf , la réponse cette fois est correcte !

      Quel est donc ce mystère ?

    Répondre à ce message

  • Le 14 janvier 2014 à 23:44, par Fred En réponse à : Plugin Vidéo(s)

    Bonjour,

    Cela fonctionne pour Viméo,
    mais j’ai l’erreur suivante avec les urls YouTube :

    Fatal error : Uncaught exception ’Exception’ with message ’Unable to get the video data. Please make sure the service you’re trying to use is supported by Videopian

    Ma conf :
    SPIP 3.0.13 hébergé chez OVH
    Vidéo(s) 0.10.8 - dev

    • Le 15 janvier 2014 à 06:54, par xdjuj En réponse à : Plugin Vidéo(s)

      Salut.

      Je pense le refondre correctement en février. Peut-être que quelqu’un aura réglé ton problème d’ici là mais dans tous les cas je dois le faire pour février :)

      Bonne journée.

    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

  • Version PDF avec SPIP2LaTeX

    13 janvier 2011 – 88 commentaires

    SPIP2LaTeX converti le langage de marquage de SPIP en LaTeX. Utilisé avec une installation de LaTeX, il permet de produire des versions PDF des articles d’un site. Le style par défaut des PDF produits est peu excitant, l’usager final voudra sans (...)

  • Réservation d’événements

    16 mars 2015 – 389 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification Facteur (...)

  • En travaux 2.0

    15 mai 2009 – 71 commentaires

    À utiliser pendant une phase de maintenance, ce plugin affiche une page d’avertissement personnalisable, en lieu et place du site public.

  • Envoyer des fichiers avec un formulaire Formidable

    2 janvier 2017 – 57 commentaires

    La version 3.0.0 du plugin Formidable permet de créer des formulaires comprenant des envois de fichiers. Cet article regroupe la documentation relative à cette fonctionnalité. Pour une présentation générale de Formidable, voir « Formidable, le (...)

  • Grappes 1.0

    23 novembre 2012 – 33 commentaires

    Présentation et nouveautés Cette version 1.0 du plugin Grappes est un portage pour SPIP 3.x. Le plugin permet de grouper des objets de SPIP dans des grappes. Les objets du core (articles, rubriques, auteurs, etc.) sont pris en charge, ainsi que (...)