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 .webmAvec 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 .phpsi 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)
Discussions par date d’activité
206 discussions
salut
je viens d’instaler le plugin et j’ai le message d’erreur suivant quand je suis dans le « privé ».
Parse error : syntax error, unexpected ’’ in /homez.34/cgtitqde/www/plugins/videos/formulaires/insertion_video.php on line 58
vous avez un petit coup de main a me filer ?
tof
Salut
Tu es en php5 sur ton hébergement OVH ?
Répondre à ce message
Hello,
Comme j’en avais besoin pour un site, je viens juste de mettre en place pour le plugin la gestion des 3 couleurs du player pour Dailymotion.
Si ça vous intéresse xdjuj, je peux vous le faire parvenir pour mettre à jour les fichiers sources du plugin ?
Il suffit d’ajouter les filtres
|premierplan |secondaireet|arriereplanavec les codes couleurs hexadécimaux. Sans, ça utilise les couleurs par défaut de DM.Une chose que j’ai oublié, ce qui serait pas mal aussi à prévoir, c’est que le cadre d’ajout de vidéo apparaisse directement dans la page de création d’un article, et pas seulement une fois qu’il est enregistré. Car là, ça oblige à le re-modifier pour ajouter la balise.
Pourtant bizarre, quand j’édite un article déjà existant, le cadre apparaît bien, mais pas quand je fais « créer un nouvel article ». Bug ou pas bug ?
Edit : Ah bah zut, je ne pouvais pas éditer mon premier message tout à l’heure, donc j’ai créé ce nouveau message mais maintenant je peux l’éditer… Bref désolé du double post !
Salut Billou :)
Pour les configurations, pas besoin de filtres, il suffit de les rajouter (c’est documenté) directement dans le code de modeles/video.html (ligne 36). De le rajouter ligne 7 (en prenant exemple sur la 6) et de le rajouter ligne 44 pour l’affichage :)
N’hésite surtout pas à commiter directement sur le plugin je manque malheureusement cruellement de temps ces dernières semaines :)
Pour le coup de l’article, je ne sais pas, je regarderais, la différence entre un article « nouveau » et un article « en modification » c’est que le second possède déjà un id_article auquel rattacher les documents. C’est donc plus simple mais parfaitement faisable pour les articles nouveaux.
Oui c’est ce que j’ai fait pour les couleurs :
1/ Définition des variables :
2/ Récupération des variables dans l’URL d’appel à la vidéo.
(le code fait buger la prévisualisation donc je ne peux pas le mettre ici…)
Au final, les filtres servent à changer les couleurs pour les rédacteurs dans l’article directement.
Pour commiter j’aimerais bien, mais je ne sais pas du tout comment faire ça, je ne l’ai jamais fait…
Répondre à ce message
Bonjour,
Le plugin fonctionne bien pour moi (dernières versions de SPIP et de Sarka-SPIP). Le seul problème est que dans ma liste des articles les plus récents, dans la page d’accueil, j’ai les caractères suivants qui s’affichent à l’endroit où le début du texte de l’article ( celui dans lequel figure la vidéo ,dans lequel je n’ai inséré que la video, pas de texte) s’affiche normalement :
merci d’avance
Salut :)
Comment as-tu inséré ta vidéo ? Depuis le champs TEXTE ? Directement dans ton squelette ?
Essaye par exemple de mettre quelques caractères au dessus et en dessous pour voir par exemple des ///+++ histoire de voir si le problème est dans ton squelette ou dans le plugin :) (suffira de regarder où le 9. > est affiché)
Merci de ta réponse
Ma video est insérée dans le champ texte de l’article. J’ai ajouté des caractères selon ton conseil :
Voilà ce que ça donne dans ma page sommaire :
Ce qui est bizarre , c’est que ce 9. > ne s’affiche que dans le sommaire pas dans la page de l’article
C’est très étonnant ce que tu reportes :) Et donc tu n’as pas la vidéo ??
Le SEUL truc qui pourrait se produire (mais que je n’explique pas) serait en rapport avec les lignes 87/88/89 du fichier plugins/videos/modeles/video.html
Edite le et supprime ces 3 lignes (qui sont un commentaire HTML) et dit moi si c’est mieux.
C’est le SEUL endroit où on rencontre un 9 suivi d’un point...
Et si c’est ça, c’est sûrement dû à un filtre que tu passes sur #TEXTE, il serait intéressant de savoir quel filtre est passé du coup :)
Alors ? :)
si si, la video s’affichait bien dans l’article : le problème était juste dans l’affichage de « Articles les plus récents »
mais, c’est bon, maintenant, j’ai supprimé les trois lignes que tu m’as indiquées et ça fonctionne !!
Je ne suis pas assez calée pour te dire quel filtre je passe sur #texte :(
Merci mille fois en tous cas
C’est plutôt drôle comme bug alors :) Le filtre c’est le « mot » qui est après la barre dans #TEXTE|filtre que tu vas trouver au niveau du squelettes sommaire ou du squelette qui affiche les « Articles les plus récents ». Il se prend les pieds dans les commentaires HTML du code :)
Bref, j’envoi un correctif sur le plugin lui même, mais c’est Sarka-SPIP qui a un soucis ! :)
Merci et bonne journée.
Salut XD,
Je ne suis pas sur, mais tu aurais pu regarder aussi c’est GPL ;-)
En fait, dans les articles récents dont parle Laurie, c’est la balise #INTRODUCTION qui est utilisée et pas #TEXTE ce qui est nettement différent.
Le code est le suivant :
[(#INTRODUCTION{#ENV{taille_introduction}}|typo_couleur|sinon{" "})]donc il n’y a a priori aucune raison que ça marche pas sauf si les traitements sur l’introduction sont différents que sur le texte complet.
Mais surtout, quand un article contient uniquement une vidéo, je pense qu’il est opportun de remplir le descriptif rapide afin que ce bloc ne soit pas réduit au modèle ! J’aimerais bien voir d’ailleurs le résultat sur le site lui-même.
Répondre à ce message
Bonjour, Je suis en train de tester votre pluggin sur un site en local sur mon ordi. Pas eu de soucis à l’installer. Pas de soucis non plus à importer une vidéo venant de Youtube : je copie bien le lien dans la fenêtre « importer une vidéo », je met le tag correspondant dans l’article, et ça marche impécable.
Par contre, je n’arrive pas du tout à importer une vidéo mp4 qui est sur un site distant, ou en localhost. J’ai à chaque fois le même message d’erreur dans la fenêtre d’import : « cette adresse n’est pas valide ».
J’ai raté un épisode ?
Exemple avec cette vidéo test :
http://fetedupicodon.com/son/IMG_0781.mp4
Si vous cliquez sur le lien, vous verrez qu’elle existe bien. Je l’ai correctement encodé avec handbrake en H264. Alors pourquoi la fenêtre d’import m’indique-t-elle que le lien n’est pas valide ?
Merci de votre réponse.
Finalement ça marche bien si je passe par la fenêtre d’insertion normale de documents, en faisant « par internet ». Et ça ne marche toujours pas par la fenêtre d’insertion de vidéo rajoutée par le pluggin. C’est normal ?
Bon... l’essentiel c’est que ça marche, hein ?
Merci pour cet excellent pluggin !
Oui voilà c’est tout à fait ça. Les vidéos MP4 doivent être uploadées via l’ajout normal de document.
Je vais rajouter un message d’erreur plus explicite dans ce cas, histoire que d’autres ne tournent pas non plus en rond :)
Merci du retour :)
Répondre à ce message
Bonjour
Unepetite question.
Je voudrais savoir s’il est possible d’afficher une liste de lecture si on mets plusieurs vidéos ?
Exemple : Si je mets 3 vidéos et que je ne veux pas que les 3 vidéos apparaissent en faisant les unes au dessus des autres mais une seule fenetre viédo avec la liste des autres vidéos consultables. Est ce possible ?
MErci
Bonjour :)
C’est tout à fait possible, mais pour l’instant ça se fait « à la main » dans un squelette.
Avec l’utilisation de Ajax ça rend les choses encore « plus jolies ».
Le principe de squelette est le suivant :
Je me rends compte à l’écrire que c’est pas forcément très simple pour qui ne connait pas SPIP en réalité... :)
J’utilise pour ma part :
Il ne faut juste pas oublier de refaire appel au JavaScript de jScrollPane à l’intérieur de la noisette Ajax sans quoi la mise en forme sera cassée.
C’est très rapide si l’on connait HTML/CSS/jQuery et les squelettes SPIP, mais le plugin de lui même ne propose pas cette fonctionnalité :)
Répondre à ce message
Bonjour,
Après installation j’ai le message d’erreur comme d’autres :
Parse error : syntax error, unexpected T_CONST, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ’}’ in...
Hébergement chez Ouvaton, je suis pas un expert alors que peut-on faire ???
Merci de votre aide
Comme tous les copains, le plugin nécessite pour l’instant PHP5.
Chez Ouvaton, manifestement il te faudra activer PHP5 en rajoutant en tête de ton fichier .htaccess de SPIP la ligne :
AddHandler application/x-suexec-php5 .php
Ensuite ça devrait aller :)
Merci beaucoup ca marche parfaitement après l’activation php5... Juste un petit bug la vidéo ne s’affiche pas dans l’espace privé mais tout est ok sur le site public !!!
Mille mercis
Répondre à ce message
re bonjour
j’ai résolu le problème du message d’erreur en activant php5 dans mon fichier htaccess
En revanche, quand j’ajoute un lien vidéo, le document n’est pas reconnu comme une video
je ne comprends pas
Merci d’avance
J’ai le même souci et je suis également chez OVH
Mais par contre je ne suis pas expert en programmation alors il faut faire quoi avec le fichier htaccess pour activer php5 ?
Merci de l’information
Oui PHP5 est pour l’instant obligatoire pour utiliser ce plugin :)
Pour OVH => http://guides.ovh.com/Php5ChezOvh
Répondre à ce message
re pour info le site est chez ovh sur un mutualisé
Répondre à ce message
bonjour
je viens d’installer ce plugin avec spip 2.1.5 et quand j’ajoute une vidéo j’ai le message suivant
Parse error : syntax error, unexpected T_CONST, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ’}’ in /homez.28/geskopro/www/spip/plugins/auto/videos/lib/Videopian.php on line 35
merci de votre aide
C’est bien la preuve qu’on doit se passer de cette vilaine Classe :)
Je regarde dans l’après-midi pour corriger ça, parce que vous n’êtes pas le seul, c’est fonction de l’hébergement :)
Répondre à ce message
Bonjour
je viens d’installer le plugin video avec spip 2.1.5 et qand j’ajoute un lien j’ai le message suivant
Parse error : syntax error, unexpected T_CONST, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ’}’ in /homez.28/geskopro/www/spip/plugins/auto/videos/lib/Videopian.php on line 35
merci d’avance
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 :
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.
Suivre les commentaires :
|
