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
Bonsoir
Je pense qu’il y a un problème avec les fichiers Webm, Firefox 8.0 et le plug
Firefox arrive parfaitement à lire mon fichier sur mon bureau, mais pas quand je le met dans un article !
je mets mon article, j’attache mon fichier au format Webm, je mets dans mon article « video8 » et cela ne fonctionne pas, à la place, j’ai un fond noir :-(
A savoir que je me sers de XMedia Recode pour faire mes fichiers car il peut faire aussi bien faire du Webm que du h.264 :-)
Sinon, j’ai une autre question, pendant que j’y suis, j’ai bien compris que le plug va lire le fichier au format h.264 ou Webm suivant le navigateur si les deux fichiers portaient le même nom, par contre, comment faut’il faire dans l’article ?
Imaginons que mon "doc 8" est mon fichier au format Webm et que mon "doc 9" est mon fichier au format H.264, j’attache donc mes deux fichiers à mon article, mais après ???
Je mets juste "video8" ? ou alors il faut mettre un truc du genre « video8|video9 » dans mon article pour que la vidéo, soit lu par Firefox, Chrome, explorer, etc ?
J’ai compris qu’il y avait la possibilité de ne mettre qu’un fichier Mp4 et qu’alors FlowPlayer serait une alternative, mais comme je préfère ne pas utiliser de flash, c’est pourquoi je mets les vidéos aux deux formats, surtout que Flash ne va plus être possible sur le long terme sur mobile, donc...
D’ailleurs au passage, la librairie html5media (il y a une nouvelle version dispo) ne devrait pas s’installer plutôt dans le dossier "lib" de spip ?
Cordialement, Franck
Bonjour Franck :)
- Pour tes fichiers webm/h264 il te suffit de ne mettre la référence qu’au premier, le plugin se charge normalement de récupérer ses copains du même nom mais d’extension différente automatiquement. Donc quelque chose comme
<video8>devrait fonctionner. Tu peux le vérifier avec ton code source, qui doit contenir plusieurs lignes au niveau de la balise<video xxxxx><src h264/><src webm /></video>. Sinon si tu as le lien de ton site que je puisse regarder :)- Attention, ça n’est pas du MP4 qu’il faut faire, mais du H264 (le MP4 est un conteneur, pas un format) pour utiliser l’alternative Flash
- L’alternative Flash est au contraire très bonne, car la plupart des mobiles lisent le flash, et les mobiles qui ne lisent pas le Flash (chez Apple) lisent le H264. De plus tu es obligé d’en avoir une pour la tripoté de gens étranges qui utilisent encore actuellement IE :)
- L’installation ne se fait pas dans lib/ de SPIP car le ZIP de HTML5 media est très gros et plante au téléchargement/décompression quand tu l’installes via le plugin. Très gros car il contient des fichiers médias de test. C’est pourquoi il est intégré au plugin plutôt que téléchargé.
J’espère t’avoir apporté quelques réponses, bonne journée ! :)
Pour compléter ce ticket, pour ceux qui rencontreraient le même problème que Franck, il s’agissait ici en fait d’une mauvaise configuration serveur.
La parade (si la configuration de base du serveur ne vous est pas accessible) consiste à rajouter les lignes suivantes à votre fichier .htaccess (ou à créer un fichier .htaccess contenant ces lignes s’il n’existe pas déjà) :
Répondre à ce message
Juste un BUG découvert dans la nouvelle version téléchargeable. Avec le critère « doublons ».
J’ai un squelette qui se présente comme ceci :
Quand j’ajoute une vidéo directement dans le texte sous la forme de
<videoXX>, il vient s’ajouter une seconde fois dans ma boucle DOCUMENT alors que le critère doublons figure dans cette boucle.« Ceci pour laisser le choix au rédacteur d’ajouter la vidéo dans le corps du texte ou la mettre automatiquement à la fin de l’article. »
Dans la version 0.8.2 du plugin, le critère doublons agissait et maintenant plus. Je suis donc revenu à une version antérieur.
Voilà. Encore bravo pour ce plugin :-D
Bonjour à tous,
J’ai le même problème de doublons.
J’utilise Zpip, squelettes et thèmes Mapaaran.
Sur un autre site, mais pas construit avec Zpip, je n’avais pas de doublons, pas de vidéo retrouvée en lien dans les documents joints.
Ma version du plugin est la 0.7.1, voici le code
du fichier squelettes/inclure/documents.html
où j’ai rajouté le critère doublons sans résultat :
[(#REM) Portfolio : album d’images ]
<:info_portfolio :>
[
#SETtaille, 100
#SETratio_x,#LARGEUR|div#GETtaille
#SETratio_y,#HAUTEUR|div#GETtaille
#SETratio,#GETratio_x|<=#GETratio_y| ?#GETratio_x,#GETratio_y
type="#MIME_TYPE"
rel="documents_portfolio[-a(#ID_ARTICLE)][-r(#ID_RUBRIQUE)]"
[ title="(#TITRE|attribut_html|couper{80})"]>
[(#FICHIER
|image_reduire_par#GETratio
|image_recadre#GETtaille,#GETtaille,center
|inserer_attributclass,spip_logos
|inserer_attributalt,[(#TITRE|attribut_html|couper80)])]
]
Merci pour votre aide.
La réponse était déjà contenue dans ce forum,
donnée par Yffic, je la cite :
Merci à Guy de la Spip-zone qui m’a mis
les yeux dessus, merci à Yffic, merci à tous.
Répondre à ce message
J’ai un problème aujourd’hui pour l’insertion de vidéos Dailymotion, alors que les vidéos Youtube fonctionnent elles.
Cela remarche parfaitement ! Dailymotion devait avoir un petit soucis.
En tout cas, merci pour ce plugin bien pratique !
Répondre à ce message
Bonjour
Ayant besoin d’insérer également des fichiers audio, j’ai dupliqué les fichiers video.html et balises_video_html5.html en audio.html et balises_audio_html5.html. J’ai mis .mp3 et .ogg dans lesExtensionsHtml5 et remplacé nomVideo par nomAudio.
Sous Safari, ça marche (normal, puisqu’il se sert de la balise audio), sous FF le player est appelé mais playlist" :[] est vide... Il doit manquer quelque chose mais je ne sais pas quoi...
Pour l’audio, c’est le player flowplayer.swf qui est appelé, c’est normal ou est ce que c’est flowplayer.audio.swf qui devrait être appelé ?
Le lien de mes essais : http://dev-cecile.info/Spip_2_1_11/spip.php?article1
Merci d’avance
Cécile
Bonsoir
Après quelques heures de recherche, c’était tout bête... j’avais indiqué type=’audio/mp3’ alors qu’il fallait type=’audio/mpeg’ !
Le « flowplayer.audio.swf » est appelé tout seul dans un param de la balise object.
Répondre à ce message
Bonjour
Une question « simpliste » : peut on utiliser ce plugin sans passer par une plateforme d’hébergement de vidéos ? merci
Bonjour Cécile.
Le but est double :
- utiliser la balise vidéo HTML5 (et donc héberger toi même tes vidéos, comme le précise l’article)
- importer plus facilement les vidéos que tu aurais hébergées sur des plateformes
Donc la réponse à ta question est oui. Et la partie « comment je compresse mes vidéos » pourra même t’y aider ! :)
Bonjour et merci xdjuj
Je n’avais pas trouvé cette info (ou pas compris) dans l’article (j’ai pourtant lu 10 fois ainsi que tous les posts) mais si ça marche, c’est super :)
Bon dimanche
Répondre à ce message
Soucis avec Dailymotion : dans le modèle video.html, l’iframe inclus dans le paramètre src le #TITRE avec ses espaces et accents, ce qui provoque une erreur. J’ai corrigé ainsi (ligne 66 du modèle) :
Serait-il possible de corriger le plugin ?
LIbre à toi de corriger le plugin ! Il te suffit de commiter ! :)
Est-ce que tu ne devrais pas plutôt utiliser
[(#TITRE|texte_backend)]? :)Je sais que je vais avoir l’air stupide là, mais je ne sais pas ce que c’est de « commiter ».
:) Commiter c’est l’action de publier des modifications en SVN. Tous les plugins sont « libres » et il est donc possible de corriger/améliorer ces plugins librement et pour le bien collectif :)
- http://zone.spip.org/
- http://listes.rezo.net/mailman/listinfo/spip-zone-commit
- http://www.spip-contrib.net/La-Zone-Facile
Mais dans le cas précis du bug que tu viens de corriger, c’est le filtre |texte_backend qu’il faut à mon avis utiliser, teste le, et si c’est bien, commite sur le plugin (= corrige le) ou dit le moi que je le fasse :)
Bonne soirée !
Après essai cela fonctionne avec
(#TITRE|texte_backend|match{/s, %20})car texte_backend seul ne convertit pas les espaces.Pour ce qui est de commiter je vais m’y intéresser mais d’ici que j’ai tout compris je préfère que tu t’en occupes pour l’instant !
Bon j’ai regardé ton histoire :)
Ca ne provoque pas de bug, mais simplement une erreur de validation ! J’ai commité un correctif (http://zone.spip.org/trac/spip-zone/changeset/51160 ) que je t’invite à suivre à la place de ton hack, il te suffit simplement d’utiliser le filtre
[(#TITRE|urlencode)].Je n’ai en revanche pas retiré les frameborder qui sont toujours présents dans le code, même s’ils sont dépréciés aujourd’hui, car ils n’ont pas d’équivalent universel et sont un gage de rétrocompatibilité pour un certain nombre de navigateurs, et la compatibilité prime sur la validité :)
J’ai repris tout cela à tête reposée... En fait la nouvelle version ne fonctionne pas non plus. Je n’ai pas réussi à déterminer pourquoi, il doit y avoir un soucis avec la propriété animatedTitle dans certaines circonstances. J’ai finalement laissé animatedTitle vide (ce que faisait en fait mon hack en raison d’une erreur de syntaxe, car j’aurais dû écrire
L’URL sortie avec ce hack fonctionne cependant en dehors de l’iframe mais pas dans l’iframe (?) alors qu’avec urlencode l’url produite par le code ne fonctionne même pas en dehors de l’iframe.
Voici un exemple : #TITRE=Des défibrillateurs dans les refuges de haute montagne
avec mon hack l’URL complète :
par 8 Mont-Blanc
(mais ne fonctionne pas dans l’iframe)
avec urlencode (ou rawurlencode) :
par 8 Mont-Blanc
(ne fonctionne pas du tout : « An error occured »)
Répondre à ce message
bonjour,
ça serait sympa si vous pouviez utiliser la fitvids.js, une librairie Javascript (utilisant jquery) permettant de rendre les vidéos redimensionnables automatiquement en fonction de la taille du navigateur (Responsive Webdesign).
Même en pleine lecture, vous aurez la possibilité de redimensionner votre navigateur sans que cette dernière ne coupe ou reste dans sa taille figée.
lien : http://fitvidsjs.com/
@+
Répondre à ce message
Bonjour,
Au moment d’activer le plugin, un message indique :"Impossible d’activer le plugin ../plugins/videos
Nécessite le plugin MEDIAS en version [1.6.0 ;] minimum."
Où trouve-t-on ce plugin ?
Merci
Ici :)
http://www.spip-contrib.net/Mediatheque
C’est un plugin qu’il faut de toutes façons avoir ! C’est LE plugin :)
J’avais un doute sur le nom, merci de la précision
Répondre à ce message
Le h.264, fonctionne d’après ce que je comprends, mais concernant le WebM ?
Je pose la question, car l’un à besoin d’une licence payante pour les encodeurs et les sites aux vidéos payantes, et pas l’autre !
Salut :)
Il n’est pas prévu de prendre en charge le WebM (ou alors on peut le rajouter mais en option) pour les raisons simples suivantes :
Moralité, grâce au H264 avec UNE SEULE vidéo (= 1 seule compression = gain de temps + 1 seul fichier = gain de place) on répond à la problématique de TOUS les utilisateurs.
Je ne choisi pas de faire un forcing au format (même si au final j’utilise le H264 depuis de nombreuses années mais pour le coup c’est une coïncidence), je constate juste qu’en condition réelle (= sites avec de la vidéo) il n’est pas possible de faire autrement. Avec 1 vidéo H264 correctement encodée, je rends le média disponible pour tous les navigateurs du marché + iPhone + iPad + Androids ou autre... Imagine avec 80 vidéos dont 1flash, 1webM, 1 version Mobile... Ca en fait des ressources et du temps perdu en encodage !!
De plus tu peux encoder en H264 gratuitement à partir de HandBrake le plus simplement du monde ou en ligne de commande à partir de ffmpeg ou mencoder.
HTML 5 : fin du H.264 pour la vidéo sous Chrome
http://www.pcworld.fr/2011/01/12/logiciels/html-264-video-chrome/510503/?utm_source=xml&utm_medium=rss&utm_campaign=rss
Il y a du nouveau concernant les navigateurs.
On en est pas encore là, donc on verra quand on y sera et quand Flash le lira (ce qui n’est pas le cas actuellement) ;-)
Salut désolé d’en rajouter une couche et bravo pour ton travail , mais au sujet des formats HTML5 :
- Il n’y a plus aujourdhui que IE9 et Safari qui lisent le H264 ( 10% des Pcs) , Donc oui pour les mobiles H264 est indispensable, mais pour les Pcs le non support de Webm ou theora fait que les 40% restant (FF,OP,CR) ne liront la vidéo qu’en flash et enleve donc tout l’interet.
Ne compter pas sur la lecture Webm par Flash, autant proposer une lecture externe via VLC
C’est vrai :)
Mais ça veut dire se contraindre à :
- encoder 2 fois
- uploader 2 fois
- héberger 2 vidéos
C’est à dire doubler le travail et les coûts...
C’est donc une question de point de vue :
- est-il préférable d’avoir une seule vidéo (plus économique en travail et en ressources) quitte à ce que les vilains navs soient encore sous Flash, ou
- faut-il doubler le travail et les coûts d’hébergement pour satisfaire une autre partie des navs, les autres restant de toutes façons en Flash
Mais quoi qu’il en soit tu peux tout à fait utiliser le WebM avec ce plugin, tu n’as juste qu’à adapter le modèle pour qu’il rajoute le WebM en queue de peloton :) C’est rapide à faire, mais je manque de temps pour faire des jolis tests ! :)
Tu as 100% raison : il faut faire un choix :
Personnelement Je prefere ecarter les produits apple ( Iphone et Safari) et tout mettre en theora ( et Webm quand FF4 sera deployé) .
ça m’oblige à demander l’installation :
- de chrome frame quand je detecte IE
- Des codecs Xiph quand je detecte Safari PC
je comprends que certains sites doivent absolument etre compatible Iphone et donc utiliser au moins une version H264.
je n’aime pas ton expression « les vilains » , les « vilains » sont plutot ceux qui refusent de perdrent leurs royalties en supportant Webm.
Tu encodes en MPEG4 H264 à partir de FFmpeg, directement depuis ton serveur même, si tu le souhaites, du coup, d’un point de vue utilisateur, c’est gratuit. Je ne vois pas pourquoi sortir encore un autre format.
Ca fait des années et des années que j’utilise le H264, parce qu’il est incomparablement plus qualitatif que le DivX ou Xvid de l’époque :) Si WebM est mieux et plus rapide à encoder, je suis pour, mais s’il n’est pas utilisable sauf sur une niche... Je suis contre ;-)
Boycotter iPhone et iPad c’est en réalité parfaitement impossible, car c’est LA demande concernant le « mobile ». Les gens ne te demandent pas qu’un site soit « compatible tablette », ils te demandent que le site soit « HTML5 pour être lu sur iPad ». C’est pas moi qui fait le marché ;-)
La vraie réponse au problème c’est effectivement WebM + H264 + Alternative Flash en H264. Ce qui te permet de couvrir 100% à partir de 2 vidéos. C’est justement ce 2 vidéos que je remets personnellement en cause... C’est mieux qu’avant, mais toujours pas satisfaisant, moi j’en voudrais qu’une. Ou alors Flash se met à supporter le WebM et on sort l’alternative flash pour Safari et ses copains, mais ça ne résoud pas le problème des tablettes (iPad) et portables (iPhone) car c’est bien eux qui sont à la mode... Et à la mode du H264 :)
C’est l’avenir qui nous dira de toutes façons, le choix sera fait quand la guerre des géants sera remportée par l’un ou l’autre, nous en attendant, on est juste pris en otage !! :)
Tu as très bien resumer.
L’informatique est fait d’incompatibilité, je parlais d’un site dont je m’occupe qui n’est pas professionnel, donc je vais peut etre assumer le fait d’expliquer aux utilisateurs d’Itruc que leur appareil ne pourra jamais lire nos videos comme beaucoup de vidéos en flash ne sont pas toujours disponible sur Android ou Linux.
il est clair que WebM « gagnera » cette bataille , mais il est clair que ça prendra du temps et certains periphériques mobiles ne pourront pas etre mis a jour pour supporter Webm tels que les Itrucs
Prise en charge du H264, WebM et Ogg commitée.
Il suffit que les 3 versions portent le même nom et elles seront toutes les 3 remontées il suffit simplement d’en appeler une des 3, les autres sont automatiquement attachées : Video.mp4, Video.webm, Video.ogg simplement appelées via , la balise HTML5 est désormais automatique pour ces formats.
Bonjour à tous,
Nous en sommes maintenant à Firefox 4 qui d’ailleurs décale inesthétiquement l’affichage du player flash (pour constater et même proposer une solution (sachant que c’est peut-être une spécificité de mon design) voici l’URL à ouvrir avec Firefox 4 : CarnetVoyages.com). Je me repose donc la question que j’avais laissé en suspend, de tenter de rendre accessible mes vidéos, en HTML5 pour la plupart des navigateurs, et donc avoir un MODELE qui permette cette mise à disposition (même s’il faut uploader 3 fois la même vidéo dans 3 formats différents, l’aspect hébergement et financement m’importe peu).
Je me posais donc la question de savoir si quelqu’un avait mis en place cette modification sur le modèle « video » ?
S’agit-il simplement de mettre en place l’insertion des vidéos, dans l’ordre qui est décrit ici http://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html ?
Merci à la team de dév pour ce plugin, et merci d’avance pour les réponses aux questions
Le problème de design est résolu, sous FF4, la balise « figure » contenu dans le modèle video.html est accompagné d’un padding par défaut > 0px, autant en hauteur qu’en largeur. Je les ai forcés à zéro et plus de problème. Si ça peut en aider d’autres...
En revanche ma problématique de modèle « video » acceptant plusieurs type de format vidéos pour les rendre accessible en HTML5, reste entière.
Salut Keev, exactement comme marqué dans le commentaire du 26 février auquel tu viens de répondre, le modèle accepte déjà autant de fomats vidéos que tu uploaderas, tant qu’ils portent le même nom.
Tu n’as donc plus qu’à uploader :)
Est-ce que cela dépend de la version du plugin que j’utilise ? Je suis en v0.3 apparemment...
Oui tout à fait, le plugin en est à sa version 0.7.1 qui devrait régler votre soucis :)
Je testerai avec la nouvelle version alors... merci pour les réponses, et le plugin ;)
Salut xdjuj,
Sur ma plateforme de test, je viens de passer à la dernière version du plugin vidéo(s). Aucun problème sur la migration, cependant j’ai essayé de mettre en place la compatibilité HTML5, en uploadant une vidéo (video187) « .mp4 » et une autre (video188) « .ogg » (avec le même nom bien-sûr). Quelque soit la méthode employée (que je vais détailler plus bas), si mon article référence la <video187> et que j’essaie de la lire sous FF4, il lit la vidéo en « .mp4 » (soit la video187 et non pas la video188 encodée en OGG alors que ça devrait être le cas) avec le lecteur flash... Du coup, pour vérifier que la vidéo « .ogg » est bien lue en HTML5 par FF4, dans mon article j’ai référencé la <video188> au lieu de la <video187>. Elle est effectivement lue en HTML5.
La conclusion de tout ce charabia, c’est que le MODELE <videoYY> ne semble pas réussir à choisir le bon fichier vidéo en fonction du navigateur, pour donner la priorité au HTML5 lors de la diffusion du contenu vidéo.
Les deux méthodes que j’ai utilisées pour mettre à disposition les vidéos, sont les suivantes :
> dépôt du fichier « .mp4 » dans le dossier /tmp/upload
> dans l’article devant y faire référence, j’utilise la boîte « JOINDRE UN DOCUMENT » —> « Vous pouvez sélectionner un fichier du dossier tmp/upload/ : » qui me permet de sélectionner le fichier « .mp4 »
> le fichier « .mp4 » est copié de /tmp/upload vers /IMG/mp4
> dans l’article, la vidéo apparaît dans la colonne de gauche avec la balise <doc187>
> je mets donc dans le corps de l’article la balise <video187|html5=oui|largeur=620|hauteur=380>
> dans le dossier /IMG/mp4 je copie également le fichier « .ogg » manuellement (j’ai essayé aussi la variante consistant à déposer ce fichier dans le dossier /IMG/ogg, sans effet)
> je consulte mon article avec FF4, et c’est la vidéo « .mp4 » qui est lue dans le player flash au lieu de la vidéo « .ogg » lue en HTML5
> j’uploade le « .mp4 » en utilisant la même méthode que précédemment
> j’uploade le « .ogg » en utilisant la même méthode que pour le « .mp4 »
> donc cette fois-ci je me retrouve avec 2 documents dans mon article, le <doc187> (le « .mp4 ») et le <doc188> (le « .ogg »)
> dans mon article je fais référence à la <video187|html5=oui|largeur=620|hauteur=380>
> je consulte mon article avec FF4, et c’est la vidéo « .mp4 » qui est lue dans le player flash au lieu de la vidéo « .ogg » lue en HTML5
> si je référence ma vidéo comme ceci <video188|html5=oui|largeur=620|hauteur=380> alors elle est bien lue en HTML5 par FF4
Je n’utilise peut-être pas les bonnes méthodes, c’est pour ça que j’explique ma démarche ici, pour que vous puissiez la corriger, car j’ai déjà bien fait le tour de la question, et je suis à cours d’idées.
D’avance merci de vos réponses
Il me semble que modeles/video.html et /noisettes/balise_video_html5.html ne testent que la terminaison .m4v
Mais ils devraient tester pareillement la terminaison .mp4 sauf erreur ??
Je donne ma langue au chat...
Salut Keev.
Je t’avoue que j’ai pas tout lu, mais la remarque d’acatonne est pertinente et j’ai répercuté la modif. J’en ai profité pour rajouter le support du mkv et de « généraliser » la balise (en supprimant les codecs, qui peuvent parfois se planter si on les force, et on ne peut en forcer qu’un... alors qu’il existe plusieurs versions, autant les virer).
Du coup, si tu télécharges (demain, quand le ZIP sera fait) la dernière version du plugin (0.7.2) ça devrait corriger ton soucis. Sinon les modifs sont déjà disponibles sur la Zone :)
Merci xdjuj,
je teste ça la semaine prochaine et te fais un retour. Dans mon message précédent, la deuxième partie n’est que le détail de la première, donc si tu as compris la problématique avec la première partie pas besoin d’aller plus loin ;)
Une question vite fait quand même :
- > quand j’attache ma vidéo dans un article, et que je veux mettre à disposition un autre format de cette vidéo, où est-ce que je dépose cet autre fichier vidéo ?
quand j’attache ma vidéo dans un article, et que je veux mettre à disposition un autre format de cette vidéo, où est-ce que je dépose cet autre fichier vidéo ?
Salut Keev.
Il te suffit d’importer ta vidéo (exactement le même nom de fichier, sauf extension bien entendu), dans SPIP, c’est tout. Le plus simple et logique étant donc de lier ces fichiers différents (même nom ! J’insiste) dans le même article, ça semble juste plus cohérent mais tant que le fichier existe dans SPIP, il sera remonté :)
Ex. : monfilm.m4v / monfilm.webm ou encore monFlim.m4v / monFlim.ogv tant que le nom est le même
C’est donc ce que j’avais fait jusqu’à présent, je vais réessayer...
Bonjour Xdjuj,
je n’arrive plus du tout à afficher le lecteur vidéo dans la partie privée pour les nouvelles vidéos que je veux ajouter.
L’ancienne vidéo fonctionne toujours (parties privée et publique du site) mais pas moyen d’en ajouter une nouvelle dans un nouvel article, du moins la prévisualisation ne marche pas. Dans le doute, je n’ai donc pas publié l’article... Est-ce que ce pourrait être un problème uniquement de prévisualisation dans la partie privée, ou lors de la publication la vidéo ne sera pas visible non plus en partie publique ?
Pour info, c’est une vidéo hébergée sur mon serveur, donc ajoutée à partie de l’interface d’ajout de document dans l’article. L’extension est MKV. J’avais le problème avec la version 0.3 du plugin, j’ai donc migré vers la version actuelle, mais le problème persiste. Je n’ai pas eu de message d’erreur lors de l’ajout de la vidéo. Enfin, j’ai essayé avec une vidéo depuis Youtube et ça fonctionne.
Merci d’avance du coup de main
J’ai continué à bidouiller, plus aucune vidéo ne fonctionne et le player affiche ça à l’initialisation :
300 : Player initialization failed :
ReferenceError : Error # 1069
En plus c’est l’ancienne version du player...
Le problème est visible en page d’accueil du site CarnetVoyages.com
Merci d’avance du coup de main
Infos complémentaires :
Quand je sélectionne l’onglet « Séquences() » dans Médiathèque j’ai plusieurs Warnings. Je ne sais pas s’ils ont quelque chose à voir avec ma problématique, mais étant donné que ce sont les seuls messages anormaux, je les signale.
Merci d’avance du coup de main
URL de la page de test : carnetvoyages.com/spip.php ?page=mesVideos
Une page intéressante : http://jojaba.free.fr/html5/video.html
Salut Xdjuj,
Je sais que je ne suis qu’un casse-pieds ne rencontrant que des problèmes avec le plugin vidéo(s), mais je n’arrive pas à faire fonctionner la moindre vidéo hébergée sur mon serveur depuis que je suis passé à la dernière version du plugin. Les anciennes vidéos ne se lancent plus (sauf sous mon firefox 3.6, mais les autres versions et les autres navigateurs n’arrivent pas à la lancer), les nouvelles ne veulent pas se lancer, etc...
Tu constateras par toi-même :
http://www.carnetvoyages.com/voyages/amerique-du-sud/bolivie/article/uyuni
http://www.carnetvoyages.com/spip.php?page=mesVideos
Une idée ?
Tes deux liens fonctionnent très bien sous Safari et Firefox Mac (donc à priori partout). Tu as juste une vidéo plutôt lourde qui met sûrement beaucoup de temps à charger.
Pour peu que ton hébergement soit un hébergement mutualisé de mauvaise qualité, la vidéo est peut être clairement inaccessible en journée, et là, 1h du mat, pas de charge sur les serveurs, elle déroule sans soucis.
En tout cas, je vois de l’amérique latine ou quelque chose dans le genre et un gros 4x4 bleu à environ 2 min de vidéo, et ce sur mes deux navigateurs, donc de mon point de vue, pas de soucis côté plugin, plutôt côté hébergement (ou ailleurs).
Bonne soirée.
Salut Xdjuj,
Même constat que toi sous mon FF3.6 sous Linux, la vidéo marche très bien. En revanche (et j’ai fait tester par 4 personnes différentes sur leurs postes respectifs) ça ne fonctionne pas sur les versions plus récentes de FF (version 4 et supérieures) et sur IE, sous Windows (soit pour un grand nombre d’utilisateurs donc). Quelle est ta version de FF ?
Par ailleurs j’ai une vidéo en Flash tout aussi lourde qui elle tourne sur un autre plugin sans problème 24h/24. D’où mes interrogations quant au plugin vidéo(s).
Je suis en hébergement mutualisé chez OVH.
Merci pour tes réponses
Ta vidéo ne charge pas en entier. Je suis sûr que c’est ton hébergement qui déconne.
J’utilise Vidéo(s) sur de nombreux (gros) sites en production, et je n’ai aucun retour à ce sujet là.
Tu devrais dans tous les cas utiliser plutôt des services comme Dailymotion ou Youtube ce qui te permettrait en plus de diffuser sur ces médias, et donc peut être de récupérer quelques visites de plus :)
Mais de mon point de vue, c’est ton hébergement, car aujourd’hui ta vidéo ne charge qu’à moitié :)
Oui j’avais déjà pensé à Youtube et Dailymotion. Ce n’est pour le moment pas la politique de la maison. Peut-être que ça changera, et à ce moment là, le plugin vidéo(s) me sera à nouveau très utile.
Qu’est-ce qui aurait pu changer au niveau de mon hébergement pour que des vidéos qui marchaient bien, ne marchent plus (ou qu’à moitié) ? Application de quotas sur ma bande passante ? Autre chose ?
Merci encore pour ta disponibilité.
Répondre à ce message
Comme marqué dans la doc, il faut utiliser le modèle vidéo
rip dvd mac
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 :
|
