Squelettes pour web-tv

Note : ces squelettes sont en HTML5, contrairement au squelette de base de SPIP qui est en XHTML.
Attention : Ce bug peut empêcher les vidéos de s’afficher avec Firefox. Il devrait être corrigé dans SPIP 2.2.

Présentation


Ces squelettes fournissent une base pour créer une web-tv avec SPIP. Ils sont basés sur ceux de tvcampus.net.
Il suffit de rajouter une vidéo à un article pour qu’elle apparaisse dans le lecteur.
Le lecteur utilise la balise video de HTML5. Il ne lit donc que les vidéos au format Ogg et n’est compatible qu’avec Firefox 3.5 ou plus récent (ou Safari/Chrome si les vidéos sont en MP4. Vous pouvez aussi publier les vidéos dans les deux formats et le navigateur choisira celle qui lui convient).
Si vous affichez la page avec un navigateur qui ne gère pas HTML5, un lecteur Flash devrait se charger. Le lecteur peut lire les vidéos en MP4 ou FLV.
Le squelette comprend aussi un flux RSS (podcast.html) qui fait aussi office de podcast compatible iTunes (à condition de publier les vidéos dans un format compatible), ainsi qu’un Sitemap Google (sitemap.html) pour référencer les vidéos sur Google Video.

Le CSS est basique pour vous permettre de l’éditer à votre guise, mais il n’est sûrement pas très utilisable tel quel.

Installation

Décompressez l’archive puis placez simplement le dossier webtv dans votre dossier plugins puis activez le comme expliqué ici.
Si vous avez déjà des squelettes personnalisés, il faudra sûrement modifier les nouveaux squelettes pour les adapter à votre site.
Vous aurez sûrement besoin d’éditer styles.css pour donner une apparence personnalisée et agréable à votre site.

Utilisation

Il suffit de joindre une vidéo à un article pour qu’elle apparaisse dans le lecteur, inutile de la placer dans l’article.
Le menu affiche toutes les rubriques contenant des articles + un premier niveau de sous-rubriques.
La dernière brève s’affiche à côté du menu.
Ce squelette n’implémente pas un certain nombre de fonctions avancées/plugins (mots clés, agenda, etc). Cependant, elles devraient être relativement facile à rajouter en modifiant les squelettes ou en en créant de nouveaux.
Note : le squelette est prévu pour des articles avec logo. Il est préférable, pour des histoires de format, que le logo soit une capture d’écran de la vidéo.

Dans quel format encoder ma vidéo ?

Pour être visible dans Firefox, Opera et Chrome, la vidéo doit être en Ogg Vorbis.
Pour être visible dans Chrome, Safari, avec l’iPhone et sur Android, la vidéo doit être en MP4 H.264.
Pour être visible dans les navigateurs qui ne gèrent pas HTML5 (via le lecteur Flash), elle doit être en FLV ou MP4.
Le plus simple est d’encoder chaque vidéo deux fois (Ogg et MP4, et ajouter les deux à l’article) et le navigateur choisira automatiquement le format qui lui convient.
Plus d’informations sur les formats gérés par les navigateurs (en anglais)

Remarques

Il faut impérativement spécifier la taille de la vidéo dans l’espace privé, sinon le lecteur Flash s’affichera avec une taille de 0x0 !
Ce plugin utilise JW Player pour le fallback. JW Player est sous licence Creative Commons (Paternité - Pas d’Utilisation Commerciale - Partage des Conditions Initiales à l’Identique 3.0 Unported).

Captures d’écran

Capture d’écran
L’apparence de base de la page d’accueil
Article
Une page d’article
Rubrique
Une page de rubrique
Exemple
Un exemple de ce que l’on peut faire avce ce squelette.
(Cet exemple utilise un lecteur Flash non fourni).

Discussion

6 discussions

  • Patrocle

    Bonjour,

    Ce plugin a l’air bien mais le sujet date un peu (2010)

    Personne ne sait si le même style de plugin existe pour la version 3 de SPIP ?

    Par avance merci à ceux qui passeront par là

    Répondre à ce message

  • Vincent Delebassée

    salut et bonne année,

    j’aimerais savoir, n’étant pas développeur web confirmé, comment ne pas faire démarrer automatiquement la video lorsqu’on affiche la page ?

    d’avance merci

    Répondre à ce message

  • 5
    François Daniel Giezendanner

    Bonjour,

    Envisagez-vous d’en faire une version en Plugin ?

    Cordialement

    FDG

    • Bonjour,
      Vous pouvez préciser ?
      Je ne vois pas bien l’intérêt d’en faire un plugin.

    • Salut,

      L’intéret est une installation simpligié via l’interface d’administration des plugins. Plus facile à installer pour l’utilisateur ;)

      (et pas dur à adapter pour le dev, juste un plugin.xml minimum)

    • J’ai fait un plugin (basique) avec un but proche :
      http://www.spip-contrib.net/Plugin-video-HTML5

    • En fait Pierre, c’est juste qu’il y a deux manière de distribuer un squelette : sois sous forme classique de dossier « squletettes » soit sous forme plus moderne de « plugin ». Les avantages sont entre autre l’installation automatique, mais aussi la possibilité d’avoir un un mes_options dans le même dossier (déclaré dans le plugin.xml)

      regarde par exemple le squelette « collection » pour voir ce qu’est un squelette-plugin.

      Ton plugin ne fait pas la même chose : il se contente de livrer une brique.

    • Ah, d’accord, je n’avais pas vu ça comme ça.
      J’ai rajouté un plugin.xml, mais je suppose qu’il faudra retravailler un peu le squelette pour le rendre plus modulable.

    Répondre à ce message

  • 5

    Bonjour, Pierre,

    Pleine de curiosité, je me suis dit : Allez, je teste !
    Voici les anomalies que j’ai détectées :

    • Une erreur dans la génération des URL quand on navigue de page en page (affiche une URL de type serveur/équation_spip, mais ne prenant pas en compte l’URL du site de type serveur/dossier/équation_spip)
    • Je ne vois pas le lecteur vidéo... Je l’aperçois quand le navigateur charge la page, puis j’ai un cadre gris avec une croix au milieu quand la page s’affiche définitivement à l’écran.

    Précision : comme le dit le mode d’emploi, j’ai joint un fichier vidéo au format .ogg à l’article par « Joindre un document » sous l’article et « Ajouter une image ou un document » à gauche quand l’article est édité.
    Le mystère reste entier...
    Un peu de lumière ?
    Cordialement,
    KMk.

    • Bonjour,_
      Premièrement, merci d’avoir essayé mon squelette.
      Pour les URL, désolé, je n’avais jamais utilisé SPIP dans un sous-dossier. Ca devrait être corrigé (sur le SVN). N’hésitez pas à signaler tout autre problème.
      Pour le lecteur, quel navigateur utilisez vous ?


      Au passage, je signale que ce bug de SPIP pourrait potentiellement empêcher le lecteur de fonctionner avec certains navigateurs.

    • Bonjour, Pierre,

      Le test négatif a été fait avec Firefox...
      Du fait de votre question, j’ai fait ces tests :

      • IE8 : négatif
      • Safari : négatif
      • Chrome : Eureka ! j’ai vu apparaître la vidéo... ça marche.

      Dans le squelette, au moins pour la page article, il doit y avoir une erreur dans le code : apparaissent en haut à gauche ces sigles : " /> qui signalent qu’une balise s’ouvre / ne se ferme pas correctement...

      Bon, je sais que la critique est beaucoup plus facile que l’art lui-même... mais, au moins, ces tests servent à quelque chose ;-P !
      Bonne continuation !

      KMk.

    • Auteur : KMk...

    • J’ai vérifié la page article et je ne vois pas d’erreur de balise.
      Est-ce que vous testez sur une installation vierge ?
      Est-ce que vous pourriez m’envoyer un lien vers la page ou au moins le code de cette page, que je jette un oeil.

      Pour la vidéo, je n’ai aucun problème chez moi, c’est peut être une histoire de codec.
      Pareil, est-ce que vous pouvez m’envoyer la vidéo, que je fasse des essais ?

      Mon adresse e-mail : rudloff.p@gmail.com

    • Oups, j’ai oublié de préciser :
      Si la vidéo est en .ogv, ce bug peut empêcher l’affichage dans Firefox.
      La solution consiste à éditer /ecrire/base/typedoc.php et enlever les espaces à la fin de ces lignes :

      'ogg' => 'audio/ogg ',
      'ogv' => 'video/ogg ',

      En tout cas, merci beaucoup pour tout ces tests.

    Répondre à ce message

  • 1
    François Daniel Giezendanner

    Bonjour,

    L’avantage/l’intérêt lorsque l’on met à disposition une centaine de site SPIP c’est par exemple de donner le choix aux administrateurs de choisir leur squelette, simplement en l’activant dans la liste des plugins.

    pour nous l’avantage est très important.

    Cordialement

    FDG

    • J’ai pensé à faire un plugin qui ajouterait une balise (#VIDEO par exemple) qui afficherait un lecteur HTML5 avec un fallback en Flash.
      Le problème c’est que SPIP n’est par défaut pas en HTML5, donc les pages deviendraient invalides.

    Répondre à ce message

  • Ah ! je vois que mon message n’a pas d’auteur... voilà le manque comblé !

    KMk.

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom