Plugin vidéo HTML5

Note : Ce plugin n’est plus mis à jour ! Vous devriez utiliser ce plugin à la place.

Les avantages ?

Avec un navigateur récent (Firefox 3.6 par exemple), il n’y a plus besoin de plugin propriétaire (Flash, Quicktime) pour lire la vidéo, elle est lue directement par le navigateur.

Les inconvénients ?

Chaque navigateur lit un format différent (MP4 ou Ogg généralement), ce qui oblige à encoder chaque vidéo deux fois.
Plus d’informations sur les formats gérés par les navigateurs (en anglais)

Pourquoi ce plugin alors ?

Pour promouvoir HTML5, qui est une technologie libre contrairement à Flash.

Utilisation

Ajoutez simplement votre vidéo à l’article puis mettez <videoX> (X étant l’ID de la vidéo) là ou vous voulez que la vidéo s’affiche.
Pour ajouter la vidéo dans un deuxième format, vous pouvez utiliser <videoX|alt=Y> (Y étant l’ID de la vidéo dans un autre format). Le navigateur sélectionnera alors le format qui lui convient.
Note : si on affiche la page avec un vieux navigateur qui ne gère pas HTML5, un lecteur en Flash s’affiche et lit la vidéo X. Il faut que cette vidéo soit en MP4 (ou FLV). C’est pourquoi, la méthode conseillée est <videoX|alt=Y> avec X en MP4 et Y en Ogg.

Remarques

Il faut impérativement spécifier la taille de la vidéo dans l’espace privé, sinon le lecteur s’affichera avec une taille de 0x0 !
Si vous ajoutez une vignette à la vidéo dans l’espace privé, elle s’affichera pendant le chargement ou si la vidéo n’est pas trouvée.

Discussion

6 discussions

  • robinson585

    How about having Leawo HD Video Converter a try ? Much easier for you to use.It can help you to convert any video format you want, and it contains more funtion than you can imagine. Furthermore, it allows you to convert 2D HD video to 3D files, for playback on 3D TVs and more compatible 3D devices.http://www.leawo.com/hd-video-converter/

    Répondre à ce message

  • 9

    Bonjour, Pierre,

    On se retrouve...
    J’ai fait les tests suivants avec windows XP :

    • Safari : le son sans l’image
    • Opéra : rien
    • IE (7 je crois) : le son sans l’image
    • Chrome : OK
    • Firefox : un cadre gris avec une croix apparaît, sans possibilité de lire.

    Quand on recalcule, un message de bug signale une erreur dans le squelette : filtre fichier non défini.

    Voilà pour les tests. Je suis de près la suite de l’aventure !
    Bonne continuation,
    KMk.

    • Si vous utilisez toujours la vidéo que vous m’avez envoyé, elle semble mal encodée.
      Je l’ai réencodée avec ffmpeg2theora et maintenant le son se lit.

      Pour le filtre fichier par contre, je ne comprends pas, il existe bel et bien pourtant (cf http://www.spip.net/fr_article4290.html). D’ailleurs, cette erreur n’apparait pas chez moi.

    • Bonjour, Pierre,

      Oui, effectivement, j’utilise toujours mon sous-marin. Je n’y entends pas grand chose en codec et autres subtilités... j’ai converti mon fichier vidéo en .mp4 et en .ogg à partir de ce site : http://w7.media-convert.com/convertir/, et suivi votre méthode du fichier alternatif.

      Je n’arrive pas à utiliser le logiciel Super pour convertir mes fichiers vidéo, jusqu’à maintenant, cela ne posait pas de problème (en .flv). Avez-vous un autre utilitaire à me recommander (ffmpeg2theora ne fait qu’ouvrir et fermer une console sous windows xp) ?

      Moi non plus, je ne comprends pas tout : j’avais également lu le fichier video.html en question sans trouver d’anomalie...

      À suivre...
      KMk.

    • Je n’utilise pas Windows, donc je ne peux pas trop vous aider.
      ffmpeg2theora s’utilise avec la console comme expliqué ici, mais si vous n’avez pas l’habitude de ce genre de chose, laissez tomber.
      Sinon vous pouvez essayer WinFF.

    • Bonjour, Pierre,

      • J’ai installé WinFF : il ne convertit que les fichiers sons en .ogg, pas les fichiers vidéos. Mes deux fichiers vidéos .ogg et .mp4, sur VLC, sont lisibles, avec images et son.
      • Si j’ai bien compris, en fonction des navigateurs, ce n’est pas le même fichier qui va être retenu... Pour aller plus loin, voilà ce que j’obtiens :
      fichier .mp4 fichier .ogg ni l’un, ni l’autre
      Safari : le son sans l’image
      Opéra : rien
      IE (7 je crois) : le son sans l’image
      Chrome : OK
      Firefox : un cadre gris avec une croix apparaît, sans possibilité de lire.

      Ce serait donc le fichier .mp4 dont le codec serait inapproprié ? Ce qui ne règle pas le problème de firefox...

      À suivre...
      KMk.

    • michel

      Pour ceux qui rament en conversion , je conseille http://www.mirovideoconverter.com/ qui utilise ffmpeg et ffmpeg2theora

    • Il ne suffit pas que le fichier soit en MP4, il faut absolument utiliser le codec H.264. Ca vient peut être de là.
      Pour Firefox/Opéra, c’est sûrement encore et toujours le bug des types MIME de Spip.

    • Bonjour, Pierre,

      La précision avait effectivement son importance ! Les problèmes avec le fichier .mp4 sont effectivement résolus avec un encodage H.264, et WinFF opère très bien cette conversion. Je suis contente d’avoir persévéré !

      Faut-il attendre spip 2.2 pour s’assurer de la compatibilité avec les principaux navigateurs ou y a-t-il un moyen de corriger ce dysfonctionnement dès maintenant ?

      En tout cas, merci pour ces éclairages sur les formats vidéo et les codecs... On apprend à tout âge !

      Bonne continuation,

      KMk.

    • Bonjour,
      Oui, il faudrait attendre la prochaine version de SPIP (2.2 ou 2.1.1, je ne sais pas), elle devrait corriger ce problème.
      En attendant, vous pouvez essayer de modifier le fichier modeles/video.html du plugin et d’indiquer manuellement les types MIME.
      Pour cela, remplacez #MIME_TYPE par le type MIME de votre vidéo (« video/ogg » pour Ogg et « video/mp4 » pour MP4).
      Vous pouvez aussi essayer de renommer votre vidéo en .oga.
      Mais je ne garantis pas que ces solutions fonctionneront.

    • Testé à l’instant WinFF, c’est top  ;)

    Répondre à ce message

  • 3
    freechelmi

    Bonjour , savez vous ce qui pourrait bloquer pour le faire fonctionner en 2.0.X ?

    • Euh, je ne l’ai jamais testé avec la 2.0.
      Vous pouvez préciser ?

    • freechelmi

      Salut je test enfin sur une 2.0 .Il y a plusieurs problèmes a mon avis pas specifique a la 2.0

      -  deja j’ai patché typedoc.php pour le problème des ogv.
      -  Le mimetype que spip donne pourles fichier .mp4 est application/mp4 , il me semble que les navigateurs HTML5 attendent plutot video/mp4 ?
      -  La vignette étant utilisé comme poster et faisant juste quelques pixels de hauteur , il est du coup impossible de demarré la video meme en ayant specifié 320x240 dansles proprietés de la video.

    • Oui, Firefox a à priori besoin de « video/mp4 » comme type MIME, les autres navigateurs semblent être plus tolérants.
      Pour la vignette, je n’ai jamais eu de problème (la plupart des navigateurs ont une taille de lecteur minimum). Vous utilisez quel navigateur ?

    Répondre à ce message

  • Je me demande si c’est si compliqué de faire un plugin avec une option qui génère le code à copier pour coller la vidéo dans un site externe.. (genre youtube etc..) ça manque terriblement, je trouve...

    Merci pour tout
    André

    Répondre à ce message

  • 1

    Dommage que JW Player soit en CC by-nc-sa. Surtout le nc : ça empêche de l’utiliser pour vendre la solution à un client ou pour un site commercial (ne serait-ce qu’avec les pubs Google). C’est également incompatible avec la GPL. :-(

    • J’ai pris JW Player parce que je le connaissais mais le principe doit être très facilement applicable à un autre lecteur Flash. Et il doit bien en exister sous LGPL, non ?

    Répondre à ce message

  • michel

    Merci c’est grosso modo ce que je voulais faire , sans vraiment y arriver :-) .

    très bonne idée d’avoir repris le travail sur v4e

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

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

Dernière modification de cette page le 11 juin 2012