Plugin Vidéo(s)

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 :

<videoYY>

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

Les options peuvent se rajouter à la suite :

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

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

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)

Discussion

206 discussions

  • 10

    Bonjour,

    J’ai installé et activé le plugin video sur un SPIP 2.1.2 [16017].

    Mais aucun point d’entrée sous « Configuration » !

    Je ne vois aucun : Lien + Icône « Plugin vidéos »

    Avez-vous une idée ?

    Cordialement

    FDG

    • N’avez-vous pas eu un message d’erreur à l’installation ? Car s’il n’y a pas l’icône, c’est que le plugin n’a pas dû s’installer. Avez-vous au moins depuis la page article le champ de saisie des URL des vidéos ?

    • Aucun message d’erreur à l’installation et depuis la page article aucun champ de saisie des URL des vidéos.

      Pour le vérifier, j’ai désactivé et réactivé le plugin : même résultat négatif.

      Cordialement

    • D’autres plugins installés sur le SPIP ? Parce qu’il n’y a pas de raisons...

    • Bonjour xdjuj,

      En effet j’ai 42 plugins activés et il y a probablement un conflit avec l’un d’eux, ce d’autant que le plugin s’appelle

      Video HTML5
      2010.05.20 - en développement
      Ce plugin remplace la balise <video> par un lecteur en (...)
      Ce plugin remplace la balise <video> par un lecteur en HTML5.
      par Pierre Rudloff (contact)
      Version : 2010.05.20 [40117]
      Répertoire : html5_video

      Le plugin vidéo installé est dans un répertoire /video/ et étrangement il est reconnu comme Video HTML5 dans un Répertoire : /html5_video/, ce qui n’a pas de sens ! Je pense qu’un plugin au l’autre est incriminé.

      J’ai procédé à la même opération sur un autre serveur avec SPIP 2.1.2 mais beaucoup moins de plugins, là tout est OK

      Il me reste à confirmer quelques étapes, ... à suivre

      Cordialement

      FDG

    • Bonjour François Daniel :)

      Le plugin html5_video n’est pas le plugin Vidéo(s). Il est d’ailleurs inutile avec Vidéo(s) d’activé car il offre une alternative HTML5 moins fonctionnelle que celle offerte dans Vidéo(s).

      J’ai du mal à voir ce qui pourrait toutefois empêcher l’installation du plugin Vidéo(s) si vous identifiez un coupable je veux bien en être informé pour y jeter un Zieu.

      Bonne journée.

    • Bonjour,

      Un site banal de test sur infomaniak

      Après avoir introduit l’URL : http://vimeo.com/9473902

      J’obtient :

      Warning : file_get_contents() [function.file-get-contents] : URL file-access is disabled in the server configuration in /home/www/e20d911b28fcb18e29e31b56f8e01fc7/users/fdg/web/spip-test/plugins/videos/lib/Videopian.php on line 591

      Warning : file_get_contents(http://vimeo.com/api/clip/9473902/php) [function.file-get-contents] : failed to open stream : no suitable wrapper could be found in /home/www/e20d911b28fcb18e29e31b56f8e01fc7/users/fdg/web/spip-test/plugins/videos/lib/Videopian.php on line 591

      Warning : getimagesize() [function.getimagesize] : Filename cannot be empty in /home/www/e20d911b28fcb18e29e31b56f8e01fc7/users/fdg/web/spip-test/plugins/videos/lib/Videopian.php on line 618

      Warning : getimagesize() [function.getimagesize] : Filename cannot be empty in /home/www/e20d911b28fcb18e29e31b56f8e01fc7/users/fdg/web/spip-test/plugins/videos/lib/Videopian.php on line 622

      Warning : getimagesize() [function.getimagesize] : Filename cannot be empty in /home/www/e20d911b28fcb18e29e31b56f8e01fc7/users/fdg/web/spip-test/plugins/videos/lib/Videopian.php on line 626

      Warning : file_get_contents() [function.file-get-contents] : URL file-access is disabled in the server configuration in /home/www/e20d911b28fcb18e29e31b56f8e01fc7/users/fdg/web/spip-test/plugins/videos/lib/Videopian.php on line 637

      Warning : file_get_contents(http://www.vimeo.com/moogaloop/load/clip:9473902) [function.file-get-contents] : failed to open stream : no suitable wrapper could be found in /home/www/e20d911b28fcb18e29e31b56f8e01fc7/users/fdg/web/spip-test/plugins/videos/lib/Videopian.php on line 637

      Fatal error : Uncaught exception ’Exception’ with message ’String could not be parsed as XML’ in /home/www/e20d911b28fcb18e29e31b56f8e01fc7/users/fdg/web/spip-test/plugins/videos/lib/Videopian.php:637 Stack trace : #0 /home/www/e20d911b28fcb18e29e31b56f8e01fc7/users/fdg/web/spip-test/plugins/videos/lib/Videopian.php(637) : SimpleXMLElement->__construct(’’, 16384) #1 /home/www/e20d911b28fcb18e29e31b56f8e01fc7/users/fdg/web/spip-test/plugins/videos/formulaires/insertion_video.php(50) : Videopian::get(’ http://vimeo.c...’) #2 /home/www/e20d911b28fcb18e29e31b56f8e01fc7/users/fdg/web/spip-test/ecrire/public/aiguiller.php(149) : formulaires_insertion_video_traiter_dist(’11’) #3 /home/www/e20d911b28fcb18e29e31b56f8e01fc7/users/fdg/web/spip-test/ecrire/index.php(62) : traiter_formulaires_dynamiques() #4 main thrown in /home/www/e20d911b28fcb18e29e31b56f8e01fc7/users/fdg/web/spip-test/plugins/videos/lib/Videopian.php on line 637

      Qu’en pensez-vous

      A+

      FDG

    • Que les serveurs d’infomaniak sont paranoïaques ou mal configurés :
      « URL file-access is disabled in the server configuration »

      Et que cette fonction est utilisée pour récupérer les informations de la vidéo comme titre, description et vignette (ça sera le cas en tout cas).

      C’est un problème que j’avais supposé rencontrer sous une autre forme et pour laquelle il existe déjà une note dans le code. Il faudrait gérer de la récupération d’erreur au niveau de ce script et ça n’est pas le cas pour l’instant :)

      En attendant que ça puisse être fait, vous pouvez commenter les lignes 40 à 54 et la ligne 56 dans le fichier formulaires/insertion_video.php (= ne laisser QUE $titre = sql_getfetsel(’titre’,’spip_articles’,« id_article= ».$id_article) ; et retirer les lignes au dessus ainsi que l’accolade fermante.

      Vous pouvez sinon aussi changer d’hébergeur :p

    • La confusion vient du faite que le plugin vidéo apparait sous appellation

      Vidéo(s) 0.2 - en développement (faut coder les accents pour le html)

      cela m’ a échappé dans ma lecture en diagonale de l liste des plugins à cocher.

      Désolé

      Pour la suite et correction il me semble qu’il est préférable de continuer-terminer par e-mail

      ...

      A+

      FDG

    • Ca marche pas avec un mutu 1and1, faut peut être passer à curl ?
      file_get_contents() is deprecated in favor of using the CURL libraries

    • oups, désolé, message en double.

    Répondre à ce message

  • Bonjour

    Je test ce plugin fort intéressant. Dans l’admin, quand je regarde l’article, les vidéos Dailymotion sont bien visibles mais pas les vidéos Youtube : je retrouve la page Youtube « Impossible de trouver la page demandée ». En front la vidéo est bien visible !

    Phil

    Répondre à ce message

  • 2

    Salut,

    je viens de tester le plug-in et il ya un problème avec l’URL un fois le doc importé.
    Je veux ajouter cette vidéo : http://www.youtube.com/watch?v=RG_UqBBq1wc
    Une fois importée et insérée dans ma page avec , je retrouve bien le code d’inclusion de l’iFrame dans ma page, mais l’adresse est erronée :
    http://www.youtube.com/embed/../sites/blog/RG_UqBBq1wc?hd=1
    au lieu de http://www.youtube.com/embed/RG_UqBBq1wc?hd=1

    La partie « ../sites/blog » correspond à la mutualisation de mon SPIP.

    Voilà mon retour, si ça peut aider...

    • Salut Jean-Marie :)

      Pour régler ton problème tout de suite (= ce n’est pas un correctif mais une solution rapide à ton problème) tu peux dupliquer le fichier modeles/video.html et le copier dans ton squelettes/modeles/video.html et remplacer sur la ligne 16 IMG/ par ../sites/blog/

      Il faut donc que je regarde quel traitement est appliqué par défaut à la balise #FICHIER pour qu’il ne soit pas effectué dans notre cas :)

      Merci de ce retour :)

    • Ok merci pour la réactivité, je vais regarder ça...

    Répondre à ce message

  • 2

    Bonjour,

    Je suis nouveau dans le monde de SPIP, mais là, j’avoue que je ne comprends absolument rien aux instructions d’utilisation du plug-in qui m’a l’air pourtant très bien réalisé. Comment doit-on s’y prendre pour que la vidéo soit lue automatiquement dans un article spip ? J’ai pourtant bien inséré la vidéo dans l’article via la balise (puisqu’il s’agit de la première vidéo, mais déjà là je ne suis pas sûr d’avoir bien compris), suite à quoi je peux voir que la vidéo youtube que je souhaite insérer est bien prise en compte en tant que pièce jointe, mais au chargement de la page, rien ne s’affiche.

    Si je pouvais déjà arriver à afficher cette vidéo dans un article, ce serait super. Par la suite, j’aimerais pouvoir afficher une vidéo directement en page d’accueil et donc sans passer par un article.

    Est-ce que quelqu’un aurait la gentillesse (patience) de m’expliquer pourquoi ça ne fonctionne pas ?

    Merci d’avance !

    • OK.

      J’ai pas été très malin sur ce coup là :)
      J’ai compris pour le fameux numéro de document, c’est plus évident du coup !

      Par contre, j’ai une erreur lors de la réédition de l’article après avoir inséré la vidéo :
      « Fatal error : Call to undefined function vignette_par_defaut() in C :\wamp\www\spip\plugins\auto\ckeditor-spip-plugin\ckeditor_tools.php on line 106 »

    • Salut Phob :)

      Tu as besoin de comprendre l’utilisation des modèles :
      http://www.spip.net/fr_article3454.html

      Ta vidéo uploadée est considérées comme un « document » de SPIP. Tu peux utiliser tes documents comme tu le souhaites dans n’importe quel article juste en les « appelant » à l’aide d’un modèle. Ici, c’est une vidéo, tu peux donc l’appeler directement dans le champs TEXTE de ton article avec le modèle vidéo comme indiqué dans la doc.

      BLabla mon texte avant.
      
      <video12>
      
      Babla mon texte après.

      si ta vidéo est le document numéro 12.

      Ensuite concernant ton bug, il est directement lié au vilain plugin que tu essayes d’utiliser : ckeditor c’est marqué dans le message d’erreur :) A voir avec son auteur donc, sachant que ce genre de plugin WYSIWYG est en général très nocif aux mises en page :)

      Bonne journée.

    Répondre à ce message

  • 6

    Je suis en train de le mettre en place.

    1/ tests avec des vidéos internes au format mp4 H264.

    C’est ok. En fait, c’est le player qui est chargé.
    Normal sur FF et IE

    Sur Safari, j’ai bien le lecteur HTML mais pas le poster.

    J’ai réussi à afficher une image (poster) sur le lecteur, en regardant la doc html5 pour everybody : il faut que l’attribut soit avant tous les autres.

    J’ai bidouillé html5media.js pour afficher le lecteur avec le paramètre scaling : « scale »

    Je n’ai en effet pas réussi à surcharger le modèle avec le script flowplayer permettant de modifier l’apparence du lecteur.

    2/Video externe : lien VIMEO

    En revanche, j’ai un problème avec le lien « Télécharger la video » : le « / » avant le numero de vidéo est perdu en route !

    J’ai fait le test avec les fichiers du plugin, voici le code source de la page mesVideos.html

    <section id="main" role="main">
    		<h2>Liste de vos vidéos</h2>
    		
    		<ul>
    		
    			<li><span style='text-transform:uppercase'>vimeo</span> — IMG/vimeo.com12183054<br />
    				<iframe src="http://player.vimeo.com/video/vimeo.com12183054?byline=0" width="560" height="315" frameborder="0"></iframe>
    
    	
    	
    
    
    	
    	
    	
    
    <!--
    	TODO Automatiser intelligement l'appel à html5=oui, voir comment identifier le H264 qui est le seul qui pourra être lu par Flash > 9.
    -->
    			</li>
    		
    		</ul>
    		
    	</section>

    Du coup, le document n’est plus visible sur la médiathèque.

    J’ai fait un test d’insertion en désactivant la médiathèque : IDEM.
    Là le document est visible sur l’admin mais c’est à l’enregistrement en base que le / saute (verif sur phpmyadmin)

    Version SPIP : 2.1.0 [15608}
    Mediathèque : 1.4.5

     ;-)

    • Bonsoir :)

      • Je n’ai pas encore intégré le poster tu as raison. L’idée est de le brancher sur la vignette de document d’origine ou de Médiathèque.
      • Pour le scale qu’essayes-tu d’obtenir ?
      • Pour l’import des vidéos, il y a parfois un bug, que j’ai du mal à reproduire, j’ai commité une modif ce midi mais je n’ai pas vraiment moyen de tester car ça n’arrive quasi jamais. Je l’ai constaté 5 fois grand max sur Dailymotion, et je n’arrive pas à le reproduire. Je vais changer complètement la façon dont j’importe ça puisque manifestement la fonction a des vapeurs :)

      PS : ton SPIP n’est pas à jour ! ;-)

    • Oui, je sais que mon spip n’est pas à jour mais j’ai eu tellement de soucis avec ce projet (refonte) que j’évite de trop toucher.

      Pour le scale :

      En fait il s’agit de pouvoir modifier l’apparence du player.
      Par defaut, dans le script : le paramètre scaling=« fit », je l’ai passé à « scale »

      En fait on peut charger un script sur flowplayer pour rajouter des fonctions, mais cela ne marche pas sur ton plugin (il faut rajouter le script sur chaque appel)
      (Voir la doc de flowplayer)

      Pour info : je ne suis pas spécialement alerte en js et en anglais ! (lol)

      Pour le bug d’import : je suis donc tombée dessus, mais comment t’aider ?

      Enfin, il y a quelque chose de plus bloquant :

      Comme le vimeo ne marche pas avec ta méthode, j’ai voulu, pour l’instant, extraire les documents distants :

      J’ai intégré mon vimeo via le gestionnaire de documents et construit ma propre boucle (cf code)

      Au départ, j’avais inséré la boucle dans le modèle, puis je l’ai sorti ...

      Malgré cela, il y a une erreur jquery / flowplayer (plusieurs messages ...)

      En fait, il semble que le document distant est repris dans la première boucle ???
      Un peu comme si le critère distant ne fonctionnait pas

      J’ai vérifié en dur dans la base : le document distant a une extension html, le lien est correct (puisqu’il suit dans l’admin) et n’a donc pas de rapport avec le plugin.

      La boucle :

      							<BOUCLE_local(DOCUMENTS){id_document}{distant=non}{extension == mp4}>
      							#MODELE{video,document=#ID_DOCUMENT,html5=oui,largeur=320,hauteur=170}
      							</BOUCLE_local>
      							<BOUCLE_vimeo(DOCUMENTS){id_document}{distant=oui}>
      								<iframe src="#URL_DOCUMENT" width="320" height="170" frameborder="0"></iframe>
      							</BOUCLE_vimeo>
      							</dd>
    • Tu vas trop loin ! :)

      Pour Viméo ça marche très bien, parfois effectivement en revanche ça déconne, il te suffit de refaire ta saisie (j’ai pas dit que c’était une solution propre, mais ça te dépannera le temps que je corrige). Sinon tu peux éditer avec phpMyAdmin pour JUSTE conserver le numéro vimeo (= retirer le vimeo.com que je vois trainer dans ton code).

      Je vais publier un correctif, perd pas de temps à tester des trucs sur lesquels tu devras revenir :)

    • Je ne cherche pas à aller trop loin !
      Juste à pouvoir livrer un projet ...

      J’ai fait le tour de pas mal de solutions (videojs, html5 pour everybody) couplé à jwplayer ou flowplayer ... que j’ai installé en manuel.

      Un bon plugin SPIP intégrant ces solutions et les possibilités de paramétrage serait une très bonne chose. Les API sont très complètes.

      Mais il y a beaucoup d’heures de travail à y consacrer pour arriver au bout, j’en suis parfaitement consciente ! :)

      En revanche, le fait que le plugin « interfère » avec une boucle indépendante sur la même page me semble problématique : mais tu vas trouver le problème et la solution.

      En l’état, je ne peux pas m’appuyer sur ce plugin, mais il est très prometteur !

      Si tu as besoin de testeurs ou d’avis, n’hésite pas à répondre à ce post !

      A bientôt
      Vero

    • Je viens de publier un correctif pour la partie import Viméo/Dailymotion/Youtube qui merdait.

      Donc normalement ton bug sur Viméo est réglé, tu peux essayer de réimporter.

      Il faudra ensuite se brancher sur médiathèque pour éditer à la main les liens vidéos (changer le lien donc).

      Ca avance ça avance !! :)

    • Concernant la partie VIMEO, je t’invite à utiliser les API.

      Il n’est pas utile, voir bloquant, de modifier le lien saisi en base.

      On peut, soit modifier le lien dans les boucles :

      						<BOUCLE_vimeo(DOCUMENTS){id_document=#GET{document}}>
      							<iframe id="player_#ID_DOCUMENT" src="[(#URL_DOCUMENT|replace{http://vimeo.com/,http://player.vimeo.com/video/})]?title=1&amp;byline=0&amp;portrait=0" width="#GET{largeur}" height="#GET{hauteur}" frameborder="0"></iframe>
      						</BOUCLE_vimeo>

      soit utiliser un script.

      Inspiré de ces exemples sur la partie Galerie, que j’ai adapté pour mon projet :

      <head>
      	<script>
      
      		
      
      		var apiEndpoint = 'http://vimeo.com/api/v2/album/';
      
      		var oEmbedEndpoint = 'http://vimeo.com/api/oembed.json'
      
      		var oEmbedCallback = 'switchVideo';
      
      		var videosCallback = 'setupGallery';
      
      		var album = ''
      
      
      
      		// Get the user's videos
      
      		$(document).ready(function() {
      
      			$.getScript(apiEndpoint + album + '/videos.json?callback=' + videosCallback);
      
      		});
      
      		
      
      		function setupGallery(videos) {
      
      			
      
      			// Set the user's thumbnail and the page title
      
      			$('#stats').prepend('<img id="portrait" src="' + videos[0].user_portrait_medium + '" />');
      
      			$('#stats h2').text(videos[0].user_name + "'s Videos");
      
      			
      
      			// Load the first video
      
      			getVideo(videos[0].url);
      
      			
      
      			// Add the videos to the gallery
      
      			for (var i = 0; i < videos.length; i++) {
      
      				var html = '<li><a href="' + videos[i].url + '"><img src="' + videos[i].thumbnail_medium + '" class="thumb" />';
      
      				html += '<p>' + videos[i].title + '</p></a></li>';
      
      				$('#thumbs').append(html);
      
      				$("#thumbs li:first a").addClass("selected");
      
      
      
      			}
      
      			
      
      			// Switch to the video when a thumbnail is clicked
      
      			$('#thumbs a').click(function(event) {
      
      				event.preventDefault();
      
      				getVideo(this.href);
      
      				$("#thumbs li a").removeClass();
      
      				$(this).addClass("selected");
      
      				return false;
      
      			});
      
      			
      
      		}
      
      		
      
      		function switchVideo(video) {
      
      			$('#embed').html(unescape(video.html));
      
      		}
      
      		
      
      	</script>
      </head>
      
      <body>
      	<BOUCLE_vimeo_playlist(DOCUMENTS){id_document=#GET{document}}>
      	<script>
      		var album = '[(#URL_DOCUMENT|replace{http://vimeo.com/album/,''})]'
      		// Get the user's videos
      		$(document).ready(function() {
      			$.getScript(apiEndpoint + album + '/videos.json?callback=' + videosCallback);
      		});
      		
      		function getVideo(url) {
      			$.getScript(oEmbedEndpoint + '?url=' + url + '&width=#GET{largeur}&height=#GET{hauteur}&title=0&callback=' + oEmbedCallback);
      		}
      	</script>
      		<div class="playlist">
      			<div id="embed"></div>
      			<ul id="thumbs"></ul>
      		</div>
      	</BOUCLE_vimeo_playlist>
      </body>

      En fait, on peut rajouter un album vimeo en tant que document distant et gérer pas mal de chose depuis VIMEO.

      Je fais cohabiter les deux modèles : 1 playlist basé sur un album ou l’insertion d’une vidéo.

      On peut envisager la même chose avec les groupes, les channels ...

      Pour la partie vidéo distante, il me parait donc plus judicieux de s’appuyer sur oEmbed.

       ;-)

    Répondre à ce message

  • 1

    Un grand bravo !

    Je bataille depuis une semaine pour insérer des vidéos (mp4) sur un SPIP et j’aperçois la fin d’une grosse galère ...

    -  les vidéos passaient par le flash ??
    -  je n’arrivais pas à déclarer correctement le lecteur (flowplayer d’ailleurs)
    -  j’ai essayer d’intégrer plusieurs solutions (videojs, mediafront, ...) : toujours un problème quelque part, et surtout sur le site en prod !
    -  il me faut aussi Vimeo ...

    Bref !

    Ce commentaire ne va pas faire avancer le bidule, mais je n’ai pas pu me retenir !

    Alors : Un grand merci !

    • Merci pour tant d’enthousiasme :)

      Est-ce qu’au moins tu as testé ? :) J’utilise ces méthodes sur des sites et ce sont les mêmes vidéos qui servent pour : le site, la diff sur iPad, la diff sur application iPhone, donc si tu fais attention à la façon dont tu compresses tes films (avec HandBrake ! ;-) ) tu devrais normalement obtenir un résultat très satisfaisant tant dans la qualité de la compression de tes vidéos que dans la diffusion sur les supports (navs Macs et PC, mobiles).

      Si tu es attachée à la qualité de tes vidéos ET que tu souhaites partager tes contenus (contenus publiques, ce qui n’est pas toujours le cas) je te suggère également fortement d’utiliser Viméo, la qualité de compression est vraiment exceptionnelle. L’usage cependant ne peut pas être commercial :)

      Et SI ton commentaire fait avancer les choses, parce que ça donne forcément envie de rajouter plein de choses au plugin pour le rendre encore plus pertinent et efficace, c’est objet de la dernière partie « Comment faire encore mieux ? » :)

    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