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
Bonjour,
Contrairement à l’ajout de documents dans un article, lorsque j’ajoute une vidéo la « vignette » contenant le numéro de document et ses informations n’apparait pas à gauche de l’interface.
Pour y avoir accès, je dois sauvegarder puis ré ouvrir mon article.
Est-ce un comportement normal et voulu ?
Je ne trouve pas la chose très pratique.
Normal : oui, voulu : non, ça n’a juste jamais été codé proprement, c’est dans la todolist depuis un bail... :)
Répondre à ce message
Bonjour,
Je souhaitais installer ce plugin très pratique sur un SPIP 2.0.10 mais je n’y arrive pas.
En effet, à l’installation le plugin Vidéos me dit qu’il necessite le plugin Medias en version A.6 minimum or ce plugin n’existe pas dans cette version pour spip 2.0.10 (version 1.3.7 seulement)
Quelles est la solution ? Suis-je obligé de migrer mon SPIP en 2.1 ? cela ne m’arrangerait pas !
Surtout que le plugin vidéos est marqué comme compatible avec SPIP 2.0 ?
Merci.
Florent
Bonjour Florent.
Je t’avoue que je ne sais pas. SPIP2 c’est loin :)
Tu peux simplement éditer à la main le fichier plugin.xml et retirer la ligne concernant la dépendance à Mediatheque, pour voir si ça fonctionne, nous en avons déjà parlé je crois sur ce même forum.
Répondre à ce message
Voici un mini patch permettant de mettre à jour automatiquement la date de la vidéo en fonction de la date_published retournée par Videopian.
Répondre à ce message
Bonjour,
tout d’abord merci pour le plugin. J’ai essayé d’ajouter une vidéo de youtube sur un nouveau site en spip 2.1.11, et lorsque j’enregistre l’url j’ai le message d’erreur suivant (la version du plugin est la 0.8.6) :
Warning : file_get_contents() [function.file-get-contents] : URL file-access is disabled in the server configuration in /home/www/a210ddbbfcf28cb8c57e9d6ef151274b/web/driftingfloor/plugins/videos/lib/Videopian.php on line 665
Warning : file_get_contents(http://gdata.youtube.com/feeds/api/videos/SBFZRDXOF0Q) [function.file-get-contents] : failed to open stream : no suitable wrapper could be found in /home/www/a210ddbbfcf28cb8c57e9d6ef151274b/web/driftingfloor/plugins/videos/lib/Videopian.php on line 665
Fatal error : Uncaught exception ’Exception’ with message ’String could not be parsed as XML’ in /home/www/a210ddbbfcf28cb8c57e9d6ef151274b/web/driftingfloor/plugins/videos/lib/Videopian.php:665 Stack trace : #0 /home/www/a210ddbbfcf28cb8c57e9d6ef151274b/web/driftingfloor/plugins/videos/lib/Videopian.php(665) : SimpleXMLElement->__construct(’’) #1 /home/www/a210ddbbfcf28cb8c57e9d6ef151274b/web/driftingfloor/plugins/videos/formulaires/insertion_video.php(65) : Videopian::get(’http://www.yout...’) #2 /home/www/a210ddbbfcf28cb8c57e9d6ef151274b/web/driftingfloor/ecrire/public/aiguiller.php(168) : formulaires_insertion_video_traiter_dist(’1’, ’article’) #3 /home/www/a210ddbbfcf28cb8c57e9d6ef151274b/web/driftingfloor/ecrire/index.php(62) : traiter_formulaires_dynamiques() #4 main thrown in /home/www/a210ddbbfcf28cb8c57e9d6ef151274b/web/driftingfloor/plugins/videos/lib/Videopian.php on line 665
Les plugins actifs sont :
- Balise #TITRE_PARENT
- CFG
- Court-circuit 2
- Google +1
- Google siteMap
- Menu jQuery Superfish
- Modèles
- Modèles Facebook
- Nivo Slider
- Page title
- Saisies pour formulaires
- SEO
- SPIP Bonux
- Step
- Vidéo(s)
- YAML
Salut Ubik.
Comme semble le suggérer ton message d’erreur :
URL file-access is disabled in the server configuration
Tu dois donc te rapprocher de ton hébergeur pour voir comment régler ce soucis :)
Exactement le même problème. Mon hébergeur est sur 1&1.
En attendant une réponse de mon hébergeur est-ce que quelqu’un a une réponse de son côté ?
Bon, et bien je suis pas content du SAV de 1&1. C’est la 1re fois qu’il me donne une réponse nulle !!!
J’enrage !!!! Il m’ont proposé d’aller sur mon espace client est de tester une version test de PHP 5.4.
RESULTAT : Gros bug sur tout le site. Des messages d’erreur de partout...
Il faut que je réinstalle tous les fichiers et j’ai perdu le lien avec la base de données en ligne.
SURTOUT NE FAITES PAS CE QUE DIT LE SAV DE 1&1.
Je suis en boule !! je vais faire un tour et je reprendrai tout depuis le début....
ARHHHHHHHH !!!!
Tu as fini par trouver une solution ou pas ?
Pour 1 and 1
Tu te mets en php5 (via l’espace client de 1 and 1)
Après, dans le dossier « ecrire » de spip, tu mets un fichiers php.ini avec dedans :
allow_url_fopen = on
allow_url_include = on
Autre hébergeur, autre solution :
Chez infomaniak.ch, deux lignes à rajouter dans le fichier htaccess (htaccess.txt à renomer après l’avoir uploadé en .htaccess)
php_flag « allow_url_fopen » « On »
php_flag « allow_url_include » « On »
SPIP SPIP SPIP... Hourra !
Et comme tu aurais pu le constater en lisant l’article :p C’est déjà marqué dans la documentation ci-dessus, au chapitre « Avec quoi ça casse ? » qui liste les solutions pour les différents hébergeurs ;-)
super ! en attendant j’avais opté pour une autre solution mais ça devrait m’être bien utile pour un site en dev.
Répondre à ce message
Bonjour
j’ai un petit problème avec la compression des scripts js de Spip. Le plugin marche très bien mais quand je compresse les js, les chemins dans la balise object vers le flowplayer sont modifiés. Sans compression le chemin est : adresse du site/plugins/auto/ect... Avec compression, le chemin du player est directement à la racine de Spip (adresse du site/flowplayer.swf).
J’ai copié les players à la racine, du coup ça marche, est ce que c’est la bonne démarche ou est ce que j’ai oublié une étape quelque part ? Merci
Répondre à ce message
Pour un site j’avais un petit soucis c’est qu’on voulait afficher seulement une vignette de la video et au clic ouvrir la video dans une lightbox.
Utilisant le plugin thickboxv3 sur ce même site, j’ai modifié le fichier modele video.html de ce plugin
pour faire par exemple ligne 102 :
Répondre à ce message
bonsoir,
peut-être pas le bon endroit pour poser la question, mais ayant installé sans difficulté ce plugin,
est-il possible d’associer à une vidéo un fichier de sous-titre... genre srt.. ?
c’est simple en local, mais comment le faire en hébergement... ???
pam
Salut Pamillet :)
Ce plugin ne permet pas de gérer les sous titres de manière propre. En revanche, le plugin Vidéo Accessible est fait pour ça.
http://www.spip-contrib.net/Video-Accessible
Sinon j’ai également publié sur la zone le remplaçant du plugin Vidéo(s), le plugin HTML5 Médias, qui gère les vidéos accessibles sans le player JWPlayer (qui nécessite une licence) et qui gère également l’audio HTML5, il est « mi-fonctionnel » à ce stade, je n’ai pas le temps de le finir pour l’instant.
Répondre à ce message
Bonjour,
Merci pour ce plugin qui fonctionne très bien sur mon site :
http://www.gusz.fr/guspip/spip.php?article36
J’ai simplement un souci d’affichage : en effet lorsque j’insère une vidéo dans un article, cela créé un cadre noir qui déborde largement de la taille du lecteur. Un souci de squelette ?Une idée ? Merci.
Polemil
Essai de voir via l’espace privé en modifiant la taille par défaut des paramètres du plug, si jamais cela ne résoudrait pas ton problème :-)
Merci pour la réponse rapide.
Taille par défaut du plug modifiée en 400X300, taille du lecteur en 400X230. Le cadre noir est réduit mais subsiste...
Je ne sais pas quoi te dire :-(
Si tu coches « Liste de définition HTML » cela change quelque chose (quitte en essayant de changer encore la taille pour voir) ?
Sinon, je pense également, que tu as un problème au niveau du format de ta vidéo, car sous IE9, cela ne fonctionne pas !
Cela semble être une vidéo avec le conteneur mp4 comme il faut, mais dedans, la vidéo est bien au format h.264 ?
Je ne constate ce problème ni sous Safari ni sous Firefox (Mac).
Sinon donne un coup de style à tes balises vidéos. Par défaut le plugin indique :
En jouant là dessus spécifiquement pour le(s) navigateur(s) qui déconnent, tu devrais pouvoir corriger.
J’ai résolu le problème en modifiant la balise vidéo :
.playerVideo figuremargin:0 ;background-color :#FFFFFF ;
À xdjuj : je constatais ce problème sur Mac sous Safari (5.1.2), Firefox (10.0.1), comme sur PC (bizarrement pas de souci sous IE8).
À Franck : la vidéo est bien encodée en h.264.
Merci à tous 2 pour votre aide !
Répondre à ce message
Bonjour,
Merci pour ce plugin qui fonctionne très bien sur mon site.
J’ai simplement un souci d’affichage.
http://www.gusz.fr/guspip/spip.php?article36
Lorsque j’insère une vidéo dans un article, j’obtiens un cadre noir qui déborde largement du lecteur.
Un souci de squelette ? Une idée ? Merci.
Polemil
Répondre à ce message
Je pense avoir quatre problèmes j’avais pas fait attention avant !
1-
Le bloc « Ajouter une vidéo » que fait le plug, n’est pas visible au moment de la création d’un article, par contre, si je clique sur modifier après l’avoir enregistrer, alors le bloc devient visible, ce qui est embêtant quand dans l’article il n’est prévu de ne mettre qu’une vidéo youtube par exemple !
2-
Dans l’espace privé, les vidéos au format h.264-mp4 ne sont pas visible sous Firefox (cela fonctionne très bien dans la partie public), dans la partie privé, elle devraient également être visible via Flash non ?
Pendant que j’y suis, une video webM ne devrait pas s’afficher via Flash sous IE ?
3-
Les vidéos dans la partie privé sont légèrement décalé sur la gauche
4-
Il est possible de choir la taille d’affichage dans la configuration du plug, le problème, c’est quand cette taille est différente de la partie public
Pour faire simple, en ce qui me concerne, les vidéos sont bien à la bonne taille dans la partie public (636 par 470), mais il faudrait qu’elles soient plus petite dans la partie privé, car cela en coupe une partie
Rectification concernant le point 3, c’est vers la droite que sont décalées les vidéos dans l’espace privé :-)
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 :
|
